CSS selectors - CSS: Cascading Style Sheets 编辑

CSS selectors define the elements to which a set of CSS rules apply.

Note: There are no selectors or combinators to select parent items, siblings of parents, or children of parent siblings.

Basic selectors

Universal selector: Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.
Syntax: * ns|* *|*
Example: * will match all the elements of the document.
Type selector: Selects all elements that have the given node name.
Syntax: elementname
Example: input will match any <input> element.
Class selector: Selects all elements that have the given class attribute.
Syntax: .classname
Example: .index will match any element that has a class of "index".
ID selector: Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.
Syntax: #idname
Example: #toc will match the element that has the ID "toc".
Attribute selector: Selects all elements that have the given attribute.
Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Example: [autoplay] will match all elements that have the autoplay attribute set (to any value).

Selector list: The , is a grouping method, it selects all the matching nodes.
Syntax: A, B
Example: div, span will match both <span> and <div> elements.

Descendant combinator: The (space) combinator selects nodes that are descendants of the first element.
Syntax: A B
Example: div span will match all <span> elements that are inside a <div> element.
Child combinator: The > combinator selects nodes that are direct children of the first element.
Syntax: A > B
Example: ul > li will match all <li> elements that are nested directly inside a <ul> element.
General sibling combinator: The ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.
Syntax: A ~ B
Example: p ~ span will match all <span> elements that follow a <p>, immediately or not.
Adjacent sibling combinator: The + combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.
Syntax: A + B
Example: h2 + p will match all <p> elements that directly follow an <h2>.
Column combinator: The || combinator selects nodes which belong to a column.
Syntax: A || B
Example: col || td will match all <td> elements that belong to the scope of the <col>.

Pseudo classes: The : pseudo allow the selection of elements based on state information that is not contained in the document tree.
Example: a:visited will match all <a> elements that have been visited by the user.
Pseudo elements: The :: pseudo represent entities that are not included in HTML.
Example: p::first-line will match the first line of all <p> elements.

Specification	Status	Comment
Selectors Level 4	Working Draft	Added the `\|\|` column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and UI pseudo-classes, modifier for ASCII case-sensitive and case-insensitive attribute value selection.
Selectors Level 3	Recommendation	Added the `~` general sibling combinator and tree-structural pseudo-classes. Made pseudo-elements use a `::` double-colon prefix. Additional attribute selectors
CSS Level 2 (Revision 1)	Recommendation	Added the `>` child and `+` adjacent sibling combinators. Added the universal and attribute selectors.
CSS Level 1	Recommendation	Initial definition.

See the pseudo-class and pseudo-element specification tables for details on those.