CSS :: Селекторы
- Назначение селекторов
- Универсальный селектор
- Селектор по типу
- Селектор по классу
- Селектор по идентификатору
- Селектор по атрибуту
- Селектор потомков
- Селектор дочерних элементов
- Селектор соседних элементов
- Селектор родственных элементов
- Селекторы псевдоклассов
- Селекторы псевдоэлементов
- Комбинирование селекторов CSS
Назначение селекторов
Как было сказано немного выше, селекторы предназначены для нахождения (выборки) элементов, к которым браузеру следует применять данный стиль. Если одно и тоже правило используется для нескольких селекторов, то они отделяются друг от друга запятой. Селекторы играют важную роль и в JavaScript, где они используются для поиска нужных html-элементов. При этом существует достаточное количество типов селекторов, которые в полной мере и довольно просто позволяют отыскать нужные элементы. Перечислим их.
Универсальный селектор
Универсальный селектор выбирает все элементы, а сам
селектор имеет вид звездочки, например, *{блок объявлений}
(см. пример №1).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Универсальный селектор</title> <style> /* Универсальный селектор выбирает все элементы */ p *{ color: green; font-weight: bold; } </style> </head> <body> <pre> Любой вложенный в абзац элемент будет иметь зеленый цвет и полужирное начертание, т.к. был использован универсальный селектор. </pre> <p> <span>Зеленый цвет и полужирное начертание.</span><br> <em>Зеленый цвет и полужирное начертание.</em><br> <b>Зеленый цвет и полужирное начертание.</b> </p> </body> </html>
Пример №1. Использование универсального селектора
Селектор по типу
Селектор по типу выбирает все элементы указанного типа, а если их несколько,
то типы элементов перечисляются через запятую. Например, span {блок объявлений}
или сразу для нескольких типов
элементов span, div, p {блок объявлений}
(см. пример №2).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор по типу</title> <style> /* Селектор по типу выбирает все */ /* указанные через запятую типы элементов */ /* Задаем шрифт указанных типов элементов */ div, p, pre{ color: blue; font-weight: bold; } /* А для этого дополнительно еще и фон */ pre{ background-color: violet; } </style> </head> <body> <p> color: blue;<br> font-weight: bold; </p> <div> color: blue;<br> font-weight: bold; </div> <pre> color: blue; font-weight: bold; background-color: violet; </pre> </body> </html>
Пример №2. Использование селектора по типу
Селектор по классу
Селектор по классу выбирает все элементы, у которых в качестве значения
атрибута class указано имя селектора. Сам селектор по классу начинается
с точки, после которой следует имя селектора (класса), например, .my_class {блок объявлений}
(см. пример №3).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор по классу</title> <style> /* Селектор по классу выбирает элементы */ /* с соответствующим значением атрибута class, */ /* как, например, <p class="my_class">абзац</p> */ .my_class{ color: blue; font-weight: bold; } </style> </head> <body> <p class="my_class"> color: blue;<br> font-weight: bold; </p> <div> Для этого элемента наш класс my_class не применяется. </div> <pre class="my_class"> color: blue; font-weight: bold; </pre> </body> </html>
Пример №3. Использование селектора классов
Селектор по идентификатору
Селектор по идентификатору выбирает элемент с соответствующим
значением атрибута id. Сам селектор начинается со знака решетки
#, после которого следует идентификатор (т.е. значение атрибута
id), например, #my_id {блок объявлений}
(см. пример №4).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор по идентификатору</title> <style> /* Селектор по идентификатору выбирает элементы */ /* с соответствующим значением атрибута id, */ /* как, например, <p class="my_id">абзац</p> */ p#my_id{ color: blue; font-weight: bold; } </style> </head> <body> <p id="my_id"> color: blue;<br> font-weight: bold; </p> <p> Для этого абзаца наш селектор не применяется. </p> </body> </html>
Пример №4. Использование селектора по идентификатору
Селектор по атрибуту
Селектор по атрибуту выбирает элементы по значению атрибутов, а сам селектор берется в квадратные скобки. Если селектор применяется к конкретному типу элементов, например, абзацам, то он пишется сразу после имени элемента без пробела. Данный тип селекторов обладает мощным инструментом поиска по шаблону, например:
-
[атрибут] – выбираются все элементы, у которых присутствует такой атрибут
вне зависимости от его значения, например,
[title] {блок объявлений}
; -
[атрибут="значение"] – выбираются все элементы, у которых данный атрибут имеет указанное в селекторе
значение (здесь и далее учитывается также и регистр символов!), например,
[title="Оранжевый цвет текста"] {блок объявлений}
; -
[атрибут^="значение"] – выбираются все элементы, у которых значение данного
атрибута начинается на подстроку (фрагмент строки), указанную в селекторе, например,
[title^="Красный цв"] {блок объявлений}
; -
[атрибут$="значение"] – выбираются все элементы, у которых значение данного
атрибута заканчинается на подстроку, указанную в селекторе, например,
[title$="кста!"] {блок объявлений}
; -
[атрибут~="значение"] – выбираются все элементы, у которых значение данного
атрибута содержит подстроку, отделенную пробелами от остальной части, или отдельное слово и указанную в селекторе, например,
[title~="синий"] {блок объявлений}
; -
[атрибут*="значение"] – выбираются все элементы, у которых значение данного
атрибута содержит подстроку, указанную в селекторе, например,
[title*="олетов"] {блок объявлений}
.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор по атрибуту</title> <style> /* Селектор по атрибуту выбирает элементы */ /* в соответствии с заданным шаблоном */ /* Этот стиль будет применен ко всем элементам, */ /* у которых задан любой атрибут title */ [title]{ font-weight: bold; } /* Стиль будет применен ко всем элементам, */ /* у которых атрибут title="Оранжевый цвет текста" */ [title="Оранжевый цвет текста"]{ color: orange; } /* А этот стиль будет применен ко всем элементам, у которых */ /* атрибут title начинается на подстроку "Красный цв" */ [title^="Красный цв"]{ color: red; } /* Этот стиль будет применен ко всем элементам, у которых */ /* атрибут title заканчинается на подстроку "кста!" */ [title$="кста!"]{ color: green; } /* Стиль будет применен ко всем элементам, у которых */ /* атрибут title содержит подстроку "синий", */ /* отделенную пробелами от остального содержимого */ [title~="синий"]{ color: blue; } /* А этот стиль будет применен ко всем элементам, у */ /* которых атрибут title содержит подстроку "олетов" */ [title*="олетов"]{ color: violet; } </style> </head> <body> <p> Для этого абзаца наши селекторы не применяется. </p> <p title="Любой title"> [title]{font-weight: bold;} </p> <p title="Оранжевый цвет текста"> [title="Оранжевый цвет текста"]{color: orange;} </p> <p title="Красный цвет текста"> [title^="Красный цв"]{color: red;} </p> <p title="Зеленый цвет текста!"> [title$="кста!"]{color: green;} </p> <p title="Очень синий цвет текста"> [title~="синий"]{color: blue;} </p> <p title="Фиолетовый цвет текста"> [title*="олетов"]{color: violet;} </p> </body> </html>
Пример №5. Использование селектора по атрибуту
Селектор потомков
Селектор потомков выбирает все элементы требуемого типа, которые находятся
внутри указанных в селекторе элементов-родителей (в селекторе вложенный элемент пишется через пробел после элемента-родителя). Например, если задано
правило div p span {блок объявлений}
, то стиль будет применен ко всем элементам
«span», которые находятся внутри абзацев, в свою очередь находящихся внутри элемента
«div» (см. пример №6).
Не нужно путать селектор потомков, в котором вложенные элементы отделяются от своих родителей пробелами, и список селекторов, к которым нужно применить один и тот же стиль, и которые отделяются друг от друга запятой.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор потомков</title> <style> /* Селектор потомков выбирает элементы, */ /* вложенные в элементы-родители */ div p span{ color: red; font-weight: bold; } </style> </head> <body> <!-- Здесь «span» вложен в абзац, а тот в элемент «div» --> <div> <p> <span>Мой текст имеет красный цвет и полужирное начертание</span>. </p> </div> <span> Ко мне это правило не относится, ведь я же вложен только в тело документа. </span> </body> </html>
Пример №6. Использование селектора потомков
Селектор дочерних элементов
Селектор дочерних элементов выбирает элементы
требуемого типа, которые являются дочерними по отношению к указанному в селекторе элементу, например,
p>span {блок объявлений}
(см. пример №7).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор дочерних элементов</title> <style> p>span{ color: orange; font-weight: bold; } </style> </head> <body> <p> <!-- Здесь «span» является дочерним, т.к. находится --> <!-- непосредственно внутри элемента «p». --> <span>Мой текст имеет оранжевый цвет и полужирное начертание</span>. <br> <em> <span>Ко мне это правило не относится, т.к. мой родитель элемент «em».</span><br> </em> <!-- Здесь «span» тоже является дочерним. --> <span>Зато я – тоже дочерний для «p».</span> </p> </body> </html>
Пример №7. Использование селектора дочерних элементов
Селектор соседних элементов
Селектор соседних элементов выбирает элементы
требуемого типа, которые идут после указанного в селекторе элемента, например, p+span {блок объявлений}
, где будут
выбраны все элементы «span», которые идут после элементов
«p» (см. пример №8).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор соседних элементов</title> <style> br+em{ color: orange; } </style> </head> <body> <span>Текст...</span> <br> <!-- Элемент «em» расположен после элемента «br» --> <em>Курсив оранжевого цвета.</em> </body> </html>
Пример №8. Использование селектора соседних элементов
Селектор родственных элементов
Селектор родственных элементов выбирает элементы
требуемого типа, которые идут после указанного в селекторе элемента и вдобавок имеют с ним общего родителя. Например, если
span~em {блок объявлений}
, то будут выбраны все элементы
«em», которые идут после элементов
«span» и имеют с ним общего родителя (см. пример №8).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор родственных элементов</title> <style> span~em{ color: orange; } </style> </head> <body> <p> <span>Я «span», который идет перед «em».</span> <em>Я оранжевого цвета, т.к. я расположен после «span» и у нас общий родительский элемент «p».</em> </p> </body> </html>
Пример №9. Использование селектора родственных элементов
Селекторы псевдоклассов
Селектор псевдоклассов напоминает селектор классов, но в отличие от классов, псевдоклассы в разметке html-документа не указываются и отделяются от указанного в селекторе элемента двоеточием :. При этом выбираются элементы необходимого типа, которые соответствуют требованиям указанного в селекторе псевдокласса. Перечислим их.
-
:link – выбираются все непосещенные ссылки, например,
a:link {блок объявлений}
(см. пример №10). -
:visited – выбираются все посещенные ссылки, например,
a:visited {блок объявлений}
. -
:active – выбирается активный в данный момент элемент
требуемого типа (таковым он становится в момент нажатия на него), например,
span:active, a:active {блок объявлений}
.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдоклассы :active, :link, :visited</title> <style> p{ width: 400px; cursor: pointer; } p:active{ color: orange; } a:link{ color: violet; } a:visited{ color: red; } </style> </head> <body id="ancor_1"> <p id="ancor_2"> Надо мною нажата кнопка мыши, поэтому текст оранжевый. Отпусти, и я опять стану прежним. </p> <a href="#ancor_1">Кликни меня и я стану красной!!!</a><br><br> <a href="#ancor_2">Если я красная, то меня уже посещали.</a> </body> </html>
Пример №10. Псевдоклассы :active, :link, :visited
-
:hover – выбирается элемент требуемого типа, на
который наведен курсор мыши, например,
span:hover {блок объявлений}
(см. пример №11). -
:focus – выбирается элемент требуемого типа,
который в данный момент находится в фокусе, например,
span:focus {блок объявлений}
. -
:target – выбираются все элементы требуемого
типа, которые используются в качестве якорей. Стиль к ним применяется после перехода по соответствующей ссылке, например,
span:target {блок объявлений}
.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдоклассы :hover, :focus, :target</title> <style> span:target{ color: orange; } a:hover{ color: green; } span:focus{ color: red; } </style> </head> <body> <span id="span_1">Мой текст становится оранжевым, когда ко мне был совершен переход по первой ссылке.</span><br><br> <span id="span_2">Мой текст становится оранжевым, когда ко мне был совершен переход по второй ссылке.</span><br><br> <a href="#span_1">Я первая ссылка. Я становлюсь зеленой при наведении на меня курсора мыши.</a><br><br> <a href="#span_2">Я вторая ссылка и тоже становлюсь зеленой при наведении на меня курсора мыши.</a><br><br> <br><span contenteditable>Когда я в фокусе, мой текст имеет красный цвет.</span> </body> </html>
Пример №11. Псевдоклассы :hover, :focus, :target
-
:focus-within – выбирается элемент требуемого
типа, когда он сам или его потомки получают фокус, например,
form:focus-within {блок объявлений}
. Псевдокласс может быть полезен для подсветки формы или ее частей, когда пользователь вводит данные в поля формы (см. пример №12). -
:enabled – выбираются все элементы формы
требуемого типа, у которых атрибут disabled отсутствует (элемент доступен), например,
button:enabled {блок объявлений}
. -
:disabled – выбираются все элементы формы
требуемого типа, у которых атрибут disabled присутствует (элемент заблокирован), например,
button:disabled {блок объявлений}
. -
:checked – выбираются все элементы требуемого
типа, которые выбраны пользователем или выбраны по умолчанию при помощи атрибута checked, например,
input:checked {блок объявлений}
.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдоклассы :focus-within, :enabled, :disabled, :checked</title> <style> /* Оформим немного отступы и границу формы */ form{ margin: 1em; padding: 0.5em; border: 1px solid #DDD; border-radius: 0.3em; } /* Подсветим всю форму во время работы с ней */ form:focus-within{ border: 1px solid black; } /* Выбранное окошко выделим оранжевой рамкой */ input:checked{ outline: 3px; outline-color: orange; outline-style: solid; } button:enabled{ color: green; } button:disabled{ color: red; } </style> </head> <body> <form action="http://localhost/test/php/script_1.php" method="POST"> <label for="first">1 вариант</label> <input type="checkbox" checked name="first" value="1" id="first"> <label for="second">2 вариант</label> <input type="checkbox" name="second" value="2" id="second"> <label for="third">3 вариант</label> <input type="checkbox" name="third" value="3" id="third"><br><br> <!-- Цвет надписи будет зеленым, т.к. атрибут disabled отсутствует --> <button type="reset">Сброс</button> <!-- Цвет надписи будет красным, т.к. присутствует атрибут disabled --> <button type="submit" disabled>Отправить</button> </form> </body> </html>
Пример №12. Псевдоклассы :focus-within, :enabled, :disabled, :checked
-
:required – выбираются все обязательные для заполнения
поля формы <input> (у них присутствует атрибут
required), например,
input:required {блок объявлений}
(см. пример №13). -
:optional – выбираются все необязательные для заполнения
поля формы <input> (у них отсутствует атрибут
required), например,
input:optional {блок объявлений}
. -
:default – выбираются все элементы формы требуемого типа,
используемые по умолчанию в группе похожих элементов, например,
button:default {блок объявлений}
. Отметим, что данный псевдокласс имеет смысл использовать для следующих элементов с множественным выбором: <button>, <input type="checkbox">, <input type="radio"> и <option> .
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдоклассы :required, :optional, :default</title> <style> /* Обязательное поле выделим красной рамкой */ input:required{ outline: 3px; outline-color: red; outline-style: solid; } /* Необязательное поле выделим оранжевой рамкой */ input:optional{ outline: 3px; outline-color: orange; outline-style: solid; } button:default{ color: green; border: 1px solid blue; } </style> </head> <body> <form action="http://localhost/test/php/script_1.php" method="POST"> <label for="first_name">Имя: </label> <input type="text" name="first_name" id="first_name" required><br><br> <label for="second_name">Фамилия: </label> <input type="text" name="second_name" id="second_name"><br><br> <button type="reset">Сброс</button> <!-- Цвет надписи будет зеленым, а граница синей, т.к. --> <!-- из двух кнопок данная используется по умолчанию --> <button type="submit" disabled>Отправить</button> </form> </body> </html>
Пример №13. Псевдоклассы :required, :optional, :default
-
:in-range – выбираются все элементы требуемого типа, у
которых введённое пользователем значение находится в заранее заданном диапазоне (устанавливается при помощи атрибутов
min и max), например,
input:in-range {блок объявлений}
(см. пример №14). -
:out-of-range – выбираются все элементы требуемого
типа, у которых введённое пользователем значение находится вне допустимого диапазона (устанавливается при помощи атрибутов
min и max),
например,
input:out-of-range {блок объявлений}
.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдоклассы :in-range, :out-of-range</title> <style> /* При попадании в диапазон выделим поле зеленой рамкой */ input:in-range{ outline: 3px; outline-color: green; outline-style: solid; } /* При выходе за диапазон выделим поле красной рамкой */ input:out-of-range{ outline: 3px; outline-color: red; outline-style: solid; } </style> </head> <body> <form action="http://localhost/test/php/script_1.php" method="POST"> <label for="number_field">Введите число от 1 до 10: </label> <input type="number" min="1" max="10" id="number_field" value="1"><br><br> <button type="reset">Сброс</button> <button type="submit" disabled>Отправить</button> </form> </body> </html>
Пример №14. Псевдоклассы :in-range, :out-of-range
-
:valid – выбираются все поля формы, у которых
введённое пользователем значение соответствует указанному типу, например,
input:valid {блок объявлений}
(см. пример №15). -
:invalid – выбираются все поля формы, у которых
введённое пользователем значение не соответствует указанному типу, например,
input:invalid {блок объявлений}
. -
:indeterminate – выбираются группы элементов
формы требуемого типа, находящиеся в неопределенном состоянии, например,
input:indeterminate {блок объявлений}
. Отметим, что данный псевдокласс имеет смысл использовать для следующих элементов: <input type="checkbox"> (при чем свойство indeterminate должно быть установлено в true через JavaScript), <input type="radio"> и <progress>.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдоклассы :valid, :invalid, :indeterminate</title> <style> /* При вводе числового значения выделим поле зеленой рамкой */ input[type="number"]:valid{ outline: 2px; outline-color: green; outline-style: solid; } /* При вводе запрещенного типа значения выделим поле красной рамкой */ input[type="number"]:invalid{ outline: 2px; outline-color: red; outline-style: solid; } /* Выделим метки неопределенных переключателей */ input:indeterminate + label{ color: green; } </style> </head> <body> <form action="http://localhost/test/php/script_1.php" method="POST"> <!-- Если вводить не числа, поле подсветится красным цветом --> <label for="number_field">Введите число от 1 до 10: </label> <input type="number" id="number_field" value="1"><br><br> <!-- Для радиокнопок JavaScript не нужен --> Укажите его четность: <input type="radio" name="even_odd" id="even" value="even"> <label for="even"> четное</label> <input type="radio" name="even_odd" id="odd" value="odd"> <label for="odd"> нечетное</label><br><br> <!-- Для чекбокосв нужен JavaScript --> Укажите его кратность: <input type="checkbox" name="two" id="two" value="1"> <label for="two"> кратно 2</label> <input type="checkbox" name="three" id="three" value="0"> <label for="three"> кратно 3</label><br><br> <button type="reset">Сброс</button> <button type="submit" disabled>Отправить</button> </form> <script> //Переведем все чекбоксы в неопределенное состояние for(var i=0; i<2;i++){ document.querySelectorAll('[type="checkbox"]')[i].indeterminate = true; } </script> </body> </html>
Пример №15. Псевдоклассы :valid, :invalid, :indeterminate
-
:lang(язык) – выбираются все элементы
требуемого типа, у которых атрибут lang имеет значение
языка, указанного в селекторе, например,
p:lang(en) {блок объявлений}
(см. пример №16). -
:empty – выбираются все пустые элементы
требуемого типа, например,
span:empty {блок объявлений}
.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдоклассы :empty, :lang</title> <style> p:lang(en){ color: green; } p:lang(ru){ color: red; } span:empty{ padding-left: 5px; /* Отступ слева */ background-color: orange; } </style> </head> <body> <p lang="en"> I am english text.<span></span> </p> <p lang="ru"> Я русский текст.<span></span> </p> </body> </html>
Пример №16. Псевдоклассы :empty, :lang
-
:root – выбирает корневой элемент, которым в
html-документе является элемент «html», например,
:root {блок объявлений}
. -
:nth-child(значение) – выбираются дочерние
элементы требуемого типа, у которых порядковый номер следования внутри родительского элемента соответствует значению, указанному в
селекторе. В скобках могут быть указаны значения:
-
odd – выбираются дочерние элементы требуемого типа с нечетными порядковыми номерами
относительно своего родителя. Например, если задано правило
span:nth-child(odd) {блок объявлений}
, то в документе будут выбраны все дочерние элементы «span», которые имеют нечетные порядковые номера (1, 3, 5 и т.д.) относительно своего родительского элемента (см. пример №17). -
even – выбираются дочерние элементы требуемого типа с четными порядковыми номерами
относительно своего родителя. Например, если задано правило
span:nth-child(even) {блок объявлений}
, то в документе будут выбраны все дочерние элементы «span», которые имеют четные порядковые номера (2, 4, 6 и т.д.) относительно своего родительского элемента.
HTML Результат htmlCodes<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдокласс :nth-child()</title> <style> /* Выбираем дочерние по отношению к своему родителю (в данном */ /* случае к элементу «p») элементы «span» с нечетными */ /* порядковыми номерами: 1, 3, 5 и т.д. */ span:nth-child(odd){ color: red; } /* А здесь с четными порядковыми номерами: 2, 4, 6 и т.д. */ span:nth-child(even){ color: blue; } </style> </head> <body> <p> <!-- Не забываем, что «br» тоже является элементом --> <span>1 дочерний элемент.</span> <span>2 дочерний элемент.</span><br> <span>4 дочерний элемент.</span> <span>5 дочерний элемент.</span><br> <span>7 дочерний элемент. </span> <span>8 дочерний элемент.</span><br> <span>10 дочерний элемент.</span> </p> </body> </html>
Пример №17. Псевдокласс :nth-child()
-
n – выбираются дочерние элементы требуемого типа с указанным порядковым
номером n относительно своего родителя, при чем нумерация должна начинаться с единицы. Например, если
задано правило
span:nth-child(3) {блок объявлений}
, то в документе будут выбраны все дочерние элементы «span», которые имеют порядковый номер 3 относительно своего родительского элемента (см. пример №18). -
an+b – выбираются дочерние элементы требуемого типа, порядковый номер которых
относительно своего родителя вычисляется по формуле an+b, где a
и b – целые числа, задаваемые в качестве значений,
а n – счетчик, который автоматически принимает значения 0,
1, 2 и т.д. Например, если задано правило
span:nth-child(3n+4) {блок объявлений}
, то в документе будут выбраны все дочерние элементы «span», которые имеют порядковые номера 4, 7, 10 и т.д. относительно своего родительского элемента.
HTML Результат htmlCodes<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдокласс :nth-child(an+b)</title> <style> /* Выбираем дочерние по отношению к своему родителю (в данном */ /* случае к элементу «body») элементы «span» с порядковыми */ /* номерами 3*0+1=1, 3*1+1=4, 3*2+1=7 и т.д. */ span:nth-child(3n+1){ color: red; } /* Стиль применяется к 3-му дочернему элементу «span» */ span:nth-child(3){ color: blue; } </style> </head> <body> <!-- Не забываем, что «br» тоже является элементом --> <span>1 дочерний элемент.</span><br> <span>3 дочерний элемент.</span><br> <span>5 дочерний элемент.</span><br> <span>7 дочерний элемент.</span><br> <span>9 дочерний элемент.</span><br> <span>11 дочерний элемент.</span><br> <span>13 дочерний элемент.</span><br> </body> </html>
Пример №18. Псевдокласс :nth-child(an+b)
-
odd – выбираются дочерние элементы требуемого типа с нечетными порядковыми номерами
относительно своего родителя. Например, если задано правило
-
:nth-last-child(значение) – выбираются
дочерние элементы требуемого типа, у которых порядковый номер следования внутри родительского элемента отсчитывается от конца родительского
элемента (от закрывающего тега) и соответствует значению, указанному в селекторе. В скобках могут быть указаны те же значения, что
и в случае псевдокласса :nth-child, т.е. odd,
even, n или an+b. Например, если задано
правило
span:nth-last-child(3n+4) {блок объявлений}
, то в документе будут выбраны все дочерние элементы «span», которые имеют порядковые номера 4, 7, 10 и т.д., отсчитываемые относительно конца своего родительского элемента (см. пример №19).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдокласс :nth-last-child()</title> <!-- Выбираем дочерние по отношению к своему родителю (в данном --> <!-- случае к элементу «body») элементы «span» с порядковыми --> <!-- номерами считая с конца 3*0+1=1, 3*1+1=4, 3*2+1=7 и т.д., --> <!-- что соответствует номерам 10, 7, 4, 1 начиная с начала --> <style> span:nth-last-child(3n+1){ color: red; } /* Стиль применяется к 3-му дочернему элементу «span» */ /* с конца, т.е. к 8-му с начала */ span:nth-last-child(3){ color: blue; } </style> </head> <body> <!-- Не забываем, что «br» тоже является элементом --> <span>1 дочерний элемент.</span> <span>2 дочерний элемент.</span><br> <span>4 дочерний элемент.</span> <span>5 дочерний элемент.</span><br> <span>7 дочерний элемент. </span> <span>8 дочерний элемент.</span><br> <span>10 дочерний элемент.</span> </body> </html>
Пример №19. Псевдокласс :nth-last-child()
-
:first-child – выбираются первые дочерние элементы
требуемого типа (порядковый номер n=1) относительно своего родительского элемента, например, если задано правило
span:first-child {блок объявлений}
, то в документе будут выбраны все первые дочерние элементы «span» относительно своих родительских элементов (см. пример №20). -
:last-child – выбираются последние дочерние
элементы требуемого типа относительно своего родительского элемента, например, если задано правило
span:last-child {блок объявлений}
, то в документе будут выбраны все последние дочерние элементы «span» относительно своих родительских элементов. -
:only-child – выбираются дочерние
элементы требуемого типа, которые являются единственными дочерними элементами для своего родительского элемента, например, если задано правило
span:only-child {блок объявлений}
, то в документе будут выбраны все дочерние элементы «span», которые являются единственными дочерними элементами для своего родительского элемента.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдоклассы :first-child, :last-child, :only-child</title> <style> span:first-child{ color: orange; } span:last-child{ color: blue; } span:only-child{ color: red; } </style> </head> <body> <p> <span>Первый дочерний элемент.</span><br> <span>3 дочерний элемент.</span><br> <span>Последний дочерний элемент.</span> </p> <p> <span>Единственный дочерний элемент.</span> </p> </body> </html>
Пример №20. Псевдоклассы :first-child, :last-child, :only-child
-
:nth-of-type(значение) – выбираются дочерние
элементы требуемого типа без учета (подсчета) любых других дочерних элементов, у которых порядковый номер следования внутри родительского
элемента соответствует значению, указанному в селекторе. В скобках могут быть указаны те же значения, что и в случае псевдокласса
:nth-child, т.е. odd, even,
n или an+b. Например, если задано правило
span:nth-of-type(3n+4) {блок объявлений}
, то в документе будут выбраны все дочерние элементы «span», которые имеют порядковые номера 4, 7, 10 и т.д., но с учетом того, что другие дочерние элементы как бы отсутствуют и в расчет не берутся (см. пример №21). -
:nth-last-of-type(значение) – выбираются
дочерние элементы требуемого типа без учета (подсчета) любых других дочерних элементов, у которых порядковый номер следования внутри
родительского элемента отсчитывается от конца родительского элемента (от закрывающего тега) и соответствует значению, указанному в селекторе.
В скобках могут быть указаны те же значения, что и в случае псевдокласса :nth-child, т.е.
odd, even, n или
an+b. Например, если задано правило
span:nth-last-of-type(3n+1) {блок объявлений}
, то в документе будут выбраны все дочерние элементы «span», которые имеют порядковые номера 1, 4, 7 и т.д., отсчитываемые относительно конца своего родительского элемента, но с учетом того, что другие дочерние элементы как бы отсутствуют и в расчет не берутся.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдоклассы :nth-of-type(), :nth-last-of-type()</title> <style> /* Выбираем дочерние по отношению к своему родителю (в данном */ /* случае к элементу «p») элементы «span» с нечетными */ /* порядковыми номерами 1, 3, 5 и т.д., но при этом */ /* !!! не считаем остальные дочерние элементы !!! */ span:nth-of-type(2n+1){ color: orange; } /* Применяем к первому дочернему «em» с конца */ /* !!! не считаем остальные дочерние элементы !!! */ em:nth-last-of-type(1){ color: blue; } </style> </head> <body> <p> <!-- !!! Элементы «br» и «b» не считаем !!! --> <span>1 дочерний элемент «span».</span><br> <b>Меня не считаем, т.к. я не «span»!</b><br> <span>2 дочерний элемент «span».</span><br> <span>3 дочерний элемент «span».</span> </p> <p> <em>1 дочерний элемент «em».</em><br> <em>2 дочерний элемент «em».</em><br> <b>Я – элемент «b».</b><br> </p> </body> </html>
Пример №21. Псевдоклассы :nth-of-type(), :nth-last-of-type()
-
:first-of-type – выбираются первые дочерние
элементы требуемого типа (порядковый номер n=1) относительно своего родительского элемента, но без учета
(подсчета) любых других видов дочерних элементов. Например, если задано правило
span:first-of-type {блок объявлений}
, то в документе будут выбраны все первые дочерние элементы «span» относительно своих родительских элементов, но с учетом того, что другие дочерние элементы как бы отсутствуют и в расчет не берутся (см. пример №22). -
:last-of-type – выбираются последние дочерние
элементы требуемого типа относительно своего родительского элемента, но без учета (подсчета) любых других типов дочерних элементов. Например,
если задано правило
span:last-of-type {блок объявлений}
, то в документе будут выбраны все последние дочерние элементы «span» относительно своих родительских элементов, но с учетом того, что другие дочерние элементы как бы отсутствуют и в расчет не берутся. -
:only-of-type – выбираются дочерние элементы
требуемого типа, которые являются единственными дочерними элементами для своего родительского элемента данного типа (при этом дочерние элементы
других типов могут присутствовать). Например, если задано правило
span:only-of-type {блок объявлений}
, то в документе будут выбраны все дочерние элементы «span», которые являются единственными дочерними элементами данного типа для своего родительского элемента.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдоклассы :first-of-type, :last-of-type, :only-of-type</title> <style> /* Выбираем первые и последние дочерние элементы «span». */ /* При этом не считаем остальные дочерние элементы. */ span:first-of-type{ color: red; } span:last-of-type{ color: blue; } /* Применяем только, если «em» единственный дочерний */ /* элемент данного типа. При этом могут присутствовать */ /* дочерние элементы других видов. */ em:only-of-type{ color: orange; } </style> </head> <body> <p> <!-- !!! Элементы «br» и «b» не считаем !!! --> <span>1 дочерний элемент «span».</span><br> <b>Меня не считаем, т.к. я не «span»!</b><br> <span>2 дочерний элемент «span».</span><br> <span>3 дочерний элемент «span».</span> </p> <p> <em>Единственный дочерний элемент «em».</em><br> <b>Я – элемент «b».</b><br> </p> </body> </html>
Пример №22. Псевдоклассы :first-of-type, :last-of-type, :only-of-type
-
:not(селектор) – выбираются все элементы требуемого типа, которые
не подходят под шаблон указанного в скобках селектора. При этом нельзя использовать в качестве значения в скобках сам псевдокласс и
псевдоэлементы; например, если задано правило
span:not([contenteditable]) {блок объявлений}
, то в документе будут выбраны все элементы «span», у которых отсутствует атрибут contenteditable (см. пример №23).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдокласс :not()</title> <style> /* Выбираем все элементы «span», у которых */ /* не задан атрибут contenteditable. */ span:not([contenteditable]){ color: red; } </style> </head> <body> <span>Нередактируемый элемент «span».</span><br> <span contenteditable>Редактируемый элемент «span».</span><br> <span>Опять нередактируемый элемент «span».</span> </body> </html>
Пример №23. Псевдокласс :not()
Селекторы псевдоэлементов
Селектор псевдоэлементов выбирает элементы требуемого типа, явно не указанные в дереве элементов html-документа и соответствующие требованиям указанного в селекторе псевдоэлемента, который отделяется от элемента двумя двоеточиями ::. Применяются следующие псевдоэлементы.
-
::first-letter – выбирается первый символ
текста в элементах требуемого типа, у которых свойство display имеет одно из значений:
block, inline-block, list-item,
table-cell или table-caption. При этом первая буква элементов с
display: inline-block или display: table-cell не должна быть в тоже время и
первой буквой родительского элемента. Кроме того, к псевдоэлементу могут применяться только свойства, относящиеся к шрифтам, тексту, полям,
границам, отступам, цвету и фону, хотя в зависимости от браузера могут применяться и некоторые другие свойства. Например, если задано правило
p::first-letter {блок объявлений}
, то данный стиль будет применен ко всем первым буквам абзацев (см. пример №24). -
::first-line – выбираются первые строки блочных
элементов требуемого типа, которые отсчитываются от начала текста до принудительного либо автоматического перевода текста на новую строку. При
этом ширина строки может меняться в зависимости от ширины блочного элемента, но стиль первой строки будет оставаться постоянным вплоть до
перевода на новую строку. К псевдоэлементу могут применяться только свойства, относящиеся к шрифтам, тексту, цвету и фону, хотя в зависимости от
браузера могут применяться и некоторые другие свойства. Например, если задано правило
p::first-line {блок объявлений}
, то данный стиль будет применен ко всем первым строкам абзацев.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдоэлементы ::first-letter, ::first-line</title> <style> div::first-letter{ color: red; } p::first-line{ color: blue; } </style> </head> <body> <div> Первая буква блока будет красной.<br> Весь остальной текст будет обычным. </div> <p> А у меня будет синей вся первая строка.<br> А я не синяя, т.к. вторая. </p> </body> </html>
Пример №24. Псевдоэлементы ::first-letter, ::first-line
-
::before – выбираются элементы требуемого типа,
перед которыми вставляется предопределенное содержимое, указанное в качестве значения стилевого свойства
content. Например,
p::before {блок объявлений}
(см. пример №25). -
::after – выбираются элементы требуемого типа,
после которых вставляется предопределенное содержимое, указанное в качестве значения стилевого свойства
content. Например,
p::after {блок объявлений}
.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдоэлементы ::before, ::after</title> <style> /* Вставим перед элементами красные звездочки. */ div::before, p::before{ content: "***"; color: red; } /* Вставим после элементов синие звездочки. */ p::after, div::after{ content: "***"; color: blue; } </style> </head> <body> <div> У меня вначале стоят красные звездочки,<br> а в конце синие! </div> <p> Что ты говоришь?<br> У меня, представь, тоже))) </p> </body> </html>
Пример №25. Псевдоэлементы ::before, ::after
-
::placeholder – позволяет задать стилевое
оформление подсказки, созданной атрибутом placeholder. Например,
p::placeholder {блок объявлений}
. Псевдокласс может быть полезен для изменения шрифта и цвета подсказки в поле ввода (см. пример №26). -
::selection – позволяет задать стилевое оформление
выделенного пользователем текста. Например,
p::selection {блок объявлений}
. При этом в правилах стилей разрешается использовать только следующие свойства: background, background-color, color, cursor, outline и text-shadow.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдоэлементы ::placeholder, ::selection</title> <style> /* Подсказку для имени оформим зеленым цветом */ input[placeholder="Иван"]::placeholder{ color: green; } /* Это для Internet Explorer */ input[placeholder="Иван"]:-ms-input-placeholder{ color: green; } /* Это для Microsoft Edge */ input[placeholder="Иван"]::-ms-input-placeholder{ color: green; } /* Подсказку для описания оформим оранжевым цветом */ textarea[placeholder="Кратко о себе"]::placeholder{ color: orange; } /* Это для Internet Explorer */ textarea[placeholder="Кратко о себе"]:-ms-input-placeholder{ color: orange; } /* Это для Microsoft Edge */ textarea[placeholder="Кратко о себе"]::-ms-input-placeholder{ color: orange; } /* Выделенный текст элементов подсветим желтым фоном */ ::selection{ background-color: yellow; } /* Выделенный в полях текст оформим красным цветом */ input::selection, textarea::selection{ background-color: transparent; color: red; } </style> </head> <body> <form action="http://localhost/test/php/script_1.php" method="POST"> <label for="first_name">Имя: </label> <input type="text" name="first_name" placeholder="Иван"><br><br> <textarea name="message" placeholder="Кратко о себе"></textarea><br><br> <button type="reset">Сброс</button> <button type="submit" disabled>Отправить</button> </form> <p>Выделенный текст абзаца подсвечивается желтым фоном.</p> </body> </html>
Пример №26. Псевдоэлементы ::placeholder, ::selection
Комбинирование селекторов CSS
Очень важной особенностью перечисленных видов селекторов является возможность их комбинирования между собой практически в любых вариациях.
Приведем в качестве примеров несколько комбинаций селекторов разных видов:
p.my_class:hover {блок объявлений}
– стиль будет применен ко всем параграфам, у которых задан атрибут
class="my_class", при наведении на них курсора мыши;
.list_1 a:visited {блок объявлений}
– этот стиль будет применен ко всем посещенным ссылкам, которые находятся
внутри элементов с атрибутом class="list_1";
p[class*="back"] > strong span[contenteditable]:focus {блок объявлений}
– этот стиль будет применяться к
каждому элементу «span», у которого имеется атрибут
contenteditable, он находится в
данный момент в фокусе и является вложенным в элемент
«strong», который является дочерним по отношению к элементу
«p», имеющему атрибут
class, в значении которого присутствует подстрока
«back». Следует обязательно попрактиковаться в составлении селекторов. Для этого можно воспользоваться нашим
задачником.
Как видим, выбор селекторов с соответствующими шаблонами, псевдоклассами и псевдоэлементами в значительной мере может удовлетворить широкие потребности программистов. Однако это еще не все, ведь CSS непрерывно развивается, поэтому постепенно появляются не только новые псевдоклассы и псевдоэлементы, но и различные новые свойства, которые к тому же становятся все более функциональными и динамическими, что впрочем не делает CSS сложным для изучения и понимания. Более того, после завершения вводного параграфа, в котором описываются общие особенности и правила языка CSS, нам в основном останется только лишь перечислить и описать все свойства CSS и соответствующие им значения.