Css-селекторы: зачем нужны и как применять

Псевдоклассы, определяющие состояние элементов

К этой группе относятся псевдоклассы, которые распознают текущее состояние элемента и применяют стиль только для этого состояния.

:active

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

:link

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

Запись A {…} и A:link
{…} по своему результату равноценна, поскольку в браузере даёт один
и тот же эффект, поэтому псевдокласс :link можно
не указывать. Исключением являются якоря, на них действие :link не распространяется.

:focus

Применяется к элементу при получении им фокуса. Например, для текстового поля
формы получение фокуса означает, что курсор установлен в поле, и с помощью клавиатуры
можно вводить в него текст (пример 15.1).

Пример 15.1. Применение псевдокласса :focus

HTML5CSS 2.1IECrOpSaFx

Результат примера показан ниже (рис. 15.1). Во второй строке находится курсор, поэтому текстовое поле получило фокус.

Рис. 15.1. Изменение стиля текста при получении фокуса

В данном примере в текстовом поле содержится предварительный текст, он определяется
значением атрибута value тега <input>.
При щелчке по элементу формы происходит получение полем фокуса, и цвет текста
меняется на красный. Достаточно щёлкнуть в любом месте страницы (кроме текстового
поля, естественно), как произойдет потеря фокуса и текст вернётся к первоначальному
чёрному цвету.

Результат будет виден только для тех элементов, которые могут
получить фокус. В частности, это теги <a>, <input>, <select> и <textarea>.

:hover

Псевдокласс :hover активизируется, когда курсор
мыши находится в пределах элемента, но щелчка по нему не происходит.

:visited

Данный псевдокласс применяется к посещённым ссылкам. Обычно такая ссылка меняет
свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры
можно задать самостоятельно (пример 15.2).

Пример 15.2. Изменение цвета ссылок

HTML5CSS 2.1IECrOpSaFx

Результат примера показан на рис. 15.2.

Рис. 15.2. Вид ссылки при наведении на неё курсора мыши

В данном примере показано использование псевдоклассов совместно со ссылками.
При этом имеет значение порядок следования псевдоклассов. Вначале указывается :visited, а затем идёт :hover,
в противном случае посещённые ссылки не будут изменять свой цвет при наведении
на них курсора.

Селекторы могут содержать более одного псевдокласса, которые перечисляются подряд через двоеточие, но только в том случае, если их действия не противоречат друг другу. Так, запись A:visited:hover является корректной, а запись A:link:visited — нет. Впрочем, если подходить формально, то валидатор CSS считает правильным любое сочетание псевдоклассов.

Браузер Internet Explorer 6 и младше позволяет использовать псевдоклассы :active и :hover только
для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере работают и для других элементов.

Псевдокласс :hover не обязательно должен применяться к ссылкам, его можно добавлять и к другим элементам документа. Так, в примере 15.3 показана таблица, строки которой меняют свой цвет при наведении
на них курсора мыши. Это достигается за счёт добавления псевдокласса :hover к селектору TR.

Пример 15.3. Выделение строк таблицы

HTML5CSS 2.1IECrOpSaFx

Результат примера показан ниже (рис. 15.3).

Рис. 15.3. Выделение строк таблицы при наведении на них курсора мыши

Виды селекторов[править]

• Селектор тегов, в качестве селектора выступает имя тега, для которого необходимо изменить свойства.
• Универсальный селектор, который обозначается символом и применяется для изменения необходимых свойств всех элементов на странице.
• Классы, применяются для элементов с атрибутом и необходимым значением.
• Идентификаторы, применяются для элементов с атрибутом и необходимым значением. Основное отличие классов от идентификаторов состоит в том, что имена вторых должны быть уникальными, не повторяться, что позволяет их использовать вместе со скриптами (JavaScript).
• Псевдо-классы предназначены для изменения стиля существующих элементов страницы в зависимости от их динамического состояния, например при работе со ссылками (, , , , ). Псевдо-элементы определяют стиль элементов, чётко не определённых в структуре документа (, ), а также позволяют генерировать и стилизовать несуществующее содержимое (, и свойство ). В CSS3 псевдо-элементы начинаются с двух двоеточий :: (, , , ).
• Селекторы атрибутов. Позволяют стилизовать элемент не только по значению тега, но и по значению атрибута (a).
• Контекстные селекторы. Стилизация элементов, находящихся внутри другого элемента (a b).
• Дочерние селекторы. Стилизация элемента, расположенного сразу за другим элементом и являющегося его прямым потомком (a > b).
• Соседние селекторы. Предназначены для стилизации соседних элементов, у которых общий родитель. (a + b)
• Родственные селекторы. Похожи с соседними селекторами, но с тем различием, что стилизуются все соседние элементы, а не только первый соседний элемент. Впервые появились в CSS3. (a ~ b)

Резюме

Для получения итоговой таблицы стилей браузеры используют несколько этапов отбора, при котором учитывают приоритетные правила рассмотренные нами выше.

1. Выбираются все стили подключенные к текущей странице с учетом типа устройства, на котором происходит просмотр.
2. Происходит сортировка свойств с учетом имеющихся правил !important и источников CSS (браузерные, авторские и пользовательские таблицы).
3. Делается еще одна сортировка, но уже по весу селекторов.
4. Последняя сортировка, где вычисляются те свойства, которые, находясь в селекторах с одинаковым весом и влияя на один и тот же элемент, имеют дубли. Из них выбираются те, которые располагаются ниже в CSS-коде.
5. Происходит отсеивание всех менее приоритетных дубликатов свойств и применение CSS к HTML-странице.

Таблица всех селекторов

В таблице приведены все селекторы с примером и описанием:

Селектор	Пример	Описание примера
*	*	Все элементы.
#id	#firstname	Элемент с id=»firstname».
.class	.intro	Все элементы с class=»intro».
.class1.class2	.name1.name2	Все элементы с class=»name1 name2″.
.class1 .class2	.name1 .name2	Все элементы с class=»name2″ у которых родитель с class=»name1″.
tag	p	Все <p> элементы.
tag.class	p.intro	Все <p> элементы с class=»intro».
tag, tag	div, p	Все <div> и все <p> элементы.
tag tag	div p	Все <p> внутри всех <div>.
tag > tag	div > p	Все <p> прямой родитель которых <div>.
tag + tag	div + p	<p> который находятся сразу после <div>.
tag ~ tag	div ~ p	Все <p> которые находятся после <div>.
		Все элементы с target=»что-либо».
		Все элементы с target=»_blank».
	a	Каждый <a> атрибут href которого начинается с «https».
	a	Каждый <a> атрибут href которого заканчивается «.pdf».
	a	Каждый <a> атрибут href которого содержит подстроку «w3schools».
		Все элементы в атрибуте title которых есть слово «flower».
		Все элементы атрибут lang которых начинается с «en».
