CSS selectors and combinators
CSS selectors are used to define a pattern of the elements that you want to select for applying a set of CSS rules on the selected elements. Combinators define the relationship between the selectors. Using various selectors and combinators, you can precisely select and style the desired elements based on their type, attributes, state, or relationship to other elements.
Types of selectors
There are over 80 selectors and combinators. CSS selectors can be grouped into the following categories based on the type of elements they can select.
Basic selectors
The type selector selects all elements that have the given node name. For example, div will select all elements and input will match any element. The universal selector, denoted with an asterisk ( * ), is a special type selector that selects all elements.
The class selector selects all elements that have the given class attribute denoted by the class name prefixed with a period ( . ). For example, .index will match any element that has class=»index» . The ID selector selects an element based on the value of its id attribute. The selector is the id prefixed with a «number sign» (U+0023, # ). For example, #toc will match the element that has id=»toc» . Both class and id are global attributes. There should be only one element with a given id in a document; but if there is more than one, the ID selector will match all the elements with that id .
When combining a type or universal selector with a class or id selector to create a compound selector, the type or universal selector must precede the class or id.
CSS
In this example, we declare four simple selectors and one compound selector using the four basic selector types, as described above.
* font-style: italic; > p color: red; > .myClass text-decoration: underline; > #myId font-family: monospace; > p.myClass#myId font-size: 1.5rem; > HTML
p class="myClass" id="myId">I match everything.p> p>I match the universal and type selectors only.p>
Result
Combinators
Using CSS combinators, we can combine selectors to select DOM nodes based on their relationship to other elements within the document node tree. This combining of selectors with combinators creates complex selectors.
Descendant combinator
The descendant combinator, denoted with one or more spaces, selects nodes that are descendants of the first element. For example, div span will match all elements that are inside a element.
Child combinator
The child combinator is more specific than the descendant combinator. Denoted with the greater than character ( > ), the child combinator selects nodes that are direct children of the first element. Comparing with our previous example, div > span will match only the elements that are direct children of a element.
General sibling combinator
In addition to descendant selectors, CSS also enables selecting elements based on their siblings. The general sibling combinator, denoted with a tilde ( ~ ), selects siblings. Given A ~ B , all elements matching B will be selected if they are preceded by A , provided both A and B share the same parent. For example, h2 ~ p will match all elements that follow an h2, immediately or not.
Adjacent sibling combinator
The adjacent sibling combinator, denoted by the plus symbol ( + ), is similar to the general sibling. However, given A + B , it only matches B if B is immediately preceded by A , with both sharing the same parent. Amending our previous example, h2 + p will match only the single
element that immediately follows an element.
Column combinator
There is also a column combinator, denoted by two pipe characters ( || ), which, when supported, selects nodes that belong to a column. For example, col || td will match all elements that belong to the scope of the .
Namespace separator
The namespace separator is another combinator that is generally used in conjunction with the @namespace at-rule. This combinator is denoted by a single pipe character ( | ). It enables limiting type selectors and the universal selector to a specific namespace. For example, by defining a namespace such as @namespace SVG url(‘http://www.w3.org/2000/svg’); , you can include selectors that target elements nested in an SVG namespace only. Declaring SVG|a would match links within SVGs and not those in the rest of the document. Namespacing can be useful to target MathML, SVG, or other XML-based content within your HTML.
CSS
In this example, we declare five relative selectors using simple selectors combined with combinators.
h2 + p ~ p font-style: italic; > h2 + p + p color: red; > .myClass + p text-decoration: underline; > #myId > .myClass outline: 3px dashed red; > > p font-size: 1.1rem; > HTML
h2 class="myClass" id="myId"> No selectors match. span class="myClass">This span has an outlinespan> as it is both myClass and a child of #myId. h2> p>The first paragraph is underlined. All the paragraphs are 1.1rem.p> p> The second paragraph is red. This and the following paragraphs are italic. p> p>The third paragraph is NOT red. It is italic and 1.1rem.p> p class="myClass"> Does not have an outline; this is a sibling of H2, not a child. It is italic and 1.1rem. p>
Result
Attribute selectors
Attribute selectors select all elements that, depending on how the selector is written, either have the given attribute or have the given attribute with a substring value match. For example, [type] will match all elements that have the type attribute set (to any value), and [type=»submit»] will match and , or any element with type=»submit» set, even though this attribute-value pair is only supported on and elements. The match is case-insensitive.
The case sensitivity of the attribute depends on the language. Generally, in HTML, if an attribute is enumerated, the value in the selector is case-insensitive, even if the value is not one of the enumerated values or if the attribute is not a valid value for the element on which it is set. For non-enumerated attributes, like class , id , or any data-* attribute, or for non-HTML attributes, like role or aria-* attributes, the value match is case-sensitive; the match can be made case-insensitive with a case-insensitive modifier ( i ).
Pseudo-class selectors
The CSS selectors module defines over 60 pseudo-classes. Pseudo-classes are simple selectors, prefixed with a colon ( : ), that allow the selection of elements based on state information that is not contained in the document tree. pseudo-classes can be used to style an element based on its state. For example, the :target simple selector targets element of a URL containing a fragment identifier, and the a:visited compound selector matches all elements that have been visited by a user.
Multiple pseudo-classes can be combined to create compound selectors. When combining a pseudo-class into a compound selector with a type or universal selector, the pseudo-class must follow the type selector or universal selector, if present.
Pseudo-element selectors
Not all CSS selectors are defined in the CSS selectors module. CSS pseudo-element selectors are defined in the CSS pseudo-elements module.
CSS pseudo-elements, prefixed with two colons ( :: ), represent entities that are not included in HTML. For example, the simple ::marker selector selects list item bullets, and the compound selector p::first-line matches the first line of all elements.
Specifications
See the pseudo-classes and pseudo-elements specification tables for details on those.
See also
Found a content problem with this page?
This page was last modified on Jul 26, 2023 by MDN contributors.
Your blueprint for a better internet.
CSS Selectors — Full List
Full list of CSS selectors, includes Selectors Level 3 and Selectors Level 4.
At writing, Level 4 is in draft status and many of the new selectors have limited support in browsers.
This list is also available grouped by category and by specification, where you can find examples of each selector.
Selects an E element whose foo attribute value is exactly equal to bar , regardless of its case. Basically, using i allows you to specify «case-sensitive» when specifying the value.
So for example, Text , text , and TEXT will all be selected if i is specified.
Selects an E element being the source anchor of a hyperlink.
This is the equivalent of using both the :link and :visited pseudo-classes.
Selects an E element being the target of the referring URL.
Selects an E element that is currently presented in a time-dimensional canvas.
For example, if the contents are being read out while being displayed on a screen, this selector could be used to style the current item as it is being read out.
Selects an E element that is in the past in a time-dimensional canvas.
For example, if the contents are being read out while being displayed on a screen, this selector could be used to style the items that have already been read out.
Select an E element that is in the future in a time-dimensional canvas.
For example, if the contents are being read out while being displayed on a screen, this selector could be used to style the items that have yet to be read out.
Selects an E element that can possibly receive a drop.
For example, in HTML you can specify a drop target with the dropzone attribute. This selector can be used style those elements while the user is dragging another element to be dropped.
Selects an E element that is the current drop target for the item being dragged.
In other words, if the user were to release the drag, the element would be dropped on to this drop target.
Selects an E element that could receive the item currently being dragged. It only matches if the drop target is valid for the object currently being dragged.
For example, the HTML dropzone attribute can be used to specify which types of files can be dropped onto an element.
Selects a user interface element E that is user alterable.
For example, an HTML input element that is not disabled and not readonly is :read-write . Also, any HTML element with contenteditable attribute set to the true state is also :read-write .
Selects a user interface element E that is not user alterable.
For example, an HTML input element that is disabled or readonly is :read-only .
Selects an input control currently showing placeholder text.
This allows you to style the placeholder text. For example, change its color, etc.
Selects a user interface element E that is the default item in a group of related choices.
For example, it could select the initially selected option element in a select element, or the default button in the form, etc.
Selects a user interface element E that is checked/selected (for example, a radio-button or checkbox).
Can be used to style the element’s label.
Selects a user interface element E that is in an indeterminate state (neither checked nor unchecked).
Can be used to style the element’s label.
Selects a user-input element E that meets its data validity semantics.
Selects a user-input element E that doesn’t meet its data validity semantics.
Selects a user-input element E whose value is in-range.
Selects a user-input element E whose value is out-of-range.
Selects a user-input element E that requires input.
For example, a form element with the required attribute.
Selects a user-input element E that does not require input.
For example, a form element without the required attribute.
Selects an E element, root of the document.
In most cases, when using HTML this will match the html element, however, this may not always be the case if using another language such as SVG or XML.
Selects an E element that has no content except maybe white space.
Similar to :empty , however, :blank will also select elements that contain white space (which :empty will not).
Selects an F element descendant of an E element.
Note that this selector does the same thing as the previous selector ( E F ). This selector was introduced in CSS Selectors Level 4 to give the descendant combinator a visible, non-whitespace form and to bridge the gap between the child combinator (>) and the shadow-piercing descendant combinator (>>>)