# CSS Selectors

A selector is a pattern that matches a set of elements in an HTML or XML document. The rules that appear in the block that belongs to the selector are applied to all elements that match this pattern (unless overridden by another rule in the cascade).

The following table summarizes the Selector syntax:

| = New for CSS3

Pattern | Type | Matches
--- | --- | ---
* | U | any element
E | T | an element of type E
E[foo] | A | an E element with a "foo" attribute
E[foo="bar"] | A | an E element whose "foo" attribute value is exactly equal to "bar"
E[foo~="bar"] | A | an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"
E[foo^="en"] | A | an E element whose "foo" attribute value begins exactly with the string "bar"
E[foo$="en"] | A | an E element whose "foo" attribute value ends exactly with the string "bar"
E[foo*="en"] | A | an E element whose "foo" attribute value contains the substring "bar"
E[foo|="en"] | A | an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en"
E:root | P | an E element, root of the document
E:nth-child(n) | P | an E element, the n-th child of its parent
E:nth-last-child(n) | P | an E element, the n-th child of its parent, counting from the last one
E:nth-of-type(n) | P | an E element, the n-th sibling of its type
E:nth-last-of-type(n) | P | an E element, the n-th sibling of its type, counting from the last one
E:first-child | P | an E element, first child of its parent
E:last-child | P | an E element, last child of its parent
E:first-of-type | P | an E element, first sibling of its type
E:last-of-type | P | an E element, last sibling of its type
E:only-child | P | an E element, only child of its parent
E:only-of-type | P | an E element, only sibling of its type
E:empty | P | an E element that has no children (including text nodes)
E:link E:visited | P | an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)
E:active E:hover E:focus | P | an E element during certain user actions
E:target | P | an E element being the target of the referring URI
E:lang(fr) | P | an element of type E in language "fr" (the document language specifies how language is determined)
E:enabled E:disabled | P | a user interface element E which is enabled or disabled
E:checked | P | a user interface element E which is checked (for instance a radio-button or checkbox)
E::first-line | P | the first formatted line of an E element
E::first-letter | P | the first formatted letter of an E element
E::before | P | generated content before an E element
E::after | P | generated content after an E element
E.warning | L | an E element whose class is "warning" (the document language specifies how class is determined).
E#myid | I | an E element with ID equal to "myid".
E:not(s) | N | an E element that does not match simple selector s
E F | D | an F element descendant of an E element
E>F | C | an F element child of an E element
E + F | S | an F element immediately preceded by an E element
E ~ F | S | an F element preceded by an E element

    Type Legend:
    A - Attribute
    C - Child
    I - ID
    L - Class
    D - Descendant
    N - Negation Pseudo-class
    P - Pseudo-class/element
    S - Adjacent Sibling
    T - Type
    U - Universal

# Grouping Selectors

Often times in style sheets there are multiple selectors with the same style - as in the example below:

    h1
    {
      color:blue;
    }

    p
    {
      color:blue;
    }

To minimize the code, selectors can be grouped by specifying each separated by a comma - as in the grouped example below:

    h1, p
    {
      color:blue;
    }

# Nesting Selectors

Selectors can also be nested, meaning that a style can be applied for a selector within a selector.

The following example shows:
- one style applied to all p elements,
- one style that applies to all classes marked "highlighted", and
- one style that applies to all p elements within a class marked "highlighted":

    p
    {
      color:blue;
    }

    .highlighted
    {
      background-color:yellow;
    }

    .highlighted p
    {
      color:red;
    }