• ARTICLE
  • STRING
  • CONVERTER
  • ENCRYPT
  • NETWORK
  • MORE
    CHART
  • ARTICLE
    STRING
    CONVERTER
    ENCRYPT
    NETWORK
    MORE
    CHART
logo Online Tools
Comment Favorite Copy Link Share

CSS Selectors Reference


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
CSS Selectors Reference-summary

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.

CSS Selectors Reference-instructions