:active	a:active	Активная ссылка.
::after	p::after	Вставляет псевод-элемент в начале каждого <p> элемента.
::before	p::before	Вставляет псевод-элемент в конце каждого <p> элемента.
:checked	input:checked	Все выбранные <input type=»checkbox»> элементы.
:default	input:default	Все <input> элементы.
:disabled	input:disabled	Все <input disabled> элементы.
:empty	p:empty	Все пустые <p>, в которых нет пробелом, текста или других элементов.
:enabled	input:enabled	Все активные (не disabled) элементы <input>.
:first-child	p:first-child	Первый элемент в списке родительского элемента.
:first-of-type	p:first-of-type	Первый <p> элемент в списке родительского элемента.
::first-letter	p::first-letter	Первая буква каждого <p> элемента.
::first-line	p::first-line	Первая линия каждого <p> элемента.
:focus	input:focus	<input> в котором находится курсор.
:focus-visible	a:focus-visible	Фокус сработает, только если на кнопку перешли с клавиатуры через TAB.
:focus-within	div:focus-within	Сработает на блоке, когда его внутренний элемент находится в фокусе.
:hover	a:hover	Сслыка на которую наведена мышка.
:in-range	input:in-range	Все <input> со значением в пределах указанного диапазона.
:indeterminate	input:indeterminate	Все <input> в статусе indeterminate.
:invalid	input:invalid	Все <input> с недопустимым значением.
:lang(language)	p:lang(it)	Все <p> с lang=»it».
:last-child	p:last-child	Последний элемент в списке родительского элемента.
:last-of-type	p:last-of-type	Последний <p> в списке родительского элемента.
:link	a:link	Все непосещенные ссылки.
:not(selector)	:not(p)	Все не <p> элементы.
:not(:only-child)	div:not(:only-child)	Все <div> внутри которых больше одного элемента.
:nth-child(n)	p:nth-child(2)	Второй элемент в списке родительского элемента.
:nth-of-type(n)	p:nth-of-type(2)	Второй <p> в списке родительского элемента.
:nth-last-child(n)	p:nth-last-child(2)	Второй элемент в списке родительского элемента (счет идет с конца).
:nth-last-of-type(n)	p:nth-last-of-type(2)	Второй <p> в списке родительского элемента (счет идет с конца).
:only-child	p:only-child	Единственный <p> у родителя (других элементов быть не может).
:only-of-type	p:only-of-type	Один <p> у родителя (других элементы могут быть).
:optional	input:optional	Все <input> у которых нет артибута «required».
:required	input:required	Все <input> у которых указан атрибут «required».
:out-of-range	input:out-of-range	Все <input> со значением выходящим за указанный рэндж.
::placeholder	input::placeholder	Все <input> у которых указан атрибут «placeholder».
:read-only	input:read-only	Все <input> у которых указан атрибут «readonly».
:read-write	input:read-write	Все <input> у которых не указан атрибут «readonly».
:root	:root	Корен документа.
::selection	::selection	Выберет текущее выделение текста мышкой.
:target	#news:target	Выберет элемент с id=»news» когда к нему пришил по клику.
:valid	input:valid	Все <input> с валидным значением.
:visited	a:visited	Все посещенные ссылки.

Выбор элементов по их положению

Иногда нужно выбрать элемент, про который известно, что он расположен в наборе ранее выбранных элементов. Например, нужно выделить первый параграф, который имеет класс . Для усложнения примера допустим, что нужно выбрать все пункты в списке, который имеет класс , а затем выбрать 5-й пункт из получившегося набора.

jQuery имеет семь селекторов, которые можно использовать для ограничения области поиска на основе позиции элемента:

Селектор	Описание	Примеры
	Выбирает первый элемент в наборе отобранных элементов.
	Выбирает последний элемент в наборе отобранных элементов.
	Выбирает единственный элемент в наборе отобранных элементов. Выбор элемента осуществляется по последовательному номеру индекса ( = первый элемент, = второй и так далее).
	Выбирает элементы в наборе отобранных элементов, которые расположены перед элементом с заданным индексом. Например, если задан индекс (то есть 3-й элемент), то будут выбраны первые 2 элемента (с индексами 0 и 1).
	Выбираем элементы в наборе отобранных элементов, которые расположены после элемента с заданным индексом. Например, если задан индекс 2 (то есть 3-й элемент), то будут выбраны все элементы после третьего.
	Выбирает все элементы с четными индексами в наборе отобранных элементов. Заметьте, что индексы начинаются с 0, таким образом в действительности отбираются 1-й, 3-й и так далее элементы.
	Выбирает все элементы с нечетными индексами в наборе уже отобранных элементов. Заметьте, что индексы начинаются с 0, таким образом в действительности отбираются 2-й, 4-й и так далее элементы

Отметим, что данные селекторы не работают также как ,, и так далее. Например, выбирает только пункт списка с классом , который является первым пунктом в соответствующем списке. А находит все пункты списка на странице, которые имеют класс  , а затем выбирает первый пункт списка в наборе результата поиска.

В следующем примере выбираются все ячейки  в первых двух строках таблицы, которая имеет ID :

var selectedElements = $("table#myTable tr:lt(2) > td");

Селекторы псевдоклассов

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

