CSS selectors

Combinators
Pseudo-сlasses
Pseudo elements

A selector is part of a CSS rule that tells the browser which element (or elements) of a web page will be styled.

The term selector can refer to a simple selector, a compound selector, a complex selector, or a selector list.

The simple selectors include:

type Selector
universal Selector
attribute Selector
ID Selector
class Selector
pseudo-classes

CSS selector	Example	Description	CSS
.class	`.myClass`	Selects all elements with a class myClass (`class="myClass"`).	1
#id	`#main`	Selects an element with an id main (`id="main"`).	1
*	`*`	Select all elements.	2
Element	`span`	Select all `<span>` elements.	1
Element,Element	`div,span`	Select all `<div>` elements and all `<span>` elements.	1
[Attribute]	`[title]`	Selects all elements with an title attribute.	2
[attribute="value"]	`[title="cost"]`	Selects all elements with an title attribute, the value of which exactly matches the value specified in the selector (`title="cost"`).	2
[attribute~="value"]	`[title~="one"]`	Selects all elements with an title attribute, A substring (in the form of a single word) "one" is found in the value of which (anywhere) (`title="one and two"`).	2
[attribute\|="value"]	`[lang\|="en"]`	Select all elements with a `lang` attribute whose value starts with en.	2
[attribute^="value"]	`a[href^="https"]`	Select each `<a>` element with the `href` attribute whose value begins with https.	3
[attribute$="value"]	`[src$=".png"]`	Selects all elements with the `src` attribute whose value ends in .png (`src="some_img.png"`).	3
[attribute*="value"]	`[title*="one"]`	Selects all elements with the `title` attribute, in which value (anywhere) the substring (as a single word or part of it) is found one (`title="One and two"`).	3

A compound selector is a sequence of simple selectors that are not separated by combinators, that is, one selector immediately follows. He chooses an element that matches all the simple selectors it contains. The type selector or the universal selector included in the composite selector must be located first in this sequence. Only one type selector or universal selector is allowed in a compound selector.

span[title].className
p.className1.className2#someId:hover

A complex selector is a sequence of selectors that are separated by combinators.

The list of selectors is a selector, separated by a comma.

Combinators

To combine simple CSS selectors, combinators are used, which indicate the relationship between the simple selectors.

Combinator	Example	Description	CSS
Element Element	`div span`	Select all `<span>` elements inside the `<div>`.	1
Element>Element	`div>span`	Selects all `<span>`, children whose parent is a `<div>` element.	2
Element+Element	`div+p`	Selects all the `<p>`, elements that are located immediately after the `<div>` elements.	2
Element~Element	`p~ol`	Select all `<ol>` elements preceded by the `<p>` element.	3

Pseudo-classes

A pseudo-class is a simple selector that is used to select what cannot be selected using other selectors or can be selected, but in a rather difficult way.

Pseudo-class	Example	Description	CSS
:link	`a:link`	Select all not visited links.	1
:visited	`a:visited`	Select all visited links.	1
:active	`a:active`	Select the active link.	1
:hover	`a:hover`	Select a link when you hover the mouse.	1
:focus	`input:focus`	Select the input element that is in focus.	2
:first-child	`p:first-child`	Selecting each `<p>` element, which is the first child of its parent.	2
:lang(language)	`p:lang(en)`	Selects each `<p>` element with a `lang` attribute whose value begins with en.	2
:first-of-type	`p:first-of-type`	Selects each `<p>` element, which is the first of the `<p>` elements of its parent element.	3
:last-of-type	`p:last-of-type`	Select each `<p>` element, which is the last of the `<p>` elements of its parent element.	3
:only-of-type	`p:only-of-type`	Select each `<p>` element, which is the only element `<p>` of its parent element.	3
:only-child	`p:only-child`	Select each `<p>` element, which is the only child of its parent element.	3
:nth-child(n)	`p:nth-child(2)`	Select each `<p>` element, which is the second child of its parent element.	3
:nth-last-child(n)	`p:nth-last-child(2)`	Selects each `<p>` element, which is the second child of its parent element, counting from the last child element.	3
:nth-of-type(n)	`p:nth-of-type(2)`	Selects each `<p>` element, which is the second child of `<p>` its parent element.	3
:nth-last-of-type(n)	`p:nth-last-of-type(2)`	Select each `<p>` element, which is the second child of `<p>` its parent element, counting from the last child element.	3
:last-child	`p:last-child`	Select each `<p>` element, which is the last element of its parent element.	3
:root	`:root`	Select the root element in the document.	3
:empty	`p:empty`	Select each `<p>` element that does not contain child elements (including text).	3
:target	`:target`	Select the current target element on the page, that is, the element to which the link was moved inside the page.	3
:enabled	`input:enabled`	Select each enabled `<input>`.	3
:disabled	`input:disabled`	Select each disabled `<input>`.	3
:checked	`input:checked`	Select the `<input>` element, that is selected by default or by the user.	3
:not(selector)	`:not(p)`	Selects all elements except the `<p>` element.	3

Pseudo elements

A Pseudo element is a virtual element that does not exist explicitly in the document element tree. Pseudo elements are used to select parts of an element that cannot be selected by other selectors, or to stylize parts of the element rather than the entire part.

Pseudo element	Example	Description	CSS
::first-letter	`p::first-letter`	Selects the first letter of each `<p>` element.	1
::first-line	`p::first-line`	Selects the first row of each `<p>` element.	1
::before	`p::before`	Adds an element with content before the contents of each `<p>` element.	2
::after	`p::after`	Adds an element with content after the contents of each `<p>` element.	2