Style rule selectors

Pseudoelement selectors match things that are contained or adjacent to the specified element content. They are attached to an element selector by a colon. The first-letter selector matches the first letter of the specified element content, while the first-line selector matches the first line of the specified element content, like here:

story:first-letter {font-size: x-large;}
story:first-line {font-variant: small-caps;}

The before and after selectors match the points immediately before and after the specified element. You can insert text at that point using the content property, like in this example:

ingredients:before {content: "INGREDIENTS: "}

Pseudoclass selectors match elements according to special conditions not involving their name. As for pseudoelements, they are separated from the element name by a colon. The first-child selector matches the specified element if it is the first child of its parent element. For instance, the following rule applies only to the first ingredient:

ingredient:first-child {text-decoration:blink;}

The lang selector matches all the elements in the specified language according to the xml:lang attribute. For exemple, this rule matches all elements in Italian language (as soon as the xml:lang attribute has been speficied with the appropirate value):

*:lang(it) {font-style: italic;}

The link selector applies to all yet unvisited links, while the visited selector applies to all visited links. For instance:

*:link {
  color:navy; 
  text-decoration: underline;
}

*:visited {
  color:purple; 
  text-decoration: underline;
}

The hover selector applies to all elements on which the cursor is currently positioned, the active selector matches all elements that the user is currently activating (for example, by clicking the mouse on), and the focus selector selects all elements that currently has the focus.

It is worth saying that all the selectors can be combined. For instance, the following rule applies to all currently active e elements that have a previous d sibling which has a c parent which has an a ancestor which has a b attribute.

a[b] c > d + e:active {display: none}