Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения

CSS селекторы

Селектор - это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применён стиль.

Термин селектор может относиться к простому селектору (simple selector), составному селектору (compound selector), сложному селектору (complex selector) или списку селекторов.

К простым селекторам относятся:

CSS селекторПримерОписаниеCSS
.class .myClass Выбирает все элементы с классом myClass (class="myClass"). 1
#id #main Выбирает элемент с идентификатором main (id="main"). 1
* * Выбор всех элементов. 2
элемент span Выбор всех элементов <span>. 1
элемент,элемент div,span Выбор всех элементов <div> и всех элементов <span>. 1
[атрибут] [title] Выбирает все элементы с атрибутом title. 2
[атрибут="значение"] [title="cost"] Выбирает все элементы с атрибутом title, значение которого в точности совпадает со значением указанным в селекторе (title="cost"). 2
[атрибут~="значение"] [title~="один"] Выбирает все элементы с атрибутом title, в значении которого (в любом месте) встречается подстрока (в виде отдельного слова) "один" (title="один и два"). 2
[атрибут|="значение"] [lang|="ru"] Выбор всех элементов с атрибутом lang, значение которого начинается с "ru". 2
[атрибут^="значение"] a[href^="https"] Выбор каждого элемента <a> с атрибутом href, значение которого начинается с "https". 3
[атрибут$="значение"] [src$=".png"] Выбирает все элементы с атрибутом src, значение которого оканчивается на ".png" (src="some_img.png"). 3
[атрибут*="значение"] [title*="один"] Выбирает все элементы с атрибутом title, в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) "один" (title="один и два"). 3

Составной селектор — это последовательность простых селекторов, которые не разделены комбинаторами, т. е. за одним селектором сразу идёт следующий. Он выбирает элемент, который соответствует всем простым селекторам, которые он содержит. Селектор типа или универсальный селектор, входящий в составной селектор, должен быть расположен первым в этой последовательности. В составном селекторе допустим только один селектор типа или универсальный селектор.

span[title].className
p.className1.className2#someId:hover

Сложный селектор — это последовательность селекторов, которые разделены комбинаторами.

Список селекторов — это селекторы, перечисленные через запятую.

Комбинаторы

Для объединения простых CSS селекторов, используются комбинаторы, которые указывают взаимосвязь между простыми селекторами. Существует несколько различных комбинаторов в CSS2, и один дополнительный в CSS3, когда вы их используете, они меняют характер самого селектора.

КомбинаторПримерОписаниеCSS
элемент элемент div span Выбор всех элементов <span> внутри <div>. 1
элемент>элемент div>span Выбирает все дочерние элементы <span>, у которых родитель - элемент <div>. 2
элемент+элемент div+p Выбирает все элементы <p>, которые расположены сразу после элементов <div>. 2
элемент1~элемент2 p~ol Выбор всех элементов <ol>, которым предшествует элемент <p>. 3

Псевдо-классы

Псевдо-класс – это простой селектор, который используется для выбора того, что не может быть выбрано с помощью других селекторов или может быть выбрано, но достаточно трудным способом.

Псевдо-классПримерОписаниеCSS
:link a:link Выбор всех не посещенных ссылок. 1
:visited a:visited Выбор всех посещенных ссылок. 1
:active a:active Выбор активной ссылки. 1
:hover a:hover Выбор ссылки при наведении курсора мышки. 1
:focus input:focus Выбор элемента input, который находится в фокусе. 2
:first-child p:first-child Выбор каждого элемента <p>, который является первым дочерним элементом своего родителя. 2
:lang(язык) p:lang(ru) Выбор каждого элемента <p> с атрибутом lang, значение которого начинается с "ru". 2
:first-of-type p:first-of-type Выбор каждого элемента <p>, который является первым из элементов <p> своего родительского элемента. 3
:last-of-type p:last-of-type Выбор каждого элемента <p>, который является последним из элементов <p> своего родительского элемента. 3
:only-of-type p:only-of-type Выбор каждого элемента <p>, который является единственным элементом <p> своего родительского элемента. 3
:only-child p:only-child Выбор каждого элемента <p>, который является единственным дочерним элементом своего родительского элемента. 3
:nth-child(n) p:nth-child(2) Выбор каждого элемента <p>, который является вторым дочерним элементом своего родительского элемента. 3
:nth-last-child(n) p:nth-last-child(2) Выбор каждого элемента <p>, который является вторым дочерним элементом своего родительского элемента, считая от последнего дочернего элемента. 3
:nth-of-type(n) p:nth-of-type(2) Выбор каждого элемента <p>, который является вторым дочерним элементом <p> своего родительского элемента. 3
:nth-last-of-type(n) p:nth-last-of-type(2) Выбор каждого элемента <p>, который является вторым дочерним элементом <p> своего родительского элемента, считая от последнего дочернего элемента. 3
:last-child p:last-child Выбор каждого элемента <p>, который является последним элементом своего родительского элемента. 3
:root :root Выбор корневого элемента в документе. 3
:empty p:empty Выбор каждого элемента <p>, который не содержит дочерних элементов (включая текст). 3
:target :target Выбор текущего целевого элемента на странице, то есть элемента, к которому был осуществлён переход по ссылке внутри страницы. 3
:enabled input:enabled Выбор каждого включенного элемента <input>. 3
:disabled input:disabled Выбор каждого выключенного элемента <input>. 3
:checked input:checked Выбор элемента <input>, выбранного по умолчанию или пользователем. 3
:not(селектор) :not(p) Выбор всех элементов, кроме элемента <p>. 3

Псевдо-элементы

Псевдо-элемент – это виртуальный элемент, который не существует в явном виде в дереве элементов документа. Псевдо-элементы используются для выбора тех частей элемента, которые не могут быть выбраны с помощью других селекторов, а также для стилизации не всего элемента, а отдельных его частей.

Псевдо-элементПримерОписаниеCSS
::first-letter p::first-letter Выбор первой буквы каждого элемента <p>. 1
::first-line p::first-line Выбор первой строки каждого элемента <p>. 1
::before p::before Добавляет элемент с содержимым перед содержимым каждого элемента <p>. 2
::after p::after Добавляет элемент с содержимым после содержимого каждого элемента <p>. 2
    
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2016 © puzzleweb.ru

Реклама на сайте | Обратная связь