Understanding more complex examples of descendant selectors

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 .alter开发者_StackOverflow中文版native

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

About the first question: applies to p elements that are: descendants of element #content and also descendants of elements with class .alternative

The second one is the same, just with an extra level of depth.

Check this link for more info on selectors

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.

Each section of the specifier separated by a space refers to a separate node in the document. So its the first one.

The first one is the correct description. Your second interpretation would be written in CSS as:

#content p.alternative

Since the .alternative is attached to the p in that version, it's a qualifier rather than specifying a descendent. If you instead write it as

#content p .alternative

it would mean elements of class .alternative that are descendents of p elements that are descendents of the #content element.