CSS Selector Справочник
Селекторы CSS
В CSS селекторы являются шаблонами, используемыми для выбора элементов, которые требуется присвоить стилю.
Используйте наш тестер селектора CSS для демонстрации различных селекторов.
Селектор | Пример | Пример описания |
---|---|---|
.class | .intro | Выбор всех элементов с class="intro" |
#id | #firstname | Выбор элемента с id="firstname" |
* | * | Выбор всех элементов |
element | p | Выбор всех элементов <p> |
element,element | div, p | Выбор всех элементов <div> и всех элементов <p> |
element element | div p | Выбор всех <p> элементов внутри элементов <div> |
element>element | div > p | Выбор всех элементов <p>, в которых родительский элемент является элементом <div> |
element+element | div + p | Выбор всех <p> элементов, помещенных сразу после <div> элементов |
element1~element2 | p ~ ul | Выбор каждого элемента <ul>, которому предшествует элемент <p> |
[attribute] | [target] | Выбор всех элементов с целевым атрибутом |
[attribute=value] | [target=_blank] | Выбор всех элементов с target="_blank" |
[attribute~=value] | [title~=flower] | Выделяет все элементы с атрибутом title, содержащим слово "flower" |
[attribute|=value] | [lang|=en] | Выбор всех элементов со значением атрибута lang, начиная с "en" |
[attribute^=value] | a[href^="https"] | Выбирает каждый элемент <a>, значение атрибута href которого начинается с "https" |
[attribute$=value] | a[href$=".pdf"] | Выбирает каждый элемент <a>, значение атрибута href которого заканчивается ".pdf" |
[attribute*=value] | a[href*="html5css.ru"] | Выбирает каждый элемент <a>, значение атрибута href которого содержит подстроку "html5css.ru" |
:active | a:active | Выбор активной ссылки |
::after | p::after | Вставка чего-либо после содержимого каждого элемента < p > |
::before | p::before | Вставка чего-либо перед содержимым каждого элемента <p> |
:checked | input:checked | Выбор каждого отмеченного <input> элемента |
:disabled | input:disabled | Выбор всех отключенных элементов <input> |
:empty | p:empty | Выбор каждого элемента <p>, не имеющего дочерних элементов (включая текстовые узлы) |
:enabled | input:enabled | Выбор всех включенных элементов <input> |
:first-child | p:first-child | Выбирает каждый элемент <p>, являющийся первым дочерним элементом родительского элемента |
::first-letter | p::first-letter | Выбор первой буквы каждого элемента <p> |
::first-line | p::first-line | Выбор первой строки каждого элемента <p> |
:first-of-type | p:first-of-type | Выбор каждого элемента <p>, являющегося первым элементом <p> родительского элемента |
:focus | input:focus | Выбор элемента ввода, имеющего фокус |
:hover | a:hover | Выбор ссылок при наведении указателя мыши |
:in-range | input:in-range | Выбор входных элементов со значением в указанном диапазоне |
:invalid | input:invalid | Выбор всех входных элементов с недопустимым значением |
:lang(language) | p:lang(it) | Выбирает каждый элемент <p> с атрибутом lang, равным "it" (Итальянский) |
:last-child | p:last-child | Выбирает каждый элемент <p>, являющийся последним дочерним элементом родительского элемента |
:last-of-type | p:last-of-type | Выбирает каждый элемент <p>, являющийся последним <p> элементом его родительского элемента |
:link | a:link | Выбор всех непосещаемых ссылок |
:not(selector) | :not(p) | Выбор каждого элемента, не являющегося элементом <p> |
:nth-child(n) | p:nth-child(2) | Выбирает каждый элемент <p>, являющийся вторым дочерним элементом родительского элемента |
:nth-last-child(n) | p:nth-last-child(2) | Выбирает каждый элемент <p>, являющийся вторым дочерним элементом родительского объекта, считая от последнего дочернего элемента |
:nth-last-of-type(n) | p:nth-last-of-type(2) | Выбирает каждый элемент <p>, являющийся вторым элементом <p> родительского элемента, считая от последнего дочернего элемента |
:nth-of-type(n) | p:nth-of-type(2) | Выбор каждого элемента <p>, являющегося вторым элементом <p> родительского элемента |
:only-of-type | p:only-of-type | Выбор каждого элемента <p>, являющегося единственным элементом <p> родительского элемента |
:only-child | p:only-child | Выбирает каждый элемент <p>, являющийся единственным дочерним элементом родительского элемента |
:optional | input:optional | Выбор входных элементов без атрибута "обязательный" |
:out-of-range | input:out-of-range | Выбор входных элементов со значением за пределами заданного диапазона |
:read-only | input:read-only | Выбор входных элементов с указанным атрибутом "ReadOnly" |
:read-write | input:read-write | Выбор входных элементов с атрибутом "ReadOnly" не указан |
:required | input:required | Выбор входных элементов с указанным атрибутом "required" |
:root | :root | Выбор корневого элемента документа |
::selection | ::selection | Выбор части элемента, выбранной пользователем |
:target | #news:target | Выбор текущего активного элемента #news (щелчок по URL-адресу, содержащему это имя привязки) |
:valid | input:valid | Выбор всех входных элементов с допустимым значением |
:visited | a:visited | Выбор всех посещенных ссылок |