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

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

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

• селектор типа
• универсальный селектор
• селекторы атрибутов
• селектор идентификатора
• селектор класса
• псевдо-классы

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

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

Span.className p.className1.className2#someId:hover

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

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

Комбинаторы

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

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

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

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

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

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

Каскадные таблицы стили CSS (Cascading Style Sheets) – стандарт стилей, объявленный консорциумом W3C. Термин каскадные указывает на возможность слияния различных видов стилей и на наследование стилей внутренними тегами от внешних.

CSS – это язык, содержащий набор свойств для определения внешнего вида документа. Cпецификация CSS определяет свойства и описательный язык для установления связи с HTML-элементами.

CSS – абстракция, в которой внешний вид Web-документа определяется отдельно от его содержания.

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

Возможно, Вам понадобятся также:

По методам добавления стилей в документ различают три вида стилей.

Внутренние стили

Внутренние стили определяются атрибутом style конкретных тегов. Внутренний стиль действует только на определенные такими тегами элементы. Этот метод мало отличается от традиционного HTML.

Пример

Абзац с текстом синего цвета

РЕЗУЛЬТАТ:

Абзац с текстом синего цвета

Абзац с текстом красного цвета

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

Глобальные стили

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

Атрибут type="text/css" , ранее обязательный для тега .........

Серый цвет текста во всех абзацах Web-страницы

РЕЗУЛЬТАТ:

Серый цвет текста во всех абзацах Web-страницы

Серый цвет текста во всех абзацах Web-страницы

Внешние (связанные) стили

Внешние (связанные) стили определяются в отдельном файле с расширением css . Внешние стили позволяют всем страницам сайта выглядеть единообразно.

Для связи с файлом, в котором описаны стили, используется тег , расположенный в контейнере ... .

В этом теге должны быть заданы два атрибута: rel="stylesheet" и href , определяющиЙ адрес файла стилей.

Пример

......... ......... .........

Подключение стилей

Правило подключения глобальных и внешних стилей состоит из селектора и объявлений стиля .

Селектор, расположенный в левой части правила, определяет элемент (элементы), для которых установлено правило. Далее, в фигурных скобках перечисляются объявления стиля, разделенные точкой с запятой. Например:

P { text-indent: 30px; font-size: 14px; color: #666; }

Объявление стиля – это пара свойство CSS: значение CSS .

Например: color: red

При внутреннем подключении стиля правило CSS, которое является значением атрибута style , состоит из объявлений стиля, разделенных точкой с запятой. Например:

Селекторы CSS

Селектор	Описание	Подробнее
*	Любой элемент
E	Элемент, определенный тегом E
E#myid	Элемент E с идентификатором "myid"
E.myclass	Элемент E класса "myclass"
E	Селектор существования атрибута
E	Селектор равенства атрибута
E	Селектор атрибута со списком значений	Селекторы атрибутов
E	Селектор префикса атрибута
E	Селектор суффикса атрибута
E	Селектор подстроки атрибута
E:link	Элемент E – еще не посещенная пользователем ссылка	Динамические псевдоклассы
E:visited	Элемент E – уже посещенная пользователем ссылка	Динамические псевдоклассы
E:hover	Элемент E при наведении на него указателя мышки	Динамические псевдоклассы
E:active	Элемент E, активированный пользователем	Динамические псевдоклассы
E:focus	Элемент E в фокусе	Динамические псевдоклассы
E:target	Элемент E, который является целью ссылки	Целевой псевдокласс
E:lang	Элемент E, написанный на указанном языке	Псевдокласс языка
E:enabled	Элемент E – доступный элемент формы	Псевдоклассы состояний
E:disabled	Элемент E – недоступный элемент формы	Псевдоклассы состояний
E:checked	Элемент E – включенный флажок или переключатель	Псевдоклассы состояний
E:indeterminate	Элемент E – неопределенный флажок или переключатель	Псевдоклассы состояний
E:root	Элемент E, корень документа	Структурные псевдоклассы
E:nth-child(n)	Элемент E, n-й ребенок родительского элемента	Структурные псевдоклассы
E:nth-last-child(n)	Элемент E, n-й ребенок родительского элемента, считая с конца	Структурные псевдоклассы
E:nth-of-type(n)	n-й элемент типа E	Структурные псевдоклассы
E:nth-last-of-type(n)	n-й элемент типа E, считая с конца	Структурные псевдоклассы
E:first-child	Элемент E, первый дочерний элемент родителя	Структурные псевдоклассы
E:last-child	Элемент E, последний дочерний элемент родителя	Структурные псевдоклассы
E:first-of-type	Первый элемент типа E	Структурные псевдоклассы
E:last-of-type	Последний элемент типа E	Структурные псевдоклассы
E:only-child	Единственный у родителя дочерний элемент	Структурные псевдоклассы
E:only-of-type	Единственный у родителя элемент типа E	Структурные псевдоклассы
E:empty	Элемент E, не содержащий дочерних элементов	Структурные псевдоклассы
E:not(X)	Элемент E, который не соответствует простому селектору X	Псевдокласс отрицания
E::first-line	Первая строка элемента E	Псевдоэлементы
E::first-letter	Первая буква элемента E	Псевдоэлементы
E::before	Содержимое до элемента E	Псевдоэлементы
E::after	Содержимое после элемента E	Псевдоэлементы
E::selection	Выделение в элементе E	Псевдоэлементы
E F	Элемент F, который находится внутри элемента E
E > F	Элемент F, который находится непосредственно внутри элемента E
E + F	Элемент F, который следует сразу после элемента E
E ~ F	Элемент F, который следует после элемента E

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

Универсальный селектор соответствует любому элементу html-документа.

Для обозначения универсального селектора применяется символ "звёздочка" (*).

Его используют, если надо установить одинаковый стиль для всех элементов Web-страницы. Например:

* { margin: 0; padding: 0; }

В некоторых случаях символ "звёздочка" (*) может быть опущен:
*.myclass и .myclass эквиваленты,
*#myid и #myid эквивалентны

Селекторы тегов

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

H1 {color: red; text-align: center;}

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

H1, h2, h3, h4 {color: red; text-align: center;}

Селекторы идентификаторов

HTML предоставляет возможность присвоить уникальный идентификатор любому тегу. Идентификатор задается атрибутом id . Например:

...

Значение идентификатора должно начинаться с латинской буквы и может содержать буквы (,), цифры (), "дефисы" (-) и "подчеркивания" (_).

Значения всех атрибутов id в html-документе обязаны быть уникальными. Если встречаются id с одинаковыми значениями, то эти идентификаторы игнорируются, а код Web-страницы становится невалидным.

В CSS-коде селектор идентификатора обозначается знаком "решетка" (#). Так как идентификатор id применяется только к уникальным элементам, название тега перед знаком "решетка" (#) обычно опускают:

Div#a1 {color: green;}

аналогично

#a1 {color: green;}

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

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

Для стилевого оформления чаще всего используются селекторы классов. Класс для тега задается атрибутом class . Например:

...

Имя класса должно начинаться с латинской буквы и может содержать буквы (,), цифры (), "дефисы" (-) и "подчеркивания" (_).

Если атрибут id применяется для уникальной идентификации, то при помощи атрибута class тег относят к той или иной группе.

В CSS-коде селектор идентификатора обозначается знаком "точка" (.). Разные теги можно отнести к одному классу. В таком случае имя тега перед знаком "точка" (.) опускают:

I.green {color: #008000;} b.red {color: #f00;} .blue {color: #00f;}

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

...

Если некоторые из этих классов содержат одинаковые свойства стиля, но с разными значениями, то будут применены значения стиля класса, который в CSS-коде расположен ниже.

Селекторы атрибутов

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

h1 {color: #800000;} /* элемент h1, у которого есть атрибут title */
input { border: 1px solid #ссс; padding: 4px 6px; width: 300px; }
a { text-decoration: none; border-bottom: 1px solid #06c; color: #06c; }
span { display: inline-block; background-image: url("/img/icon_sprite.png"); }
a, a { background: url("pic.gif") bottom left no-repeat; display: inline-block; width: 32px; }
{ display: block; float: left; width: 280px; }

Между именем тега и квадратной скобкой ([) не должно быть пробела!

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

Простые селекторы можно связать в определенные последовательности на основе отношений элементов в дереве Web-документа. Такие конструкции называют комбинаторами.

Контекстные селекторы

Один из самых часто используемых комбираторов – контекстный селектор.

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

Пример

1. Пушкин А.С.
   • «Выстрел»
   • «Метель»
   • «Дубровский»
2. Гоголь Н.В.
   • «Ревизор»
   • «Тарас Бульба»
   • «Мертвые души»
3. Толстой Л.Н.
   • «Война и мир»
   • «Анна Каренина»
   • «Воскресение»

РЕЗУЛЬТАТ:

1. Пушкин А.С.
   • «Выстрел»
   • «Метель»
   • «Дубровский»
2. Гоголь Н.В.
   • «Ревизор»
   • «Тарас Бульба»
   • «Мертвые души»
3. Толстой Л.Н.
   • «Война и мир»
   • «Анна Каренина»
   • «Воскресение»

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

Дочерний селектор определяет элемент, который находится внутри другого непосредственно. В дочернем селекторе простые селекторы разделены знаком "больше" (>).

Пример

1. Пушкин А.С.
   • «Выстрел»
   • «Метель»
   • «Дубровский»
2. Гоголь Н.В.
   • «Ревизор»
   • «Тарас Бульба»
   • «Мертвые души»
3. Толстой Л.Н.
   • «Война и мир»
   • «Анна Каренина»
   • «Воскресение»

РЕЗУЛЬТАТ:

1. Пушкин А.С.
   • «Выстрел»
   • «Метель»
   • «Дубровский»
2. Гоголь Н.В.
   • «Ревизор»
   • «Тарас Бульба»
   • «Мертвые души»
3. Толстой Л.Н.
   • «Война и мир»
   • «Анна Каренина»
   • «Воскресение»

Соседние селекторы

Соседний селектор определяет знак "плюс" (+), разделяющий две последовательности простых селекторов. Элементы, представленные этими последовательностями, находятся внутри одного контейнера и следуют второй за первым непосредственно, не разделенные никакими другими тегами.

Пример

РЕФЛЕКСОТЕРАПИЯ

РЕЗУЛЬТАТ:

РЕФЛЕКСОТЕРАПИЯ

Смежные селекторы

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

Пример

---

РЕФЛЕКСОТЕРАПИЯ

"Все акты сознательной и бессознательной жизни по способу происхождения суть рефлексы". И.М. Сеченов

---

Рефлексотерапия – лечение заболеваний через управление рефлексами. Успешно применяется в программах комплексного лечения или как индивидуальная методика.

РЕЗУЛЬТАТ:

РЕФЛЕКСОТЕРАПИЯ

"Все акты сознательной и бессознательной жизни по способу происхождения суть рефлексы". И.М. Сеченов

Рефлексотерапия – лечение заболеваний через управление рефлексами. Успешно применяется в программах комплексного лечения или как индивидуальная методика.

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

• Селектор по элементу;
• Селектор по классу;
• Селектор по id;
• Контекcтный селектор;

Селектор по элементу

До этого момента, мы с вами работали именно с этим селектором.Т.е. в качестве селектора использовалось непосредственно имя html элемента, к которому мы хотели применить данный стиль. Т.е. написав класс например для параграфа(Р) , все параграфы на странице приобретали стиль данного класса.

P {
font-size: 12px
}

А теперь представьте ситуацию, когда необходимо сделать первый параграф в одном стиле, второй в другом, третий в третьем и.т.д. Тут нам на помощь придет селектор по классу .

Селектор по классу

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

.green {
font-family: arial, verdana, sans-serif;
font-size: 12px; color:green;
}

Как применить данный стиль?

Допустим мы хотим применить данный стиль к определенному параграфу в документе. Вот как это будет выглядеть в html:

Текст параграфа...

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

ПРИМЕР:

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

Этот параграф зеленый, т.к к нему применили класс

А этот параграф большего шрифта и красный

Этот параграф снова обычный, по классу селектора элемента

p {
font-family:arial,verdana,sans-serif;
font-size:18px;
}
.green {color:green;}
.big_red{
font-size:28px;
color:red;
}

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

Классы из примера выше, можно применить не только к параграфу, но и, например, к заголовкам, или, например, к ячейке таблицы, или ко всей таблице, короче они могут применяться везде, где они могут на что-то повлиять (в данном случае везде, где есть параметр цвет, и текст).

Сделать так, чтобы класс действовал только на определенный элемент(например параграф) можно указав название элемента перед точкой:

P.green {color:green;}

Теперь класс green не будет действовать ни на что другое, кроме элемента P.

Селектор по id

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

html- часть:

<Н1 id="firstheader"> Первый заголовок на странице

css - часть:

H1#firstheader { color: red; font-weight: bold; text-align: center }

Как видите в html-части вместо атрибута class здесь употребляется атрибут id , а в css - вместо точки употребляется знак #.

В принципе, то же самое можно сделать и с использованием селектора по классу J

Контекстный селектор

Это очень полезная вещь. Допустим, у нас есть страничка с таблицами и параграфами текста, причем и в таблице, и в параграфах встречаются выделенные жирным шрифтом(strong) слова. Необходимо сделать так, чтобы слова в параграфе, которые выделены жирным, стали зеленого цвета. Так вот:

p strong {color:green }

Т.е. в начале P затем пробел, затем STRONG, а уже потом стиль. Читается эта строчка примерно так: Если внутри элемента P имеется элемент STRONG то элементу strong присвоить стиль зеленого цвета.

Вложенность может быть любого уровня. Вот еще пример: «Если вдруг внутри ячейки таблицы (td ) , встретится параграф (P) , внутри которого будет слово выделенное жирным (STRONG ), то пусть это слово станет красным! «

td p strong {color:red;}

Данный материал посвящен основам оформления стилей на интернет-ресурсе при помощи селекторов.

Селекторы в CSS используются для определения конкретного
элемента в html-странице, для которого надо применить
или изменить стиль CSS.

Виды селекторов в CSS

Селектор по элементам

Для придания необходимого CSS-стиля в данном случае в качестве селектора записывается название html элемента. Например, достаточно прописать нужный стиль для заголовка H1, после чего данные заголовки примут требуемый нам вид. Вот таким будет код:

H1 {
font-size: 11pt;
}

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

Селектор по классам

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

.red {
font-family: tahoma, sans-serif;
color: red;
font-size: 11pt;
}

Пример использования селектора по классу. Применим данный стиль к заголовку H1 в html странице:

Заголовок страницы

Из примера выше видно, что применяется атрибут "class" с заданным названием CSS стиля "red ".
Другой пример. В html части пишем:

Данный заголовок синего цвета, так как к нему применен соответствующий класс

id ".

В html документе это будет выглядеть так:

Зададим стиль для данного параграфа

В документе CSS:

p#newstyle { color: blue; font-size: 12px;}

В результате, для данного параграфа будет применен шрифт синего цвета и размером 12px.

Контекстный селектор

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

H1 bold { color:red ; }

Как видим, в первую очередь пишется заголовок H1, ставится пробел, тег bold а затем в скобочках заданный нами стиль. Выразить словами это можно так: "При наличии внутри заголовка H1 тега bold текст должен быть красного цвета".

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

Следующая страница -

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

Селектор CSS по тегу и классу

Самые простые селекторы – по тегу и по классу. Селектор по тегу самый общий и выбирает все элементы с определенным тегом. Например, можно написать в свойствах CSS-код следующего вида: «p {color: blue}», где «p» – тег абзаца, а свойство «color: blue» обозначает цвет текста. В результате текст во всех абзацах окрасится в синий цвет. Селекторы по тегу можно перечислить через запятую, тогда не нужно будет писать свойство дважды.

Если некоторым абзацам присвоить какой-то класс, например «blue», тогда срабатывание селектора CSS можно настроить еще более точно. Но его запись в свойствах будет отличаться – перед названием класса появится точка. То есть, чтобы выбрать все абзацы, которым присвоен класс «blue» и окрасить их в синий цвет, нужно в свойствах CSS написать такой код: «.blue: {color: blue}». Этот селектор более специфичный, чем CSS-селектор по тегу, и сильнее его, но относится к самым простым. Существуют и более сложные правила, позволяющие выбирать небольшие группы элементов.

Особенности селекторов по идентификатору

Селекторы по id или по идентификатору более специфичны, чем по классу и по атрибуту. То есть при использовании в каскаде они будут «перевешивать» остальные подобные селекторы. Идентификаторы также помогают точно выбрать определенный элемент в коде, но их использование при оформлении страниц считается плохой практикой среди верстальщиков. Только в очень редких случаях, например при создании слайдера на CSS, такая практика допустима. Дело в том, что в пределах одной страницы может быть только один элемент с определенным id. Следовательно, из-за уникальности селектора CSS по id он может использоваться только для одного-единственного элемента. В этом случае намного логичнее использовать классы, а не идентификаторы.

Различные мнения о селекторе по id

Но существует и противоположное мнение, что идентификатор помогает определить тот фрагмент кода на странице, который должен быть в единственном экземпляре. При этом, хотя селекторы по классам могут заменить его, они должны использоваться для больших групп элементов, а в тех местах, где требуется точность, лучше использовать id. Каждый верстальщик вправе выработать свое личное мнение по этому вопросу и писать код в своей собственной стилистике. При написании селектора по id перед ним используется символ «#». То есть строка кода будет выглядеть так: «#blue: {color: blue}». При такой записи будет окрашен в синий цвет элемент с идентификатором «#blue».

Использование каскада

При использовании в HTML селекторов CSS по id можно также использовать свойство каскадности. Например, если внутри тега с идентификатором нужно выбрать какой-то дочерний тег и изменить его свойства, сначала нужно записать имя идентификатора с решеткой, затем дочерний тег и его свойства. Такие селекторы называются вложенными. То есть строка кода будет выглядеть примерно так: «#id p {color: blue}». Тогда внутри родительского элемента с этим идентификатором у дочернего абзаца цвет текста изменится на синий.

Использование селекторов дочерних элементов

Еще один вариант использования каскада для изменения свойств дочерних элементов используется, если нужно выбрать только определенную часть кода. Его также называют селектором потомков. Например, чтобы выбрать абзац внутри какой-то строки таблицы, используется следующая запись CSS селектора: «ul li > p: {color: blue}». Стоит обратить внимание на то, что чем длиннее запись, тем выше вероятность, что получится изменить какое-то конкретное свойство элемента, так как он становится более приоритетным для каскада. Например, элементы с каким-то другим свойством CSS-селектора по классу, который является родительским, не изменит свои свойства полностью. Перекрасится только определенная часть текста внутри списка.

Селектор сестринских элементов

Еще один интересный способ использования каскадности - соседние селекторы CSS. Записываются они как сумма селекторов: «span + a {color blue}». При этом соседом считается тот, под которым есть еще один, подходящий под нужные параметры. Таким образом, если в коде есть три элемента, то к первому из них свойство не применится, потому что у него нет соседнего, а ко всем последующим - да. Так происходит из-за значка суммы, когда складываются последующие селекторы, а не предыдущие. Такая запись помогает сократить код и не записывать несколько CSS-селекторов для разных тегов, применяя к ним одинаковые свойства. Если второму элементу списка задать дополнительно еще и класс, а запись изменить на «.class + a{color blue}», тогда отсчет пойдет от него и свойства изменятся у последующих подходящих под правило элементов, а два первых останутся прежними.

Теперь предположим, что в нашем коде есть три одинаковых тега с различными классами и нужно выбрать все элементы после какого-то определенного. В этом случае не поможет применение только лишь селекторов тегов CSS. Для этого используется селектор следующего вида: «.class ~ div». При этом выбираются элементы с тегом div, которые идут после заданного класса. Если мы хотим выбрать не только элементы с тегом div, но и все последующие, вместо тега после знака тильды нужно поставить символ звездочки - «*». Такая запись будет означать, что нужно выбрать все, что следует после заданного класса. Можно выбрать вообще все элементы на странице, если оставить в качестве селектора только звездочку.

Селекторы по CSS-атрибуту

Допустим, что в нашем коде присутствуют элементы с какими-то атрибутами, но все они отличаются друг от друга и написаны через дефис, а нам нужно выбрать все те, у которых название класса начинается с определенного слова, например «selector», и классы разделены знаком «-». Что нужно делать в этом случае? Запись селектора начинается с квадратных скобок, куда сначала записывается название атрибута, затем вертикальный слеш, знак «=» и «selector»: «data- |= selector». Далее пишем нужное свойство, которое хочется изменить. В результате выберется элемент с заданными параметрами. Меняя классы, можно менять и свойства определенных частей кода. Если же имена классов записаны не через дефис, а одним словом, тогда их тоже можно выбрать, но используя немного другую запись. В этом случае вертикальный слеш заменяется символом «^»: «data^ = selector». Такой селектор выбирает подстроку с началом названия класса.

Как выбрать элемент с определенным окончанием в названии класса

Теперь поступим иначе и выберем части кода не по началу описания класса, а по последним буквам в его названии. Для этого нам понадобится значок доллара. Ставим его на место галочки, а после знака равенства пишем окончание названия класса: «data$ = ctor». Теперь элементы с этим сочетанием букв будут выбраны и к ним применены определенные свойства. Выбирать можно любой атрибут. Разберем, как поступить, если нам нужно найти элемент с каким-то буквосочетанием в середине слова. В этом случае меняем знак доллара на звездочку, а после знака равенства пишем нужные буквы: «data* = ct».

Псевдоклассы – особые селекторы

Для ссылок обычно используются специальные селекторы стилей CSS, которые отображают различные их состояния: спокойное, в фокусе, активное, пройденное – они называются псевдоклассами. Псевдокласс для активной ссылки, на которую наведен курсор, пишется так: «а:active». Далее идут какие-то свойства, чаще всего меняется фон или добавляется тень. Если добавить это свойство для ссылки и кликнуть по ней, она изменить свой цвет на заданный. Еще один псевдокласс – hover показывает, что ссылка уже пройдена. Записывается он так: «a:hover».

Особенности состояний active и focus

Active часто путают с другим состоянием – focus. Записывается оно так: «a:focus» и обозначает активное состояние кнопки при работе с клавиатуры. То есть, если использовать клавишу TAB, активная ссылка будет выделяться особым цветом. Это свойство обязательно нужно использовать, так как пользоваться мышью для навигации по сайту могут не все пользователи. У некоторых может быть слабое зрение или другие ограничения по здоровью, потому перемещаются они по странице при помощи клавиш или специальных приспособлений. Игнорирование состояния кнопки в фокусе является большим минусом для такого параметра в дизайне сайта, как доступность, и оказывает значительное влияние на его посещаемость особой категорией пользователей. При обычной навигации при помощи мышки ссылка становится одновременно активной и в фокусе. Поэтому при стилизации элементов важно обращать внимание на это.

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

Псевдоэлементы позволяют задавать особые стили без его определения в самой структуре HTML. Записываются они так: имя селектора, знак «::», имя псевдоэлемента. Наиболее распространены элементы «before» и «after». У них есть свойство «content», они не могут применяться к внутренним стилям. «After» нужен для добавления какого-то контента после содержимого определенного элемента. Что именно нужно вставить, записывается в свойство «content». Аналогичным образом, псевдоэлемент «before» добавляет контент перед содержимым элемента. Использование этих особых селекторов позволяет сократить код и не писать каждый раз новую структуру для какой-то его части, если нужно добавить небольшую деталь в определенное место контейнера. Они очень часто используются при стилизации страниц и добавлении каких-то декоративных элементов. Комбинации всех этих вариантов помогают создавать необычные эффекты на странице и очень помогают работе верстальщика.