CSS selectors

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:

CSS selectorExampleDescriptionCSS
.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.

CombinatorExampleDescriptionCSS
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-classExampleDescriptionCSS
: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 elementExampleDescriptionCSS
::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
Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011-2018 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen