Question

I somewhat understand descendant selectors, but the more complex examples are giving me trouble. For example:

#content .alternative p

Should this rule apply to p elements that are descendants of elements E, where E are :

• descendants of element #content and
• are also members of class .alternative

Or should rule apply to p elements that are:

• descendants of element #content
• and are also members of class .alternative?

How about the following rule?

#content .alternative .alternative1 p

Answer 1

The right most component of the selector is the part that actually picks the element. A space is a descendant selector. If there isn’t a space then the selectors all apply to one element.

#content .alternative p

p element contained in an element of class alternative contained in an element of id content.

#content .alternative .alternative1 p

p element contained in an element of class alternative1 contained in an element of class alternative contained in an element of id content.

#content p.alternative.alternative1

p element of class alternative1 and of class alternative contained in an element of id content.