selectors

Send to Kindle
home » snippets » css » selectors


Selecting first child

 

In the following example, the selector matches any P element that is the first child of a DIV element. The rule suppresses indentation for the first paragraph of a DIV:

div > p:first-child { text-indent: 0 }

This selector would match the P inside the DIV of the following fragment:

<P> The last P before the note.
<DIV class="note">
   <P> The first P inside the note.
</DIV>

but would not match the second P in the following fragment:

<P> The last P before the note.
<DIV class="note">
   <H2>Note</H2>
   <P> The first P inside the note.
</DIV>

The following rule sets the font weight to 'bold' for any EM element that is some descendant of a P element that is a first child:

p:first-child em { font-weight : bold }

 

Negation

 

Negations may not be nested; :not(:not(...)) is invalid. Note also that since pseudo-elements are not simple selectors, they are not a valid argument to :not().

:not(.classname) > input { background:'red' }