CSS 2.1 selectors

A selector is a pattern that matches an element (or more elements) when a given condition is satisfied. This pattern is made up of one or more simple selectors separated by combinators. Combinators are: space, ">" and "+". Space may occur between a combinator and simple selectors. The matched elements in a web document are called subjects of the selector.

When different selectors share the same declarations, they can be grouped in a comma-separated list, like so:

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

The universal selector

The universal selector (an asterisk, "*") matches any element in the document:

* {
  color: #000;
}

If the universal selector is not the only component of a simple selector, it can be omitted. So *.box and .box are equivalent.

The type selector

The type selector matches an element based on its type, that is, it matches any instance of the given element in the document:

p {
  line-height: 1.5;
}

The descendant selector

The descendant selector matches an element when the element is the descendant of another element. A descendant selector is made up of two or more selectors separated by space:

div p {
  text-indent: 1em;
}

The child selector

The child selector matches an element when the element is the child of another element. A child selector is made up of two or more selectors separated by ">":

div ol > li {
  line-height: normal;
}

The adjacent selector

The adjacent selector has the following syntax: E1 + E2, where E2 is the subject of the selector. The adjacent selector matches E2 only if E1 and E2 have the same parent and E1 immediately preceeds E2 in the document tree, without taking into account text nodes or comment nodes:

h1 + p {
  text-indent: 1em;
}

Attribute selectors

An attribute selector matches an element when the element has a given attribute. In CSS 2.1, there are four types of attribute selectors:

E[attribute]
Matches an element based on the presence of the given attribute, disregarding the attribute's value:
```
a[title] {
  border-bottom: 1px dashed #c00;
}
```
E[attribute="value"]
Matches an element based on the exact value of its attribute:
```
a[rel="External"] {
  background: url("arrow.gif") no-repeat 100% 50%;
}
```
E[attribute~="value"]
Matches an element based on a part of the value of its attribute, separated by a space. So the following CSS rule:
```
p[class~="important"] {
  background: #ffc;
}
```
can match the following structure:
```
<p class="note important">...</p>
```
E[attribute|="value"]
Matches an element with an attribute attribute whose value is a list of values separated by dashes starting with the value specified by the selector. So the following CSS rule:
```
h4[class|="code"] {
  border-bottom: 1px dashed;
}
```
can match the following structure:
```
<h4 class="code-title">...</h4>
```

The class selector

The class selector matches one or more elements based on the specified value of the class attribute:

.important {background: #ffc;}

p.note {
  font-weight: bold;
}

The first rule will apply to all elements with a class name of important, while the second only to p elements with a class name of note.

The ID selector

The ID selector matches an element based on the value of its id attribute. An ID can be used only once in a document:

#box {width: 200px;}

The :first-child pseudo-class

The :first-child pseudo-class matches an element if the element is the very first child of another element:

div p:first-child {
  margin: 0;
}

The link pseudo-classes: :link and :visited

The link pseudo-classes :link and :visited apply to links that are not present or present in the browser history, respectively:

a:link {color: blue;}
a:visited {color: purple}

The dynamic pseudo-classes: :hover, :active, :focus

The dynamic pseudo-classes apply to elements based on some user actions:

:hover
When the user chooses an element with the mouse but he doesn't activate it. Browsers apply this pseudo-class when an user hovers an element's box with the mouse.
:active
When an user activates an element, for example when he clicks and releases the mouse button.
:focus
When an element gets focus, namely when it accepts keyboard events or another kind of textual input. A typical example is when an user clicks on a text field in a form.

When applied to links, all the pseudo-classes seen so far must be specified as follows:

a:link
a:visited
a:hover
a:active
a:focus

By doing so, we avoid specific problems due to the cascade.

The language pseudo-class: :lang

The :lang(L) pseudo-class matches an element when the element has a lang attribute with value L:

p:lang(it) {
  color: green;
}

The :first-line pseudo-element

The :first-line pseudo-element matches the first line of a block element, inline-block element, table caption, and table cell:

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

The :first-letter pseudo-element

The :first-letter pseudo-element matches the first element of a block element. Allowed properties for this pseudo-element include font properties, text-decoration, text-transform, letter-spacing, word-spacing, line-height, float, vertical-align (if the pseudo-element is not floated), margin properties, padding properties, border properties, color and background properties. This selector matches an element when the initial letter is not preceded by other content, such as images or inline tables.

p:first-letter {
  float: left;
  padding: 0 4px 2px 0;
  font-size: 2em;
  color: #777;
}

The :before and :after pseudo-elements

These pseudo-elements are used to insert generated content before and after the content of a given element. They are usually used together with the content property:

a[title]:after {
  content: "(" attr(title) ")";
  padding-right: 4px;
}

a[href]:before {
  content: url(link.gif);
  padding-left: 12px;
}

onwebdev

Web development by Gabriele Romanato