Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Wdes105 day 3


Published on

  • Be the first to comment

  • Be the first to like this

Wdes105 day 3

  1. 1. WDES105Day 3 -- CSS Compound and Contextual Selectors
  2. 2. Compound SelectorsThe term "compound selector" is used bydesigners and in HTML editors like AdobeDreamweaver.The W3C selectors specification doesnt referto compound selectors, instead referring to"grouping" and "descendant selectors."
  3. 3. Compound Selectors"Grouping" -- combines common formatting intoone rule.When grouping tags with common elementsalways use a comma between each tag.
  4. 4. Compound Selectors"Grouping" Exampleh1, h2, h3 { font-family:verdana,sans-serif; }You can then format elements such as font sizeas separate tag selectors.grouping.html
  5. 5. Compound Selectors"Descendant selectors" -- refers to selectorsthat are contained within other elements.When using descendent selectors always usewhitespace between each tag.
  6. 6. Compound Selectors"Descendent selectors" Example.myclass strong { color: #f00; }descendant.html
  7. 7. Contextual Selectors"Contextual selectors" -- an alternate name for"Descendent selectors"Apply the rule when second selector appears inthe context of the first (is a descendant of thefirst).
  8. 8. Contextual Selectors"Child selectors" -- only selects an element if itis the immediate child of another element.When using child selectors always use agreater than sign (>) between each tag.
  9. 9. Contextual Selectors"Child selectors" Examplebody > h2{color: #00f;}child.html