.class Selector in CSS

The .class selector is used to select elements with a specific class attribute.

The #id selector is used to style the element with the specified id.

The * selector is used to select all elements. It can also be used to select all elements inside another element.

element Selector in CSS

The element selector is used to select all elements with the specified element name.

element.class Selector in CSS

The element.class selector is used for selecting the specified element with the specified class.

element,element Selector in CSS

For styling multiple elements with the same style we have to separate each element name with a comma.

element element Selector in CSS

The element element selector is used for selecting elements inside elements.

element>element Selector in CSS

The element>element selector is used for selecting elements with a specific parent. Those elements which are not a direct children of the specified parent will not be selected.

element+element Selector in CSS

The element+element selector is used for selecting an element that is directly after another specific element.

element1~element2 Selector in CSS

The element1~element2 selector is used to match the occurrence of element2 that is preceded by element1. Both should have the same parent.

[attribute] Selector in CSS

The [attribute] selector is used for selecting elements with the specific attribute.

[attribute=value] Selector in CSS

The [attribute=value] selector is used for selecting elements with the specified attribute and value.

[attribute~=value] Selector in CSS

The [attribute~=value] selector is used for selecting elements with an attribute value containing a specified word.

[attribute|=value] Selector in CSS

The [attribute|=value] selector is used for selecting elements with the specific attribute starting with the specific value.

[attribute^=value] Selector in CSS

The [attribute^=value] selector is used to match every element whose attribute value begins with a specific value.

[attribute$=value] Selector in CSS

The [attribute$=value] selector is used to match every element whose attribute value ends with a specific value.

[attribute*=value] Selector in CSS

The [attribute*=value] selector is used to match every element whose attribute value containing a specific value.

:active Selector in CSS

A link becomes active when we click on it. The :active selector is used to select and style such types of links.

::after Selector in CSS

The ::after selector is used to inserting something after the content of each selected element. For this purpose, we have to use the content property to specify the content to insert.

::before Selector in CSS

The ::before selector is used to insert something before the content of each selected element. For this purpose, we have to use the content property to specify the content to insert.

:checked Selector in CSS

The :checked selector is used to match every checked input element i.e, radio buttons, checkboxes, and option elements.

:default Selector in CSS

The :default selector is used to selecting the default form element in a group of related elements.

:disabled Selector in CSS

The :disabled selector is used to match every disabled element. It is mostly used on form elements.

:empty Selector in CSS

The :empty selector is used to matching every element which has no children including text nodes.

:enabled Selector in CSS

The :enabled selector is used to match every enabled element. It is mostly used on form elements.

:first-child Selector in CSS

The :first-child selector is used to select the specified selector if and only if it is the first child of its parent.

::first-letter Selector in CSS

The ::first-letter selector is used to adding a style to the first letter of the specified selector.

::first-line Selector in CSS

The ::first-line selector is used to adding a style to the first line of the specified selector.

:first-of-type Selector in CSS

The :first-of-type selector is used to match every element that is the first child of the particular type of its parent. It is very much similar to the nth-of-type().

:focus Selector in CSS

The :focus selector is used to select the element that has focus. It is that element that accept user inputs or keyboard events.

:fullscreen Selector in CSS

The :fullscreen selector is used to select elements in full-screen mode.

:hover Selector in CSS

The :hover selector is used to select elements when we mouse over them. This selector can be used on all elements.

:in-range Selector in CSS

The :in-range selector is used to select all elements with a value within a specified range. It is used for input elements with min and/or max attributes.

:indeterminate Selector in CSS

The :indeterminate selector is used to select form elements that are in an indeterminate state. It is used on input type=checkbox, input type=radio, and progress elements.

:invalid Selector in CSS

The :invalid selector is used to select form elements with a value that does not validate according to the element default settings.

:lang Selector in CSS

The :lang() selector is used to select element with a lang attribute with the specified value.

:last-child Selector in CSS

The :last-child selector is used to match every element that is the last child of its parent. It is similar to nth-last-child(1).

:last-of-type Selector in CSS

The :last-of-type selector is used to match every element that is the last child of a particular type of its parent. It is very much similar to nth-last-of-type(1).

:link Selector in CSS

The :link selector is used to select and style the unvisited links. It is not used for those links which are already been visited.

::marker Selector in CSS

