- Selector can be restricted to elements with a given class:
p.important { color: red; } /* applies only to <p class="important"> */
.important { color: green; } /* applies to any element with class="important" */
- Selector can specify an id:
div#intro { color:red; } /* applies only to <div id="intro"> */
- Selector can specify element relationships. This is very useful.
ul.nav a { font-weight: bold; }
/* applies to any <a> that's a descendant of <ul class="nav">. */
ul.nav > li { font-weight: bold; }
/* applies to any <li> that's a child of <ul class="nav">. Doesn't work in IE 6. */
h1 + h2 { color: red; }
/* applies to any <h2> that follows a <h1>. Doesn't work in IE 6. */
- Selector "*" matches any element. Useful in combination with other syntax.
ul.nav * li { font-weight: bold; }
/* applies to any <li> that's a grandchild or more distant descendant of
* <ul class="nav">. */