WDES105Day 3 -- CSS Compound and Contextual              Selectors                           about.me/babon
Compound SelectorsThe term "compound selector" is used bydesigners and in HTML editors like AdobeDreamweaver.The W3C selec...
Compound Selectors"Grouping" -- combines common formatting intoone rule.When grouping tags with common elementsalways use ...
Compound Selectors"Grouping" Exampleh1, h2, h3 { font-family:verdana,sans-serif; }You can then format elements such as fon...
Compound Selectors"Descendant selectors" -- refers to selectorsthat are contained within other elements.When using descend...
Compound Selectors"Descendent selectors" Example.myclass strong { color: #f00; }descendant.html                           ...
Contextual Selectors"Contextual selectors" -- an alternate name for"Descendent selectors"Apply the rule when second select...
Contextual Selectors"Child selectors" -- only selects an element if itis the immediate child of another element.When using...
Contextual Selectors"Child selectors" Examplebody > h2{color: #00f;}child.html                            about.me/babon
Upcoming SlideShare
Loading in …5
×

Wdes105 day 3

104 views
96 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
104
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Wdes105 day 3

  1. 1. WDES105Day 3 -- CSS Compound and Contextual Selectors about.me/babon
  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." about.me/babon
  3. 3. Compound Selectors"Grouping" -- combines common formatting intoone rule.When grouping tags with common elementsalways use a comma between each tag. about.me/babon
  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 about.me/babon
  5. 5. Compound Selectors"Descendant selectors" -- refers to selectorsthat are contained within other elements.When using descendent selectors always usewhitespace between each tag. about.me/babon
  6. 6. Compound Selectors"Descendent selectors" Example.myclass strong { color: #f00; }descendant.html about.me/babon
  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). about.me/babon
  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. about.me/babon
  9. 9. Contextual Selectors"Child selectors" Examplebody > h2{color: #00f;}child.html about.me/babon

×