The ::marker selector is used to select and style the marker of a list item. It works on list items in ordered lists and unordered lists.

The :not(selector) selector is used to match every element that is NOT the specified element or selector.

:nth-child() Selector in CSS

The :nth-child(n) selector is used to match every element that is the nth child of its parent. We can say that n can be a number, a keyword or a formula like an + b.

:nth-last-child() Selector in CSS

The :nth-last-child(n) selector is used to match every element that is the nth child of its parent counting from the last child. We can say that n can be a number, a keyword, or a formula.

:nth-last-of-type() Selector in CSS

The :nth-last-of-type(n) selector is used to match every element that is the nth child of a particular type of its parent starting from the last child. We can say that n can be a number, a keyword, or a formula.

:nth-of-type() Selector in CSS

The :nth-of-type(n) selector is used to match every element that is the nth child of the same type of its parent. We can say that n can be a number, a keyword, or a formula.

:only-of-type Selector in CSS

The :only-of-type selector is used to match every element that is the only child of its type of its parent.

:only-child Selector in CSS

The :only-child selector is used to match every element that is the only child of its parent.

:optional Selector in CSS

The :optional selector is used to select form elements that are optional. Those elements are called optional which do not have the required attribute. It is only applicable on input, select, and textarea elements.

:out-of-range Selector in CSS

The :out-of-range selector is used to select all elements with a value that is outside a specified range. It is usable for input elements with min or max attributes.

::placeholder Selector in CSS

The ::placeholder selector is used to select form elements with placeholder text and allows us to style the placeholder text.

:read-only Selector in CSS

The :read-only selector is used to select elements that are readonly. Forms having readonly attribute are defined as readonly.

CSS Selectors

Home >> CSS >> CSS Selectors

List of CSS Selectors

