CSS селектор определяет, к какому именно HTML элементу (или группе элементов) относится данный блок стилей.
Селектор | Пример | Описание примера | Версия\CSS |
---|---|---|---|
.class | .Class1 | Выбирает все элементы с атрибутом class="Class1" | 1 |
#id | #div11 | Выбирает все элементы с атрибутом id="div11" | 1 |
* | * | Выбирает все элементы | 2 |
element | p | Выбирает все элементы типа <p> | 1 |
element,element | div, p | Выбирает все элементы типов <div> и <p> | 1 |
element element | div p | Выбирает все элементы <p> находящиеся внутри элементов <div> | 1 |
elemeВыбирает все элементыnt>element | div > p | Выбирает все элементы <p>, для которых родительский элемент - <div> | 2 |
element+element | div + p | Выбирает все элементы <p>, которые помещаются сразу после элементов <div> | 2 |
element1~element2 | p ~ ul | Выбирает каждый элемент <ul>, которому предшествует элемент <p> | 3 |
[attribute] | [src] | Выбирает все элементы, у которых есть атрибут src | 2 |
[attribute=value] | [target=_blank] | Выбирает все элементы, для которых значение атрибута target="_blank" | 2 |
[attribute~=value] | [title~=flower] | Выбирает все элементы, у которых атрибут title содержит слово "flower" | 2 |
[attribute|=value] | [lang|=en] | Выбирает все элементы, у которых значение атрибута lang начинается с "en" | 2 |
[attribute^=value] | a[href^="https"] | Выбирает все элементы, у которых значение атрибута href начинается с "https" | 3 |
[attribute$=value] | a[href$=".pdf"] | Выбирает все элементы, у которых значение атрибута href заканчивается на ".pdf" | 3 |
[attribute*=value] | a[href*="microsoft"] | Выбирает все элементы, у которых значение атрибута href содержит строку "microsoft" | 3 |
:active | a:active | Выбирает активную ссылку | 1 |
::after | p::after | Вставляет что-то после элемента p | 2 |
::before | p::before | Вставляет что-то до элемента p | 2 |
:checked | input:checked | Выбирает каждый элемент input с атрибутом checked | 3 |
:disabled | input:disabled | Выбирает каждый элемент input с атрибутом disabled | 3 |
:empty | p:empty | Выбирает каждый элемент <p> , внутри которого нет ни дочерних элементов ни текста | 3 |
:enabled | input:enabled | Выбирает каждый элемент <input> с атрибутом enabled | 3 |
:first-child | p:first-child | Выбирает каждый <p> элемент, который является первым дочерним элементом для его родителя. | 2 |
::first-letter | p::first-letter | Выбирает первый символ у каждого элемента <p> | 1 |
::first-line | p::first-line | Выбирает первую строку у каждого элемента <p> | 1 |
:first-of-type | p:first-of-type | Выбирает каждый элемент <p> , который является первым элементом типа <p> для его родителя | 3 |
:focus | input:focus | Выбирает элемент <input> у которого сейчас фокус | 2 |
:hover | a:hover | Выбирает те ссылки (элементы типа a)? на которые наведён курсор мыши | 1 |
:in-range | input:in-range | CSS псевдокласс in-range выбирает элемент <input> когда его значение находится внутри диапазона, заданных атрибутами min и max этого элемента. | 3 |
:invalid | input:invalid | Выбирает все элементы типа <input> с неправильными значениями | 3 |
:lang(language) | p:lang(it) | Выбирает каждый элемент <p> атрибутом lang, имеющим значение "it" (Italian) | 2 |
:last-child | p:last-child | Выбирает каждый элемент <p> , который является последним дочерним элементов у своего родителя | 3 |
:last-of-type | p:last-of-type | Выбирает каждый элемент <p> , который является последним элементом типа <p> для своего родителя | 3 |
:link | a:link | Выбирает все непосещённые ссылки | 1 |
:not(selector) | :not(p) | Выбирает все элементы типа, отличного от <p> | 3 |
:nth-child(n) | p:nth-child(2) | Выбирает каждый элемент типа <p>, который является вторым дочерним у своего родителя | 3 |
:nth-last-child(n) | p:nth-last-child(2) | Выбирает каждый элемент <p> который является вторым дочерним у своего родителя, считая с последнего дочернего элемента | 3 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | Выбирает каждый элемент <p> , который является вторым элементом типа <p> у своего родителя, считая с последнего дочернего элемента | 3 |
:nth-of-type(n) | p:nth-of-type(2) | Выбирает каждый элемент <p> , который является вторым элементом типа <p> у своего родителя | 3 |
:only-of-type | p:only-of-type | Выбирает каждый элемент типа <p> , который является единственным элементом типа <p> у своего родителя | 3 |
:only-child | p:only-child | Выбирает каждый элемент <p> который является единственным элементом у своего родителя | 3 |
:optional | input:optional | Выбирает все элементы типа <input> , у которых нет атрибута "required" | 3 |
:out-of-range | input:out-of-range | Выбирает все элементы <input> , значение которых находится вне диапазона, определяиого атрибутами min и max | 3 |
:read-only | input:read-only | Выбирает все элементы <input> с атрибутом "readonly" | 3 |
:read-write | input:read-write | Выбирает все элементы <input> без атрибута "readonly" | 3 |
:required | input:required | Выбирает все элементы <input> с атрибутом "required" | 3 |
:root | :root | Выбирает корневой элемент документа | 3 |
::selection | ::selection | Выбирает выделенную пользователем часть элемента | |
:target | h1:target | Выбирает элемент H1 , на который ссылается активная ссылка | 3 |
:valid | input:valid | Выбирает все элементы <input> с корректными значениями | 3 |
:visited | a:visited | Выбирает все посещённые ссылки | 1 |