Selector Definitions and Notes

Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2.
In some contexts, adjacent elements generate formatting objects whose presentation is handled automatically (e.g., collapsing vertical margins between adjacent boxes). The "+" selector allows authors to specify additional style to adjacent elements.

+ = sibling (immediately follows)

body + p
= any paragragh element that immediately follows a body element.

This is rather unlike any other aspect of selectors, as it relates two elements that are at the same depth in the tree. Support isn't universal, but adjacent sibling selectorsr are still pretty useful.

CSS2 allows authors to specify rules that match attributes defined in the source document.

Attribute selectors may match in four ways:

1. [att]
   Match when the element sets the "att" attribute, whatever the value of the attribute.
2. [att=val]
   Match when the element's "att" attribute value is exactly "val".
3. [att~=val]
   Match when the element's "att" attribute value is a space-separated list of "words", one of which is exactly "val". If this selector is used, the words in the value must not contain spaces (since they are separated by spaces).
4. [att|=val]
   Match when the element's "att" attribute value is a hyphen-separated list of "words", beginning with "val". The match always starts at the beginning of the attribute value. This is primarily intended to allow language subcode matches (e.g., the "lang" attribute in HTML) as described in RFC 1766 ([RFC1766]).

Attribute values must be identifiers or strings. The case-sensitivity of attribute names and values in selectors depends on the document language.

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

body > p
= any paragragh element that is a child of a body element.

> constrains the relationship between two elements to be parent-child. It is related to, but not quite the same as, descendant selection. Support isn't universal, but the child selector is still pretty useful.

At times, authors may want selectors to match an element that is the descendant of another element in the document tree (e.g., "Match those EM elements that are contained by an H1 element"). Descendant selectors express such a relationship in a pattern. A descendant selector is made up of two or more selectors separated by whitespace. A descendant selector of the form "A B" matches when an element B is an arbitrary descendant of some ancestor element A.

body p
= any paragragh element that is a descendant of a body element.

Document languages may contain attributes that are declared to be of type ID. What makes attributes of type ID special is that no two such attributes can have the same value; whatever the document language, an ID attribute can be used to uniquely identify its element. In HTML all ID attributes are named "id"; XML applications may name ID attributes differently, but the same restriction applies.

The ID attribute of a document language allows authors to assign an identifier to one element instance in the document tree. CSS ID selectors match an element instance based on its identifier. A CSS ID selector contains a "#" immediately followed by the ID value.

ID selectors have a higher precedence than attribute selectors. For example, in HTML, the selector #p123 is more specific than [ID=p123] in terms of the cascade.

Pseudo-classes classify elements on characteristics other than their name, attributes or content; in principle characteristics that cannot be deduced from the document tree. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document. The exception is ':first-child', which can be deduced from the document tree.

Examples:

• :first-child pseudo-class
  The :first-child pseudo-class matches an element that is the first child of some other element.
• The link pseudo-classes: :link and :visited
• The dynamic pseudo-classes: :hover, :active, and :focus
• The language pseudo-class: :lang

The :first-line pseudo-element applies special styles to the first formatted line of a paragraph Examples:

• The :first-line pseudo-element
• The :first-letter pseudo-element
• The :before and :after pseudo-elements

The parts of a rule that select the elements to be styled with the associated declaration block. Without selectors, CSS couldn't work!. Selectors tie styles and the document structure together. Any element which can be described by a selector is said to match that selector. For example, <em> matches the selector em, and will almost certainly match the selector body em.

Selectors can be grouped for efficiency. Grouped selectors are separated by commas:

h1, h2, h3, div.subsec {color: rgb(100%,80%,20%);}

This is the same as writing several rules with identical declarations and a single selector each.

There are many varieties of selector…
(type, descendant, class, ID, attribute, child, adjacent-sibling, pseudo-class, pseudo-element, universal—and there are more to come!)

This one's sort of a wild card…

Acts like a type element, except it matches any and every element it can

Therefore, * {color: red;} would turn every element in the entire document red

Can be used as part of other selector types

For example, div * li {font-weight: bold;} would boldface any li element that is at least a grandchild of a div element

You could color every element with a class attribute by writing*[class] {color: green;}

Match any element that immediately follows an h1 with h1 + p {…}

Legacy note: *.class {…} is equivalent to .class {…} (ditto for IDs)* = any

But its position in a selector can affect the scope of "any." Some examples.

* {color: red;} That will select any (and all) elements in a document. Every single last one of them.

ul * {color: purple;} That will select any element that's descended from a ul element. That would include its li children, and any descednants of those list items. So a ul nested inside an li would be selected, as would all of its descendants.

ul * li {color: blue;} That selects any li that's descended from any element that's descended from a ul. So the list items in an unordered list would not be selected, unless that unordered list were descended from another unordered list.

means equals or begins with

means contains