HTML and CSS HTML CSS About me

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