Advanced Selectors (pseudo-classes, pseudo-elements, etc.)

Attribute selectors – They may match in four ways:

[att] –     Match when the element sets the “att” attribute, whatever the value of the attribute.

[att=val] –     Match when the element’s “att” attribute value is exactly “val”.

[att~=val] –     Represents an element with the att attribute whose value is a white space-separated list of words, one of which is exactly “val”.

[att|=val] –     Represents an element with the att attribute, its value either being exactly “val” or beginning with “val” immediately followed by “-” .

:first-child pseudo-class – It matches an element that is the first child element of some other element. 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>

:link and :visited pseudo-class – The :link pseudo-class applies for links that have not yet been visited. The :visited pseudo-class applies once the link has been visited by the user.  The two states are mutually exclusive. They are used as

a:link { color: red }

:link  { color: red }

:hover, :active, and :focus pseudo-classes – The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it like when mouse pointer hovers over a box generated by the element. The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).

The :first-line pseudo-element – It applies special styles to the contents of the first formatted line of a paragraph. For instance:

p:first-line { text-transform: uppercase }

The above rule means “change the letters of the first line of every paragraph to uppercase”. However, the selector “P:first-line” does not match any real HTML element. It does match a pseudo-element that conforming user agents will insert at the beginning of every paragraph.

The :first-letter pseudo-element – It must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.

The :before and :after pseudo-elements – The ‘:before’ and ‘:after’ pseudo-elements can be used to insert generated content before or after an element’s content as

h1:before {content: counter(chapno, upper-roman) “. “}

When the :first-letter and :first-line pseudo-elements are applied to an element having content generated using :before and :after, they apply to the first letter or line of the element including the generated content.

p.special:before {content: “Special! “}

p.special:first-letter {color: #ffd800}

Back to Tutorial