.class Selector in CSS	The .class selector is used to select elements with a specific class attribute.
#id Selector in CSS	The #id selector is used to style the element with the specified id.
* Selector in CSS	The * selector is used to select all elements. It can also be used to select all elements inside another element.
element Selector in CSS	The element selector is used to select all elements with the specified element name.
element.class Selector in CSS	The element.class selector is used for selecting the specified element with the specified class.
element,element Selector in CSS	For styling multiple elements with the same style we have to separate each element name with a comma.
element element Selector in CSS	The element element selector is used for selecting elements inside elements.
element>element Selector in CSS	The element>element selector is used for selecting elements with a specific parent. Those elements which are not a direct children of the specified parent will not be selected.
element+element Selector in CSS	The element+element selector is used for selecting an element that is directly after another specific element.
element1~element2 Selector in CSS	The element1~element2 selector is used to match the occurrence of element2 that is preceded by element1. Both should have the same parent.
[attribute] Selector in CSS	The [attribute] selector is used for selecting elements with the specific attribute.
[attribute=value] Selector in CSS	The [attribute=value] selector is used for selecting elements with the specified attribute and value.
[attribute~=value] Selector in CSS	The [attribute~=value] selector is used for selecting elements with an attribute value containing a specified word.
[attribute\|=value] Selector in CSS	The [attribute\|=value] selector is used for selecting elements with the specific attribute starting with the specific value.
[attribute^=value] Selector in CSS	The [attribute^=value] selector is used to match every element whose attribute value begins with a specific value.
[attribute$=value] Selector in CSS	The [attribute$=value] selector is used to match every element whose attribute value ends with a specific value.
[attribute*=value] Selector in CSS	The [attribute*=value] selector is used to match every element whose attribute value containing a specific value.
:active Selector in CSS	A link becomes active when we click on it. The :active selector is used to select and style such types of links.
::after Selector in CSS	The ::after selector is used to inserting something after the content of each selected element. For this purpose, we have to use the content property to specify the content to insert.
::before Selector in CSS	The ::before selector is used to insert something before the content of each selected element. For this purpose, we have to use the content property to specify the content to insert.
:checked Selector in CSS	The :checked selector is used to match every checked input element i.e, radio buttons, checkboxes, and option elements.
:default Selector in CSS	The :default selector is used to selecting the default form element in a group of related elements.
:disabled Selector in CSS	The :disabled selector is used to match every disabled element. It is mostly used on form elements.
:empty Selector in CSS	The :empty selector is used to matching every element which has no children including text nodes.
:enabled Selector in CSS	The :enabled selector is used to match every enabled element. It is mostly used on form elements.
:first-child Selector in CSS	The :first-child selector is used to select the specified selector if and only if it is the first child of its parent.
::first-letter Selector in CSS	The ::first-letter selector is used to adding a style to the first letter of the specified selector.
::first-line Selector in CSS	The ::first-line selector is used to adding a style to the first line of the specified selector.
:first-of-type Selector in CSS	The :first-of-type selector is used to match every element that is the first child of the particular type of its parent. It is very much similar to the nth-of-type().
:focus Selector in CSS	The :focus selector is used to select the element that has focus. It is that element that accept user inputs or keyboard events.
:fullscreen Selector in CSS	The :fullscreen selector is used to select elements in full-screen mode.
:hover Selector in CSS	The :hover selector is used to select elements when we mouse over them. This selector can be used on all elements.
:in-range Selector in CSS	The :in-range selector is used to select all elements with a value within a specified range. It is used for input elements with min and/or max attributes.
:indeterminate Selector in CSS	The :indeterminate selector is used to select form elements that are in an indeterminate state. It is used on input type=checkbox, input type=radio, and progress elements.
:invalid Selector in CSS	The :invalid selector is used to select form elements with a value that does not validate according to the element default settings.
:lang Selector in CSS	The :lang() selector is used to select element with a lang attribute with the specified value.
:last-child Selector in CSS	The :last-child selector is used to match every element that is the last child of its parent. It is similar to nth-last-child(1).
:last-of-type Selector in CSS	The :last-of-type selector is used to match every element that is the last child of a particular type of its parent. It is very much similar to nth-last-of-type(1).
:link Selector in CSS	The :link selector is used to select and style the unvisited links. It is not used for those links which are already been visited.
::marker Selector in CSS	The ::marker selector is used to select and style the marker of a list item. It works on list items in ordered lists and unordered lists.
:not Selector in CSS	The :not(selector) selector is used to match every element that is NOT the specified element or selector.
:nth-child() Selector in CSS	The :nth-child(n) selector is used to match every element that is the nth child of its parent. We can say that n can be a number, a keyword or a formula like an + b.
:nth-last-child() Selector in CSS	The :nth-last-child(n) selector is used to match every element that is the nth child of its parent counting from the last child. We can say that n can be a number, a keyword, or a formula.
:nth-last-of-type() Selector in CSS	The :nth-last-of-type(n) selector is used to match every element that is the nth child of a particular type of its parent starting from the last child. We can say that n can be a number, a keyword, or a formula.
:nth-of-type() Selector in CSS	The :nth-of-type(n) selector is used to match every element that is the nth child of the same type of its parent. We can say that n can be a number, a keyword, or a formula.
:only-of-type Selector in CSS	The :only-of-type selector is used to match every element that is the only child of its type of its parent.
:only-child Selector in CSS	The :only-child selector is used to match every element that is the only child of its parent.
:optional Selector in CSS	The :optional selector is used to select form elements that are optional. Those elements are called optional which do not have the required attribute. It is only applicable on input, select, and textarea elements.
:out-of-range Selector in CSS	The :out-of-range selector is used to select all elements with a value that is outside a specified range. It is usable for input elements with min or max attributes.
::placeholder Selector in CSS	The ::placeholder selector is used to select form elements with placeholder text and allows us to style the placeholder text.
:read-only Selector in CSS	The :read-only selector is used to select elements that are readonly. Forms having readonly attribute are defined as readonly.
:read-write Selector in CSS	The :read-write selector is used to select form elements that are readable and writeable. Form elements having no readonly and disabled attributes are defined as read-able and write-able.
:required Selector in CSS	The :required selector is used to select form elements that are required. Form elements having required attributes are said to be required. It is applicable to input, select, and textarea elements.
:root Selector in CSS	The :root selector is used to match the document root element. In an HTML document, html element is always the root.
::selection Selector in CSS	The ::selection selector is used to match the portion of an element that is selected by a user.
:target Selector in CSS	The :target selector is used to style the currently active target element.
:valid Selector in CSS	The :valid selector is used to select form elements with a value that validates according to the element default settings.
:visited Selector in CSS	The :visited selector is used to select visited links. This selector can be used on all elements.

CSS Selectors

List of CSS Selectors

Contact Us

Hire An Expert From Our Platform