Простой селектор — это селектор по одному условию, односоставной.

Они также могут быть динамическими, то есть элемент может терять и приобретать псевдокласс, пока пользователь взаимодействует с этим элементом, например наводит на кнопку.

Чтобы использовать псевдокласс, нужно добавить его в селектор, например:

В этом примере мы меняем цвет ссылки на красный, когда пользователь кликает по ней.

Псевдокласс соответствует элементу, когда пользователь наводит на него курсор мыши. Например, здесь псевдокласс используется, чтобы убрать подчёркивание ссылки:

Псевдокласс соответствует элементу, на который активно нажимают. Здесь псевдокласс используется для скругления рамок кнопки, когда на неё кликают:

Псевдокласс соответствует посещённой ссылке. Например, с его помощью мы можем поменять цвет ссылки, по которой перешёл пользователь:

Псевдокласс соответствует элементу, находящемуся в фокусе — то есть когда элемент выбран для ввода или навигации с помощью клавиатуры. Например, здесь используется для добавления зелёной рамки вокруг поля ввода:

, и 

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

: last-of-type: nth-of-type (n)`

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

«Первый параграф» и «Третий параграф» станут жирными. «Второй параграф и «Четвёртый параграф» окрасятся в зелёный. «Четвёртый параграф» и «Пятый параграф» будут подчёркнутыми.

Если мы используем здесь , и , то получим другую картину. Жирным станет только «Первый параграф». В зелёный окрасятся «Второй параграф» и «Третий параграф». Подчёркнутым будет «Четвёртый параграф». И всё это из-за того, что между есть другие элементы — .

Слева стилизуем текст с помощью селекторов *-of-type, справа — *-child

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

В этом примере мы с помощью добавляем красную рамку пустому инпуту.

Заключение

Мы разобрали самые популярные селекторы, но на самом деле их больше. Полный перечень вы найдёте в . А чтобы научиться использовать селекторы на практике, пройдите эти тренажёры из курса «Старт в программирование».

Миксы

Позволяют:

• совмещать поведение и стили нескольких сущностей без дублирования кода;

• одинаково форматировать разные HTML-элементы.

Внешняя геометрия и позиционирование

В CSS по БЭМ стили, отвечающие за внешнюю геометрию и позиционирование, задаются через родительский блок.

Пример

HTML-реализация:

<header class="header">
    <button class="button header__button">...</button>
</header>

CSS-реализация кнопки:

.button {
    font-family: Arial, sans-serif;
    text-align: center;
    border: 1px solid black;    
}
.header__button {
    margin: 30px;               
    position: relative;
}

В данном примере внешняя геометрия и позиционирование блока задана через элемент . Блок не специфицирует никакие отступы и может быть легко переиспользован в любом месте.

HTML-реализация:

<footer class="footer">
    <button class="button">...</button>
</footer>

Стилизация групп блоков

Иногда необходимо применить одинаковое форматирование сразу к нескольким различным HTML-элементам веб-страницы.
Обычно для решения подобных задач применяют групповые селекторы.

Пример

HTML-реализация:

<article class="article">...</article>

<footer class="footer">
    <div class="copyright">...</div>
</footer>

CSS-реализация:

.article, .footer div {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #000;
}

В данном примере текст внутри блоков и имеет один и тот же цвет и шрифт.

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

Поэтому в БЭМ для того, чтобы единообразно отформатировать целый набор HTML-элементов, используют .

Пример

HTML-реализация:

<article class="article text">...</article>

<footer class="footer">
    <div class="copyright text">...</div>
</footer>

CSS-реализация:

.text {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #000;
}

Выбор элементов по иерархии

Другой способ выбрать элементы в jQuery — это рассмотреть, как они соотносятся друг к другу на странице. Вероятно, вы знаете много таких селекторов по работе с  CSS:

Селектор	Описание	Пример
Ребенок	Выбирает элемент(ы), которые являются ребенком (прямым потомком) заданного предка(ов).
Потомок	Выбирает элемент(ы), которые являются потомками (детьми, внуками и так далее) заданного предка(ов). Это более общая форма селектора Ребенок.
Следующий соседний элемент	Выбирает элемент(ы), который следует непосредственно за заданным элементом, где оба элемента имеют одного и того же родителя.
Следующий сестринский элемент	Выбирает элемент(ы), который следует за другим элементом, где оба элемента являются потомками одного родителя. Это более обобщенная версия селектора следующий соседний элемент.
Первый ребенок	Выбирает элемент(ы), который является первым ребенком его родителя.
Последний ребенок	Выбирает элемент(ы), который является последним ребенком его родителя.
N-й ребенок	Выбирает элемент(ы), который является n-м ребенком его родителя (смотри примечание ниже).
Только ребенок	Выбирает элемент(ы), которые являются  ребенком родителей, у которых есть только дети.

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

В следующем примере выбирается первая ячейка всех нечетных строк в таблице, которая имеет :

var selectedElements = $("table#myTable tr:nth-child(odd) > td:first-child");

Псевдоклассы и псевдоэлементы[]

:not задаёт правила стилей для элементов, которые не содержат указанный селектор.

Синтаксис: :not { … }

Состояния элементов

1. :active

   Определяет стиль для активной ссылки (т.е. при нажатии на нее).

2. :focus

   Определяет стиль для элемента получающего фокус.(например, текстовое поле формы с активным курсором)

3. :hover

   Определяет стиль элемента при наведении на него курсора мыши.

4. :link

   Применяется к ссылкам, которые еще не посещались пользователем.

5. :visited

   Применяется к ссылкам, уже посещённым пользователем.

6. ::target

   Применяется к «целевому элементу»другими словами: к элементу, чей идентификатор указан в адресной строке.

Дерева элементов (порядковые)

1. :first-child и :last-child

   Задает стилевое оформление первого/последнего элемента своего родителя.

2. :first-of-type и :last-of-type

   Задает правила стилей для первого/последнего дочернего элемента указанного типа.

3. :only-child

   Применяется к дочернему элементу, только если он единственный у родителя.Аналогичен использованию :first-child:last-child или :nth-child(1):nth-last-child(1).

4. :only-of-type

   Применяется к дочернему элементу указанного типа, только если он единственный у родителя.Аналогичен использованию :first-of-type:last-of-type или :nth-of-type(1):nth-last-of-type(1).

5. :nth-child (чёт | нечет | <число> | <выражение>) {…} / :nth-last-child

   Используется для добавления стиля к элементам на основе нумерации в дереве элементов./В отличие от псевдокласса :nth-child отсчет ведется не от первого элемента, а от последнего.

6. :nth-of-type (чёт | нечет | <число> | <выражение>) {…} / :nth-last-of-type

   Используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов./В отличие от псевдокласса :nth-of-type отсчет ведется не от первого элемента, а от последнего.

Например: (5-6)

• пятая строка-не заголовок таблицы (tr:nth-child(5))
• каждый третий столбец таблицы (td:nth-of-type(3n))
• первые три строки таблицы (tr:nth-of-type(-n+3))
• каждые пять, начиная с третьего (:nth-child(5n-2))

Языка текста

Единственный псевдокласс ─ :lang, может быть полезен для смены кавычек цитат в зависимости от языка.

qlang(de){
quotes"\201E""\201C";/* Вид кавычек для немецкого языка */
}
qlang(en){
quotes"\201C""\201D";/* Вид кавычек для английского языка */
}
qlang(fr),qlang(ru){/* Вид кавычек для русского и французского языка */
quotes"\00AB""\00BB";
}

Другие

:root

Определяет корневой элемент документа. Для веб он всегда соответствует элементу .

:empty

соответствует пустому элементу (которые не содержат дочерних элементов, текста или пробелов).

Оставшиеся: 

:read-only, :read-write, :required, :valid, :checked

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

1. :before и :after добавляют на страницу отдельный элемент перед/после родительского. Пример:

/**Герои сбоку страницы**/
@mediaonlyscreenand(min-width1250px){
body.skin-oasis::before{content'';z-index;/*отображение*/
/*размеры*/height900px;width900px;
/*позиция*/positionfixed;top;right50%;
/*картинка*/background-image
url("https://images.wikia.com/ladybug/ru/images/7/70/Герои_сбоку_страницы.png");
/*позиция картинки*/background-position28px180px;
/*исключение повтора*/background-repeatno-repeat;
}
body.editor::before{margin-right-16px}/*фикс для классического редактора*/
}/*параметры при макс ширине*/
@mediaonlyscreenand(min-width1596px){
/*смещение при изменении ширины страницы*/
body.skin-oasis::before{margin-right88px}
/*фикс для классического редактора*/
body.editor::before{margin-right60px}
}

подробнее про медиавыражения см. CSS/Переменные и медиавыражения

2. ::first-letter и ::first-line задает стиль первого символа/первой строки форматированного текста.Могут быть изменены свойства шрифта, полей, отступов, границ, цвета и фона.(/только шрифт, цвет текста и фона)

3. ::selection применяет стиль к выделенному пользователем тексту.(допускаются свойства: color, background и background-color)

Комбинации селекторов.

Селекторы можно комбинировать друг с другом используя, так называемые комбинаторы.

В задачу, описанную выше, мы можем решить, написав два правила.

Для заголовков статей:

.articles h3 {
text-align: center;
}

1 2 3

.articles h3 { text-align center; }

Для заголовков новостей:

.sidebar h3 {
color: darkred;
}

1 2 3

.sidebar h3 { color darkred; }

Здесь мы использовали комбинатор
пробел .  Т.е. селектор
.articles h3  выберет для изменений теги
<h3> , которые находятся внутри элемента с классом
articles (вне зависимости от уровня вложенности).

Этот комбинатор называется «комбинатор потомков» и используется очень часто.

Дочерний селектор

Давайте немного изменим верстку блока со статьями.

<div class=»articles»>
<h3>Заголовок статьи 1</h3>
<h3>Заголовок статьи 2</h3>
<div class=»promo»>
<h3>Рекламная акция</h3>
</div>
<h3>Заголовок статьи 3</h3>
<h3>Заголовок статьи 4</h3>
</div>

1 2 3 4 5 6 7 8 9

<div class=»articles»> <h3>Заголовок статьи 1</h3> <h3>Заголовок статьи 2</h3> <div class=»promo»> <h3>Рекламная акция</h3> </div> <h3>Заголовок статьи 3</h3> <h3>Заголовок статьи 4</h3> </div>

У нас, среди статей, появился рекламный блок, и в нем также используется заголовок
<h3> .

Использованный нами ранее селектор
.articles h3  подействует и на заголовок рекламной акции, поскольку он не учитывает уровень вложенности.

Если мы хотим изменить только заголовки статей, не трогая рекламный заголовок, то лучше использовать «дочерний селектор» — символ
>  .

.articles > h3 {
text-align: center;
}

1 2 3

.articles > h3 { text-align center; }

Селектор
.articles>h3  выберет для изменения теги h3, которые находятся непосредственно в элементе с классом
articles , а теги рекламных заголовков затронуты не будут.

Комбинатор всех соседних элементов

Комбинатор
~  выберет все соседние элементы, т.е. элементы у которых такой же контейнер, как и у указанного элемента. Слово «соседний» в данном случае обозначает, что будут выбраны все элементы находящиеся после указанного.

<div class=»articles»>
<h3 class=»first-article»>Заголовок статьи 1</h3>
<h3>Заголовок статьи 2</h3>
<div class=»promo»>
<h3>Рекламная акция</h3>
</div>
<h3>Заголовок статьи 3</h3>
<h3>Заголовок статьи 4</h3>
</div>

1 2 3 4 5 6 7 8 9

<div class=»articles»> <h3 class=»first-article»>Заголовок статьи 1</h3> <h3>Заголовок статьи 2</h3> <div class=»promo»> <h3>Рекламная акция</h3> </div> <h3>Заголовок статьи 3</h3> <h3>Заголовок статьи 4</h3> </div>

.first-article ~ h3 {
color: blue;
}

1 2 3

.first-article~h3{ colorblue; }

В примере выше все заголовки <h3>, которые находятся после заголовка с классом
.first-article , станут синего цвета. Заголовок, находящийся внутри <div> с классом
.promo  затронут не будет, поскольку у него другой контейнер.

Комбинатор следующего соседнего элемента

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

.first-article + * {
margin-top: 3rem;
}

1 2 3

.first-article + * { margin-top 3rem; }

В примере выше, написано правило, которое обеспечивает, что любой (один) элемент, который находятся сразу после заголовка с классом
.first-article , будет иметь отступ сверху размером
3rem .

Комбинатор запятая

Комбинатор, позволяет сгруппировать селекторы, т.е. задать несколько селекторов для одного правила.

h1, h2, h3, h4, h5, h6 {
margin-bottom: 0;
}

1 2 3

h1, h2, h3, h4, h5, h6 { margin-bottom; }

В примере выше, мы обнуляем отступы снизу сразу у всех заголовков.

Простые CSS селекторы

Селекторы позволяют нацеливаться и выбирать определённые части HTML документа для стилизации.

Простые CSS селекторы напрямую выбирают один или несколько элементов:

• С помощью универсального селектора .
• На основе имени/типа элемента.
• На основе значения класса элемента.
• На основе значения идентификатора элемента.

Изучив, как работают самые просты селекторы, вы сможете понять, как использовать более сложные. Простые CSS селекторы чаще всего используются.

Универсальный CSS селектор

Универсальный CSS селектор, также известный как подстановочный знак, выбирает всё — каждый элемент в документе. В качестве универсального селектора используется символ .

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

CSS селектор типа

Селектор типа выбирает все HTML элементы указанного типа. Для его использования, укажите имя элемента. Например, если вы хотите применить стиль к каждому параграфу HTML-элемента, вы должны указать элемент :

Приведённый выше код сопоставит и выберет все элементы в документе, и стилизует их.

CSS селектор класса

Селектор класса сопоставляет и выбирает HTML элементы на основе заданного класса. В частности, он выбирает каждый отдельный элемент в документе с этим конкретным именем класса.

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

Классы можно использовать повторно, что делает их хорошим вариантом практики DRY-разработки. DRY — это принцип разработки, сокращение от ‘Don’t Repeat Yourself (Не повторяйся). Как следует из названия, цель состоит в том, чтобы по возможности избегать написания повторяющегося кода.

Для выбора элемента с помощью селектора класса, используется символ точки , за которым следует имя класса.

В приведённом выше коде элементы с классом выбираются и оформляются соответствующим образом.

CSS селектор идентификатора

Селектор идентификатора выбирает HTML элемент на основе значения его атрибута .

Имейте в виду, что идентификатор элемента должен быть уникальным в HTML документе, то есть должен быть только один HTML элемент с данным значением идентификатора. Вы не можете использовать одно и то же значение идентификатора для другого элемента, кроме этого.

Чтобы выбрать элемент с определённым идентификатором, используйте символ , за которым следует имя идентификатора:

Приведённый выше код будет соответствовать только уникальному элементу со значением идентификатора .

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

Селекторы по псевдо-классам

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

Если псевдокласс следует сразу за другим селектором (например, a:link), он будет применен только к целевому селектору. Если между селектором и псевдоклассом есть пробел (a :link), то это два селектора, разделенных комбинатором потомства.

Ниже приведен список наиболее распространенных псевдоклассов и их краткое описание:

• – стилизует непосещенные ссылки.
• – стилизует посещенные ссылки, с некоторыми ограничениями из-за конфиденциальности.
• – стилизует часть документа на основе фрагмента документа в URL, подобно тому, как это делается на Википедии со сносками.
• – стилизует корневой элемент документа, обычно элемент <html>.
• – позволяет выбирать конкретные элементы с помощью математических обозначений или ключевых слов (odd и even), часто используется для создания зебровых полос с помощью CSS.
• – выбирает первый дочерний элемент родительского элемента.
• – выбирает последний дочерний элемент родительского элемента.
• – позволяет выбирать конкретные элементы с помощью математических обозначений и ключевых слов (odd и even) среди группы.
• – стилизует элементы, на которые наведен курсор мыши.
• – выбирает элемент, который в настоящее время “активирован”, обычно посредством щелчка мыши.
• – соответствует элементу, который в данный момент имеет фокус, обычно посредством клавиатуры или щелчка мыши.
• – выбирает любые отключенные элементы (например, элементы формы, радиокнопки и т.д.).
• – выбирает переключатели и флажки в состоянии “выбран” или “отмечен”.
• – выбирает элементы формы, для которых установлен атрибут “required”.

Селектор id[править]

Возьмём следующий пример. Например, вы хотите создать на странице какие-либо уникальные элементы, к которым в будущем захотите вернуться из программ JavaScript. Возможно, эти элементы будут повторяться на других страницах, и вы хотели бы задать им единое оформление с помощью CSS. На этот случай в таблицах стилей есть возможность присваивать уникальным элементам идентификатор (id). Вот пример назначения идентификатора и правило CSS для таких элементов. Пример:

<!DOCTYPE html>
<html>
   <head>
      <title>
         Шрифт Courier
      </title>
      <meta charset="utf-8" />
      <style type="text/css">

#onlyThisOne{
font-familyCourier;
}

      </style>
   </head>
   <body>
      <p id="onlyThisOne">
         Courier
      </p>
   </body>
</html>

Отобразится как:

Courier

Аналогичным образом уникальные идентификаторы могут быть назначены любому количеству любых элементов на странице:

<!DOCTYPE html>
<html>
   <head>
      <title>
         Форма
      </title>
      <meta charset="utf-8" />
      <style type="text/css">

input#green{
colorgreen;
}
input#red{
colorred;
}

Структурные селекторы

Это очень мощные селекторы и они могут выделять элементы, основываясь на их позиции в . Они дают вам гибкости в выборе элементов на чистом CSS, что могло бы с другой стороны потребовать работы с JavaScript.

Этот тип селекторов отличается от тех которые мы видели до этого тем, что они позволяют вам передать параметр, чтобы изменить работу селектора.

Для примера  получает значение, которое будет соответствовать конкретному дочернему элементу, относительно его родительского контейнера.

И так, если бы у нас был бы список элементов, то следующий селектор выбрал бы третий по списку.

Однако, параметр не обязательно должен быть простым числом, он может быть простым выражением, что в свою очередь делает этот псевдокласс более мощным.

 — Выберет второй дочерний элемент

 — Выберет каждый четвертый дочерний элемент (4, 8, 12, …)

 — Выберет каждый второй дочерний элемент, начиная с первого (1, 3, 5, …)

 — Выберет каждый третий дочерний элемент, начиная с минус первого (2, 5, 8, …)

 — Выберет нечетные элементы (1, 3, 5, …)

 — Выберет четные элементы (2, 4, 6, …)

Выражение переменной n всегда начинается с нуля, так что, чтобы разобраться какие элементы выберутся, начните с n, как нуля, затем n как 1 и так далее, чтобы составить список элементов.

Вы можете использовать простые выражения со следующими структурными селекторами:

 и  очень схожи с : и , кроме того, что они выбирают последний элемент, а не первый.

Вы можете покреативить с селекторами, играясь с различными комбинациями. Для примера, предидущий пример Pen содержал селектор:

Он выберет псевдо элемент, который идёт после второго с конца списка внутри второго неупорядоченного списка. Если вы когда-нибудь пытались расшифровать сложный селектор, то лучше читать их справа на лево, так они могут быть разобраны логически.

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

На первый взгляд, тут много всего и вам надо быть осторожным при использовании таких типов селекторов, так как вы можете получить результаты которые вы не ожидали.

Для примера, вы можете удивиться почему And so on… текст синий внутри тега . На самом деле весь контент секции синий, как последний потомок главного дива — контейнера. Другие элементы секции имеют свои собственные цвета, переписанные другими селекторами, оставляя только один параграф разукрашенным в синий цвет.