Geek Answers Handbook

Understanding more complex examples of descendant selectors

I understand a few descendant selectors, but more complex examples give me problems. For example:

#content .alternative p

If this rule applies to p elements that are descendants of the elements of E, where E:

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

Or, you should apply the rule to elements pthat:

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

What about the following rule?

#content .alternative .alternative1 p
+5
source share
4 answers

The rightmost component of the selector is the part that actually selects the element. Space is a descendant selector. If there is no space, then all selectors are applicable to one element.

#content .alternative p

p, , id.

#content .alternative .alternative1 p

p, alternative1, , id.

#content p.alternative.alternative1

p class alternative1 , id.

+6

: p, : #content, .alternative

- , .

+7

, , node . , .

+1

- . CSS :

#content p.alternative

Since it is .alternativeattached to pin this version, it is a classifier, and does not indicate a descendant. If you write instead

#content p .alternative

this would mean class members .alternativethat are descendants of elements pthat are descendants of the element #content.

+1
source

More articles:


All Articles