| Selector | Example | Description | CSS Level |
|---|---|---|---|
| * | * | Selects all elements. | CSS 2 |
| element | span | The CSS type selector matches elements by node name. In other words, it selects all
elements of the given type within a document.
Example : All span elements. |
CSS 1 |
| :not(selector) | :not(p) | The :not() CSS pseudo-class represents elements that
do not match a list of
selectors. Since it prevents specific items from being selected, it is known as the
negation pseudo-class.
Example : Selects any element that is NOT p. |
CSS 3 |
| .classname | .btn | The CSS class selector matches elements based on the contents of their class attribute.
Example : All elements with class="btn". |
CSS 1 |
| .classname1.classname2 | .btn.btn-info | The CSS class selector matches elements with both classname1 and classname2 attribute values.
Example : All elements with a class list that includes both btn and btn-info. |
CSS 1 |
| .classname1 .classname2 | .btn .btn-info | In all child elements of the class="classname1"
element, select the element whose class is classname2.
Example : Select the element class="btn-info" under the element class="btn". |
CSS 1 |
| element.classname1 | div.info | All div elements with class="info". | CSS 1 |
| element1 element2 | div p | Selects element2 descendant of element1.
Example : All p that are descendants of div. |
CSS 1 |
| element1 > element2 | div > p | Select element2 that are children of element1.
Example : Select p that are children of div. |
CSS 2 |
| element1 + element2 | div + p |
Select element2 that come immediately after any element1.
Example : Select p that come immediately after any div. |
CSS 2 |
| element1 ~ element2 | div ~ p |
The general sibling combinator (~) separates two selectors and matches all
iterations of the element2, that are following the
element1 (though not
necessarily immediately), and are children of the same parent element.
Example : Select p that are siblings of and subsequent to any div. |
CSS 3 |
| selector1,selector2 | div,p |
The CSS selector list , selects all the matching
nodes.
Example : Selects all div and p elements. |
CSS 1 |
| #id | #query | The CSS ID selector matches an element based on the value of the element's id
attribute. In order for the element to be selected, its id attribute must match
exactly the value given in the selector.
Example : The element with id="query". | CSS 1 |
| [attribute] | a[title] | Select all elements with attribute attribute.
Example : a elements with a title attribute. |
CSS 2 |
| [attribute=value] | a[target="_blank"] |
Select all elements with attribute matching value.
Example : a elements with an target matching _blank. |
CSS 2 |
| [attribute=value i] | a[target="_blank" i] |
Select all elements with attribute matching value.The value to be compared is case-insensitively.
Example : a elements with an target matching _blank ignore case. |
CSS 4 |
| [attribute~=value] | a[class~="logo"] | Represents elements with an attribute name of attribute whose value is a
whitespace-separated list of words, one of which is exactly value.
Example : a elements whose class attribute contains the word logo. |
CSS 2 |
| [attribute^=value] | a[href^="https"] | Represents elements with an attribute name of attribute whose value is
prefixed (preceded) by value.
Example : Links that start with https. |
CSS 3 |
| [attribute$=value] | a[href$=".com"] |
Represents elements with an attribute name of attribute whose value is
suffixed (followed) by value.
Example : a elements with an href ending .com. |
CSS 3 |
| [attribute*=value] | a[href*="example"] | Represents elements with an attribute name of attribute whose value contains at least one
occurrence of value within the string.
Example : a elements with an href containing example. |
CSS 3 |
| [attribute|=value] | div[lang|="zh"] |
Represents elements with an attribute name of attr whose value can be exactly value
or can begin with value immediately followed by a hyphen, - (U+002D). It is often
used for language subcode matches.
Example : All div in Chinese, whether simplified (zh-CN) or traditional (zh-TW). |
CSS 2 |
| :dir() | :dir(rtl) |
The :dir() CSS pseudo-class matches elements based on
the directionality of the text contained in them.
Example : Selects any element with right-to-left text. |
CSS 4 |
| :lang(language-code) | p:lang(en) |
The :lang() CSS pseudo-class matches elements based
on the language they are determined to be in.
Example : Selects any p in English (en). |
CSS 4 |
| :any-link | :any-link |
The :any-link CSS pseudo-class selector represents an
element that acts as the
source anchor of a hyperlink, independent of whether it has been visited. In other
words, it matches every a or
area
element that has an href attribute. Thus, it matches all elements that match :link
or :visited.
Example : Selects any element that would be matched by :link or :visited. |
CSS 4 |
| :link | a:link | The :link CSS pseudo-class represents an element that
has not yet been visited. It
matches every unvisited a or area
element that has an href attribute.
Example : Selects any a that has not been visited yet. |
CSS 1 |
| :visited | a:visited | The :visited CSS pseudo-class represents links that
the user has already visited.
For privacy reasons, the styles that can be modified using this selector are very
limited.
Example : Selects any a that has been visited. |
CSS 1 |
| :target | :target |
The :target CSS pseudo-class represents a unique
element (the target element) with
an id matching the URL's fragment.
Example : Selects an element with an id matching the current URL's fragment. |
CSS 3 |
| :active | a:active | The :active CSS pseudo-class represents an element
(such as a button) that is being
activated by the user. When using a mouse, "activation" typically starts when the
user presses down the primary mouse button.
Example : Selects any a that is being activated. |
CSS 1 |
| :hover | a:hover |
The :hover CSS pseudo-class matches when the user
interacts with an element with a
pointing device, but does not necessarily activate it. It is generally triggered
when the user hovers over an element with the cursor (mouse pointer).
Example : Selects any a element when hovered. |
CSS 2 |
| :focus | input:focus |
The :focus CSS pseudo-class represents an element
(such as a form input) that has
received focus. It is generally triggered when the user clicks or taps on an element
or selects it with the keyboard's Tab key.
Example : Selects any input when focused. |
CSS 2 |
| :drop() | :drop(active) | Selects an E element that can possibly receive a drop. 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. :drop(active) selects an element that is the current drop target for the item being dragged. :drop(valid) selects an element that could receive the item currently being dragged. It only matches if the drop target is valid for the object currently being dragged. :drop(invalid) selects an element that cannot receive the item currently being dragged, but could receive some other item. | CSS 4 |
| :enabled | input:enabled |
The :enabled CSS pseudo-class represents any enabled
element. An element is enabled
if it can be activated (selected, clicked on, typed into, etc.) or accept focus. The
element also has a disabled state, in which it can't be activated or accept focus.
Example : Selects any enabled input. |
CSS 3 |
| :disabled | input:disabled |
The :disabled CSS pseudo-class represents any
disabled element. An element is
disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept
focus. The element also has an enabled state, in which it can be activated or accept
focus.
Example : Selects any disabled input. |
CSS 3 |
| :read-write | input:read-write | The :read-write CSS pseudo-class represents an
element (such as input or textarea)
that is editable by the user.
Example : Selects any read-write input. |
CSS 3 |
| :read-only | input:read-only |
The :read-only CSS pseudo-class represents an element
(such as input or textarea) that is not editable by the user.
Example : Selects any read-only input. |
CSS 3 |
| :placeholder-shown | :placeholder-shown | The :placeholder-shown CSS pseudo-class represents any input or textarea element that is currently displaying placeholder text. | CSS 3 |
| :default | :default | The :default CSS pseudo-class selects form elements that are the default in a group of related elements. Reference Documents. | CSS 3 |
| :checked | :checked |
The :checked CSS pseudo-class selector represents any
radio (<input type="radio">),
checkbox (<input type="checkbox">), or option (<option> in a <select>)
element that is checked or toggled to an on state.
Example : Matches any checked/selected radio, checkbox, or option. |
CSS 3 |
| :indeterminate | input:indeterminate | The :indeterminate CSS pseudo-class represents any form element whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute set to true, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate progress elements. | CSS 4 |
| :valid | input:valid |
The :valid CSS pseudo-class represents any <input>
or other <form>
element whose contents validate successfully. This allows to easily make valid
fields adopt an appearance that helps the user confirm that their data is formatted
properly.
Example : Selects any valid input. |
CSS 3 |
| :invalid | input:invalid |
The :invalid CSS pseudo-class represents any <form>,
<fieldset>, <input>
or other <form> element whose contents fail to validate.
Example : Selects any invalid input. |
CSS 3 |
| :in-range | input:in-range | The :in-range CSS pseudo-class represents an <input>
element whose current
value is within the range limits specified by the min
and max attributes.
Example : Selects any input, but only when it has a range specified, and its value is inside that range |
CSS 3 |
| :out-of-range | input:out-of-range |
The :out-of-range CSS pseudo-class represents an <input>
element whose current
value is outside the range limits specified by the min and max attributes.
Example : Selects any input, but only when it has a range specified, and its value is outside that range. |
CSS 3 |
| :required | input:required |
The :required CSS pseudo-class represents any <input>,
<select>, or <textarea>
element that has the required attribute set on it.
Example : Selects any required input. |
CSS 3 |
| :optional | input:optional |
The :optional CSS pseudo-class represents any <input>,
<select>, or <textarea>
element that does not have the required attribute set
on it.
Example : Selects any optional input. |
CSS 3 |
| :root | :root |
The :root CSS pseudo-class matches the root element
of a tree representing the
document. In HTML, :root represents the <html>
element and is identical to the
selector html, except that its specificity is higher.
Example : Selects the root element of the document: <html> in the case of HTML. |
CSS 3 |
| :empty | div:empty |
The :empty CSS pseudo-class represents any element
that has no children. Children
can be either element nodes or text (including whitespace). Comments, processing
instructions, and CSS content do not affect whether an element is considered empty.
Example : Selects any div that contains no content. |
CSS 3 |
| :nth-child() | li:nth-child(2) |
The :nth-child() CSS pseudo-class matches elements
based on their position among a
group of siblings.
Example : Selects the second element in a list if that element is a li. Reference Documents. |
CSS 3 |
| :nth-last-child() | :nth-last-child(4n) |
The :nth-last-child() CSS pseudo-class matches
elements based on their position among a group of siblings, counting from the end.
Example : Selects every fourth element among any group of siblings, counting backwards from the last one. Reference Documents. |
CSS 3 |
| :first-child | p:first-child |
The :first-child CSS pseudo-class represents the
first element among a group of sibling elements.
Example : Selects any p that is the first element among its siblings. |
CSS 2 |
| :last-child | p:last-child |
The :last-child CSS pseudo-class represents the last
element among a group of sibling elements.
Example : Selects any p that is the last element among its siblings. |
CSS 3 |
| :only-child | p:only-child |
The :only-child CSS pseudo-class represents an
element without any siblings. This is
the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a
lower specificity.
Example : Selects each p, but only if it is the only child of its parent. |
CSS 3 |
| :nth-of-type() | p:nth-of-type(4n) |
The :nth-of-type() CSS pseudo-class matches elements
based on their position among siblings of the same type (tag name).
Example : Selects every fourth p element among any group of siblings. Reference Documents. |
CSS 3 |
| :nth-last-of-type() | p:nth-last-of-type(4n) |
The :nth-last-of-type() CSS pseudo-class matches
elements based on their position
among siblings of the same type (tag name), counting from the end.
Example : Selects every fourth p element among any group of siblings, counting backwards from the last one. Reference Documents. |
CSS 3 |
| :first-of-type | p:first-of-type |
The :first-of-type CSS pseudo-class represents the
first element of its type among a group of sibling elements.
Example : Selects any p that is the first element of its type among its siblings. |
CSS 3 |
| :last-of-type | p:last-of-type |
The :last-of-type CSS pseudo-class represents the
last element of its type among a group of sibling elements.
Example : Selects any p that is the last element of its type among its siblings. |
CSS 3 |
| :only-of-type | p:only-of-type |
The :only-of-type CSS pseudo-class represents an
element that has no siblings of the same type.
Example : Selects each p, but only if it is the only p element inside its parent. |
CSS 3 |
| :scope | :scope | The :scope CSS pseudo-class represents elements that are a reference point for selectors to match against. | CSS 4 |
| :current() | :current(p,ul) | The :current is a CSS pseudo-selector that matches an element or an ancestor of an element that’s currently in display. | CSS 4 |
| :past() | :past(p, span) | The :past CSS pseudo-class selector is a time-dimensional pseudo-class that will match for any element which appears entirely before an element that matches :current. For example in a video with captions which are being displayed by WebVTT. | CSS 4 |
| :future() | :future(p, span) | The :future CSS pseudo-class selector is a time-dimensional pseudo-class that will match for any element which appears entirely after an element that matches :current. For example in a video with captions which are being displayed by WebVTT. | CSS 4 |
| :is(selector) | :is(header, main, footer) p:hover |
The :is() CSS pseudo-class function takes a selector
list as its argument, and
selects any element that can be selected by one of the selectors in that list. This
is useful for writing large selectors in a more compact form.
Example : Selects any p inside a header, main or footer element that is being hovered. |
CSS 4 |
| :has(selector) | a:has(> img) |
The :has() CSS pseudo-class represents an element if
any of the selectors passed as
parameters (relative to the :scope of the given
element) match at least one element.
Example : Selects only a elements that directly contain an img child. |
CSS 4 |
| ::placeholder | ::placeholder | The ::placeholder CSS pseudo-element represents the placeholder text in an <input> or <textarea> element. | CSS 4 |
| ::selection | ::selection | The ::selection CSS pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text). | CSS 4 |
| :fullscreen | :fullscreen | The :fullscreen CSS pseudo-class matches every element which is currently in fullscreen mode. If multiple elements have been put into fullscreen mode, this selects them all. | Experimental |
| :nth-col() | :nth-col(odd) |
The :nth-col() CSS pseudo-class is designed for
tables and grids. It accepts the
An+B notation such as used with the :nth-child
selector, using this to target every
nth column. The values odd and even are also valid.
Example : Selects every odd column in a table. |
Experimental |
| :nth-last-col() | :nth-last-col(odd) |
The :nth-last-col() CSS pseudo-class is designed for
tables and grids. It accepts
the An+B notation such as used with the :nth-child
selector, using this to target
every nth column before it, therefore counting back from the end of the set of
columns. The values odd and even are also valid.
Example : Selects every odd column in a table. |
Experimental |
| :playing | :playing | The :playing CSS pseudo-class selector is a resource state pseudo-class that will match an audio, video, or similar resource that is capable of being "played" or "paused", when that element is "playing". A resource is playing even if in buffering state or paused for any reason other than a user interaction to cause it to be paused. | Experimental |
| :paused | :paused | The :paused CSS pseudo-class selector is a resource state pseudo-class that will match an audio, video, or similar resource that is capable of being "played" or "paused", when that element is "paused". A resource is paused either due to being in an non-activated state, or due to the user explicitly paused it. | Experimental |
The CSS selector defines the range of elements that CSS rules apply to. This tool provides a reference manual for CSS universal selectors, type selectors, class selectors, id selectors, combination selectors, attribute selectors, pseudo class selectors, and so on. It also shows the CSS Level that this selector was introduced into.
