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.
Selector | Example | Explanation |
---|---|---|
active | a:active | Selects of active link. |
adjacent | div + p | Selects element |
after | p::after | Adds anything after the content of the |
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 |
attribute-value-contain | a[href*="somesite"] | Selects all links where the href attribute contains the word "w3schools".Selects all Обирає всі посилання в яких атрибут 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 |
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 |
checked | input:checked | Selects every element |
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 |
element-child | div > p | Selects all items |
empty | p:empty | Selects item |
enabled | input:enabled | Selects all enabled input elements. |
first-child | p:first-child | Selects all items |
first-letter | p::first-letter | Selects first letter of each item |
first-line | p::first-line | Selects first row of each item |
first-of-type | p:first-of-type | Selects item |
focus | input:focus | Selects item |
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 |
inside-element | div p | Selects all items |
invalid | input:invalid | Selects all input elements with non-validated value. |
lang | p:lang(it) | Selects each item |
last-child | p:last-child | Selects item |
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 |
not | :not(p) | Selection of elements that do not contain the specified selector. |
nth-child | p:nth-child(2) | Selects item |
nth-last-child | p:nth-last-child(2) | Selects each item |
nth-last-of-type | p:nth-last-of-type(2) | Selects each item |
nth-of-type | p:nth-of-type(2) | Selects each item |
only-child | p:only-child | Selects item |
only-of-type | p:only-of-type | Selects each item |
optional | input:optional | Selection of |
out-of-range | input:out-of-range | Selection of all |
placeholder | input[type="text"]::placeholder | Changes the tooltip style for the |
read-only | input:read-only | Selects |
read-write | input:read-write | Selects |
required | input:required | Selection of mandatory |
root | :root | Вибирає кореневий елемент документа |
selection | ::selection | Selects the root element of the document |
sibling | p ~ ul | Selects all items |
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 |