HTML and CSS Basics - HTML5 with CSS3 - page 32

This would select all a elements that are descendants of a p element that is a descendant of any element
with the class “introduction” that is a descendant of the element with the ID “main”, and only those
elements. Any links that don't exactly match this context wouldn't be affected by this CSS rule. You can
see how the scope of a descendent selector can be very narrow indeed, targeting only a few elements that
meet the selector's criteria.

Combining Selectors

You can combine two or more selector types, such as an element and an ID or an ID and a class. These
combinations can also narrow down the specificity of your selectors, seeking out only the elements you
want to style and leaving others alone. This rule:
p.info { color: cyan; }
selects only paragraphs ( p elements) belonging to the “info” class. Another element in that class would be
overlooked, and other paragraphs not belonging to the “info” class are also left untouched.

Combining selectors within a descendant selector can target elements with surgical precision:
p#introduction a.more-info:hover { color: silver; }
This rule would apply only to hovered links ( a elements) belonging to the “info” class that are descendants
of the paragraph with the ID “introduction.” You'll rarely have to get this precise with your selectors but it's
good to know the power is there if you need it.

Grouping Selectors

You can group several selectors together as part of a single rule so the same set of declarations can apply
to numerous elements without redundantly repeating them. A comma separates each selector in the rule:
p, h1, h2 { color: maroon; }
The previous rule applies the same color value to every instance of the p , h1 , and h2 elements. The more
complex set of selectors in this rule:
p#introduction em, a.info:hover, h2.info { color: gold; }
will target all em elements descended from the paragraph with the ID “introduction” and all hovered links
with the class “info” as well as h2 elements (a second-level heading) in the “info” class (remember that
different types of elements can belong to the same class). Grouping and combining selectors is a great
way to keep your style sheets compact and manageable.

Advanced Selectors

The selectors you've seen so far are all part of CSS level 1, the first standardized version of CSS
introduced way back in 1996. A few more selectors were introduced in CSS level 2.1:

 Attribute selectors target an element bearing a particular attribute and even an attribute with a

specified value.