Selectors

Selector is part of a CSS rule that tells the browser which element of a web page CSS style will be applied to.

This is a sample and formal description of the element or group of elements to which the CSS styles will be applied.

Selects all links where the href attribute contains the word "w3schools".Selects all Обирає всі посилання в яких атрибут href містить слово "somesite".

Selector	Example	Explanation
active	a:active	Selects of active link.
adjacent	div + p	Selects element `<p>` , which is located immediately after the `<div>`.
after	p::after	Adds anything after the content of the `<p>`
all	*	Selects all elements
attribute	[target]	Selects all items that have the target attribute specified.
attribute-value	target="_blank"	Selects allitems with target="_blank"
attribute-value-begin	a[href^="https"]	Selects all items `<a>` that have attribute href which starts with "https".
attribute-value-contain	a[href*="somesite"]
attribute-value-contains	[title~=flower]	Selects all the elements with the title attribute that contain the word flower
attribute-value-end	a[href$=".pdf"]	Selects all elements `<a>` where the href attribute value ends with ".pdf"
attribute-value-lang	[lang\|=en]	Selects all elements with the lang attribute whose value begins with "en".
before	p::before	Adds anything before the content of the `<p>`
checked	input:checked	Selects every element `<input>` element that is checked.
class	.intro	Selection of all items with "intro" class.
default	input:default	Selects an input form that is unassigned.
disabled	input:disabled	Selects all disabled input elements.
element	p	Selects all items `<p>`.
element-child	div > p	Selects all items`<p>` for which the parent element is the `<div>`.
empty	p:empty	Selects item`<p>` without text and other HTML elements.
enabled	input:enabled	Selects all enabled input elements.
first-child	p:first-child	Selects all items `<p>`, that are the first descendant of its parent.
first-letter	p::first-letter	Selects first letter of each item `<p>`.
first-line	p::first-line	Selects first row of each item `<p>`
first-of-type	p:first-of-type	Selects item`<p>`, if it is the first element of its parent.
focus	input:focus	Selects item `<input>` in focus
hover	a:hover	Selects the link to which the cursor is given.
id	#firstname	Selects an item with id = "firstname"
in-range	input:in-range	Selects items`<input>` with a value in the allowed range.
inside-element	div p	Selects all items `<p>` in `<div>`
invalid	input:invalid	Selects all input elements with non-validated value.
lang	p:lang(it)	Selects each item `<p>` with lang attribute "it" (Italian)
last-child	p:last-child	Selects item `<p>`, which is the last descendant of its parent.
last-of-type	p:last-of-type	Selects the last element of his parent.
link	a:link	Selects all links that have not yet been passed.
multielement	div, p	Selects all items `<div>` and all elements `<p>`.
not	:not(p)	Selection of elements that do not contain the specified selector.
nth-child	p:nth-child(2)	Selects item `<p>`,if it is the second element of its parent.
nth-last-child	p:nth-last-child(2)	Selects each item `<p>`, which is the second descendant of its parent, starting at the end.
nth-last-of-type	p:nth-last-of-type(2)	Selects each item `<p>`, which is the second `<p>` of its parent from the end.
nth-of-type	p:nth-of-type(2)	Selects each item`<p>`,that is second `<p>` element of its parent.
only-child	p:only-child	Selects item `<p>`, if it is the sole descendant of its parent.
only-of-type	p:only-of-type	Selects each item `<p>`, which is the only `<p>` element of this type of parent.
optional	input:optional	Selection of `<input>` elements without the "required" attribute.
out-of-range	input:out-of-range	Selection of all `<input>` elements in which the value entered is outside the allowed range.
placeholder	input[type="text"]::placeholder	Changes the tooltip style for the `<input>` text box!
read-only	input:read-only	Selects `<input>` elements that have the "readonly" attribute.
read-write	input:read-write	Selects `<input>` elements that do not have a "readonly" attribute specified.
required	input:required	Selection of mandatory `<input>` elements.
root	:root	Вибирає кореневий елемент документа
selection	::selection	Selects the root element of the document
sibling	p ~ ul	Selects all items `<ul>` that are in front of the element `<p>`
target	#news:target	Selects the currently active element that has the attribute id = "news"
valid	input:valid	Selects all input elements with a valid value.
visited	a:visited	Selects links that have already been transitioned