W3cubDocs

/CSS

CSS Selectors

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

Basic selectors

Type selector
Selects all elements that match the given node name.
Syntax: eltname
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".
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.
Attribute selector
Selects elements based on the value of 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).

Combinators

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>.
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>.
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.
Descendant combinator
The 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.

Pseudo-classes

Pseudo-classes 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

Pseudo-elements represent entities that are not included in HTML.
Example: p::first-line will match the first line of all <p> elements.

Specifications

Specification Status Comment
Selectors Level 4 Working Draft
Selectors Level 3 Recommendation
CSS Level 2 (Revision 1) Recommendation
CSS Level 1 Recommendation Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1 1.0 (1.7 or earlier) 3.0 3.5 1.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.5 1.0 (1.9.2) ? ? 3.2

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors