1. WDES105
Day 3 -- CSS Compound and Contextual
Selectors
about.me/babon

2. Compound Selectors
The term "compound selector" is used by
designers and in HTML editors like Adobe
Dreamweaver.
The W3C selectors specification doesn't refer
to compound selectors, instead referring to
"grouping" and "descendant selectors."
about.me/babon

3. Compound Selectors
"Grouping" -- combines common formatting into
one rule.
When grouping tags with common elements
always use a comma between each tag.
about.me/babon

4. Compound Selectors
"Grouping" Example
h1, h2, h3 { font-family:verdana,sans-serif; }
You can then format elements such as font size
as separate tag selectors.
grouping.html
about.me/babon

5. Compound Selectors
"Descendant selectors" -- refers to selectors
that are contained within other elements.
When using descendent selectors always use
whitespace between each tag.
about.me/babon

6. Compound Selectors
"Descendent selectors" Example
.myclass strong { color: #f00; }
descendant.html
about.me/babon

7. Contextual Selectors
"Contextual selectors" -- an alternate name for
"Descendent selectors"
Apply the rule when second selector appears in
the context of the first (is a descendant of the
first).
about.me/babon

8. Contextual Selectors
"Child selectors" -- only selects an element if it
is the immediate child of another element.
When using child selectors always use a
greater than sign (>) between each tag.
about.me/babon

9. Contextual Selectors
"Child selectors" Example
body > h2{color: #00f;}
child.html
about.me/babon