Триколор 

Каждый второй css. Как работает CSS-селектор nth-child

Существует такой селектор, точнее псевдокласс, называемый:nth-child . Вот пример его использования:

UL LI:nth-child(3n+3) { color:#CCC; }

Что делает CSS-код, приведенный выше? Он выбирает каждый третий элемент внутри маркированного списка: это 3-й, 6-й, 9-й, 12-й и т.д. Давайте посмотрим, как именно работает это выражение и что еще можно сделать с помощью:nth-child .

Всё зависит от того, что находится между скобками. Селектор:nth-child принимает два ключевых слова: even и odd . Тут всё просто: even выбирает чётные элементы, такие как 2-ой, 4-ый, 6-ой и т.д., а odd выбирает нечётные элементы, такие как 1-й, 3-й, 5-й и т.д.

Как видно из первого примера, :nth-child также принимает в качестве параметра выражения. В том числе и простейшие уравнения, иначе говоря, просто числа. Если поставить их в скобки, будет выбран только один элемент с соответствующим номером. Например, вот как выбрать только пятый элемент:

UL LI:nth-child(5) { color:#CCC; }

Однако давайте вернемся к 3n+3 из первого примера. Как он работает и почему выбирается каждый третий элемент? Весь фокус в понимании переменной n и приведенного алгебраического уравнения. Подумайте об n , как о начинающемся с нуля множестве целых чисел. Потом дополните уравнение. Так 3n это 3×n , а все уравнение вместе это (3×n)+3 . Теперь, подставляя вместо n числа больше или равные нулю, мы получим:

  • (3 × 0) + 3 = 3 = 3-й элемент
  • (3 × 1) + 3 = 6 = 6-й элемент
  • (3 × 2) + 3 = 9 = 9-й элемент и т.д.

А как насчёт:nth-child(2n+1) ?

  • (2 × 0) + 1 = 1 = 1-й элемент
  • (2 × 1) + 1 = 3 = 3-й элемент
  • (2 × 2) + 1 = 5 = 5-й элемент и т.д.

Так, стоп! Это ведь то же самое, что и odd . Тогда, возможно, не стоит использовать это выражение? Но разве в этом случае мы не подвергаем наш первый пример излишнему усложнению? Что, если вместо 3n+3 мы запишем 3n+0 или ещё проще 3n ?

  • (3 × 0) = 0 = ничего нет
  • (3 × 1) = 3 = 3-й элемент
  • (3 × 2) = 6 = 6-й элемент
  • (3 × 3) = 9 = 9-й элемент и т.д.

Итак, как вы можете видеть, результат получится такой же, а значит, нет необходимости в +3 . Мы можем использовать и отрицательные значения n , с таким же успехом, как и вычитание в уравнениях. Например, 4n-1:

  • (4 × 0) – 1 = –1 = ничего нет
  • (4 × 1) – 1 = 3 = 3-й элемент
  • (4 × 2) – 1 = 7 = 7-й элемент и т.д.

Использование -n может показаться странным - ведь если конечный результат отрицательный, то никакие элементы в выборку не попадут. Но если дополнить уравнение и снова сделать результат положительным, то выборка окажется довольно интересной: при помощи неё можно будет получить первые n элементов, например так: -n+3:

  • –0 + 3 = 3 = 3-й элемент
  • –1 + 3 = 2 = 2-й элемент
  • –2 + 3 = 1 = 1-й элемент
  • –3 + 3 = 0 = ничего нет и т.д.

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

n 2n+1 4n+1 4n+4 4n 5n-2 -n+3
0 1 1 4 – – 3
1 3 5 8 4 3 2
2 5 9 12 8 8 1
3 7 13 16 12 13 –
4 9 17 20 16 18 –
5 11 21 24 20 23 –

Поддержка браузерами

Селектор:nth-child - один из немногих CSS-селекторов, который почти полностью поддерживается в современных браузерах и абсолютно не поддерживается в IE, даже в IE8. Поэтому когда дело доходит до его использования, и конечный результат сделан по технологии прогрессивного улучшения - вы можете смело использовать его для некоторых оформительских элементов, вроде расцветки строк таблицы. Однако не стоит применять его в более серьезных случаях. Например, полагаться на него в раскладке сайта или удалять правое поле из каждого третьего блока в сетке три на три, чтобы они вошли в ряд.

Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.

Обозначения

Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#
×

Значения

odd Все нечётные номера элементов. even Все чётные номера элементов. <число> Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке. <выражение> Задаётся в виде an±b , где a и b - целые числа, а n - счётчик, который автоматически принимает значение 0, 1, 2...

Если a равно нулю, то оно не пишется и запись сокращается до b . Если b равно нулю, то оно также не указывается и выражение записывается в форме an . a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

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

Табл. 1. Результат для различных значений псевдокласса
Значение Номера элементов Описание
1 1 Первый элемент, является синонимом псевдокласса :first-child .
5 5 Пятый элемент.
2n 2, 4, 6, 8, 10,… Все чётные элементы, аналог значения even .
2n+1 1, 3, 5, 7, 9,… Все нечётные элементы, аналог значения odd .
3n 3, 6, 9, 12, 15,… Каждый третий элемент.
3n+2 2, 5, 8, 11, 14,… Каждый третий элемент, начиная со второго.
n+4 4, 5, 6, 7, 8,… Все элементы, кроме первых трёх.
-n+3 3, 2, 1 Первые три элемента.
5n-2 3, 8, 13, 18, 23,… —
even 2, 4, 6, 8, 10,… Все чётные элементы.
odd 1, 3, 5, 7, 9,… Все нечётные элементы.

Допустимо комбинировать два псевдокласса :nth-child для выбора диапазона элементов. Здесь будут выбраны все элементы со второго по пятый.

:nth-child(n+2):nth-child(-n+5) { … }

Пример

nth-child

21342135 213621372138
Нефть1634 627457
Золото469 725647
Дерево773 793486
Камни2334 8853103

В данном примере псевдокласс :nth-child используется для изменения стиля первой строки таблицы, а также для выделения цветом всех чётных строк (рис. 1).

Рис. 1. Применение псевдокласса:nth-child к строкам таблицы

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации ) - первая черновая версия стандарта.
×

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

CSS-псевдоклассы

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

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

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

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

Псевдокласс first-child в CSS отвечает за выбор самого первого элемента в родительском контейнере. Текстовые узлы при этом игнорируются, в счет идут только полноценные теги.

Найдем первые элементы в двух простых HTML-структурах.

  • Первый пункт
  • Второй пункт
  • Третий пункт

Есть только два способа прожить жизнь. Первый - будто чудес не существует. Второй - будто кругом одни чудеса. Альберт Эйнштейн

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

  • Первый пункт
    • два способа

    Синтаксис

    Все псевдоклассы в CSS определяются по определенному шаблону. Сначала указывается основной селектор, затем искомый псевдокласс, отделенный двоеточием.

    B:first-child { text-decoration: underline; }

    Такое правило подчеркнет текст первого элемента b внутри каждого контейнера.

    • Все хотят изменить мир сам. Лев Толстой
    • Тот, кто умеет, тот делает, кто не умеет - тот учит других. Бернард Шоу

    На скриншоте очевидно, что выделились только элементы, соответствующие одновременно селектору тега b и селектору псевдокласса:first-child. Стиль был применен внутри каждого контейнера, в данном случае внутри всех пунктов списка.

    Помимо тега, в качестве основного можно использовать любой другой селектор CSS, например:

    Class:first-child {} :first-child {} *:first-child {}

    Типичные ошибки

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

    Для примера возьмем предыдущий список цитат и перенесем авторов в начало.

    • Лев Толстой Все хотят изменить мир, но никто не хочет измениться сам.
    • Бернард Шоу Тот, кто умеет, тот делает, кто не умеет - тот учит других.

    Несмотря на то что селектор элемента остался прежним, CSS-стиль не применился, так как первым элементом в контейнере теперь является i.

    Еще одной ошибкой является игнорирование Это такой же HTML-элемент, как и прочие. Если он окажется в контейнере перед искомым блоком, то селектор CSS first-child не сработает.

    Учет типа элемента

    Чтобы избежать подобных ситуаций, можно использовать псевдокласс first-of-type. Он работает так же, как селектор CSS first-child, но учитывает тип элемента.

    B:first-of-type { text-decoration: underline; }

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

    Выбор последнего элемента

    Существует также псевдокласс last-child, который работает аналогично селектору CSS first-child, но начинает счет элементов с конца контейнера.

    В CSS существует селектор, если быть более точным, псевдо-селектор, называемый nth-child. Пример его использования:

    Ul li:nth-child(3n+3) { color: #ccc; }

    Вышеприведённый CSS делает следующее: применяет стиля для каждого третьего элемента ненумерованного списка. А именно 3-го, 6-го, 9-го, 12-го и т.д. Но как это работает? А также какую выгоду можно извлечь используя nth-child ?

    Основной смысл заключается в выражении в скобках. nth-child принимает два ключевых слова: even (чётный) и odd (нечётный). Смысл их абсолютно ясен. Even выбирает чётные элементы (2, 4, 6), odd - нечётные (1, 3, 5).

    Как показано в примере выше, nth-child может обрабатывать выражения. Какое самое простое возможное выражение? Просто число. Если вы напишите какое-нибудь число в скобках, то будет выбран один единственный элемент. Например, выберем пятый элемент списка:

    Ul li:nth-child(5) { color: #ccc; }

    Вернёмся к нашему первому примеру, в котором мы использовали выражение (3n+3). Как он работает? Почему он выбирает каждый третий элемент? Вся суть в переменной n. Она принимает целые значения от нуля и больше. Давайте рассмотрим подробнее:

    (3 x 0) + 3 = 3 = 3-ий элемент (3 x 1) + 3 = 6 = 6-ой элемент (3 x 2) + 3 = 9 = 9-ый элемент и т.д.

    Теперь попробуем следующее выражение: nth-child(2n+1) :

    (2 x 0) + 1 = 1 = 1-ый элемент (2 x 1) + 1 = 3 = 3-ий элемент (2 x 2) + 1 = 5 = 5-ый элемент и т.д.

    В итоге получили тоже самое что и в случае с odd , таким образом нет нужды часто использовать такое выражение. Более того, наш первый пример тоже можно упростить и использовать вместо оригинального выражения (3n+3), выражение (3n):

    (3 x 0) + 0 = 0 = нет соответствия (3 x 1) + 0 = 3 = 3-ий элемент (3 x 2) + 0 = 6 = 6-ой элемент и т.д.

    Как видите, результат тот же, но не надо писать "+3". Также мы можем использовать отрицательные значения в выражении. Например, 4n-1:

    (4 x 0) - 1 = -1 = нет соответствия (4 x 1) - 1 = 3 = 3-ий элемент (4 x 2) - 1 = 7 = 7-ой элемент и т.д.

    Использование отрицательных значений для коэффициента при n, выглядит слегка странно, потому что в случае отрицательного результата не будет найдено соответствие. Вам надо будет постоянно изменять выражение, чтобы добавить положительных элементов. Как оказалось, этот подход очень удобен для выбора первых n элементов. Рассмотрим пример с "-n+3":

    0 + 3 = 3 = 3ий элемент -1 + 3 = 2 = 2-ой элемент -2 + 3 = 1 = 1-ый элемент -3 + 3 = 0 = нет соответствия

    Кроссбраузерность

    nth-child является одним из тех самых несчастных атрибутов, которые являются полностью кроссбраузерными, за исключением абсолютного нуля в IE, даже 8-ой версии. Поэтому, когда речь заходит о его использовании, то если ожидаемый результат - это в некотором роде визуальный эффект (например раскраска строк некой таблицы), то это идеальный подход. Но, вероятно, не стоит использовать его для чего-то более важного, что может повлиять, например, на корректность вёрстки.

    Конечно, если вы используете jQuery, то вам не стоит переживать по этому поводу, так как jQuery работает даже в Internet Explorer.

    Ну и напоследок

    Вы можете поиграть с различными выражениями для селектора на

    CSS (Cascading Style Sheets), или каскадные таблицы стилей , используются для описания внешнего вида документа, написанного языком разметки. Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL.

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

    Объявление стиля состоит из двух частей: элемента веб-страницы — селектора , и команды форматирования — блока объявления . Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.


    Рис. 1. Структура объявления CSS-стиля

    Виды каскадных таблиц стилей и их специфика

    1. Виды таблиц стилей

    1.1. Внешняя таблица стилей

    Внешняя таблица стилей представляет собой текстовый файл с расширением.css , в котором находится набор CSS-стилей элементов. Файл создаётся в редакторе кода, так же как и HTML-страница. Внутри файла могут содержатся только стили, без HTML-разметки. Внешняя таблица стилей подключается к веб-странице с помощью тега , расположенного внутри раздела . Такие стили работают для всех страниц сайта.

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

    Атрибут type="text/css" не является обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут отсутствует, по умолчанию используется значение type="text/css" .

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

    Внутренние стили встраиваются в раздел HTML-документа и определяются внутри тега . Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут style).

    ...

    1.3. Встроенные стили

    Когда мы пишем встроенные стили , мы пишем CSS-код в HTML-файл, непосредственно внутри тега элемента с помощью атрибута style:

    Обратите внимание на этот текст.

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

    1.4. Правило @import

    Правило @import позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами:

    Правило @import также используется для подключения веб-шрифтов:

    @import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

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

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

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

    Соответствует любому HTML-элементу. Например, * {margin: 0;} обнулит внешние отступы для всех элементов сайта. Также селектор может использоваться в комбинации с псевдоклассом или псевдоэлементом: *:after {CSS-стили} , *:checked {CSS-стили} .

    2.2. Селектор элемента

    Селекторы элементов позволяют форматировать все элементы данного типа на всех страницах сайта. Например, h1 {font-family: Lobster, cursive;} задаст общий стиль форматирования всех заголовков h1 .

    2.3. Селектор класса

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

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

    Инструкция пользования персональным компьютером

    .headline { text-transform: uppercase; color: lightblue; }

    2.4. Селектор идентификатора

    Селектор идентификатора позволяет форматировать один конкретный элемент. Идентификатор id должен быть уникальным и на одной странице может встречаться только один раз.

    #sidebar { width: 300px; float: left; }

    2.5. Селектор потомка

    Селекторы потомков применяют стили к элементам, расположенным внутри элемента-контейнера. Например, ul li {text-transform: uppercase;} — выберет все элементы li , являющиеся потомками всех элементов ul .

    Если нужно отформатировать потомки определенного элемента, этому элементу нужно задать стилевой класс:

    p.first a {color: green;} — данный стиль применится ко всем ссылкам, потомкам абзаца с классом first ;

    p .first a {color: green;} — если добавить пробел, то будут стилизованы ссылки, расположенные внутри любого тега класса.first , который является потомком элемента

    First a {color: green;} — данный стиль применится к любой ссылке, расположенной внутри другого элемента, обозначенного классом.first .

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

    Дочерний элемент является прямым потомком содержащего его элемента. У одного элемента может быть несколько дочерних элементов, а родительский элемент у каждого элемента может быть только один. Дочерний селектор позволяет применить стили только если дочерний элемент идёт сразу за родительским элементом и между ними нет других элементов, то есть дочерний элемент больше ни во что не вложен.
    Например, p > strong — выберет все элементы strong , являющиеся дочерними по отношению к элементу p .

    2.7. Сестринский селектор

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

    h1 + p — выберет все первые абзацы, идущие непосредственно за любым тегом

    , не затрагивая остальные абзацы;

    h1 ~ p — выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие сразу после него.

    2.8. Селектор атрибута

    Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута:

    [атрибут] — все элементы, содержащие указанный атрибут, — все элементы, для которых задан атрибут alt ;

    селектор[атрибут] — элементы данного типа, содержащие указанный атрибут, img — только картинки, для которых задан атрибут alt ;

    селектор[атрибут="значение"] — элементы данного типа, содержащие указанный атрибут с конкретным значением, img — все картинки, название которых содержит слово flower ;

    селектор[атрибут~="значение"] — элементы частично содержащие данное значение, например, если для элемента задано несколько классов через пробел, p — абзацы, имя класса которых содержит feature ;

    селектор[атрибут|="значение"] — элементы, список значений атрибута которых начинается с указанного слова, p — абзацы, имя класса которых feature или начинается на feature ;

    селектор[атрибут^="значение"] — элементы, значение атрибута которых начинается с указанного значения, a — все ссылки, начинающиеся на http:// ;

    селектор[атрибут$="значение"] — элементы, значение атрибута которых заканчивается указанным значением, img — все картинки в формате png ;

    селектор[атрибут*="значение"] — элементы, значение атрибута которых содержит в любом месте указанное слово, a — все ссылки, название которых содержит book .

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

    Псевдоклассы — это классы, фактически не прикрепленные к HTML-тегам. Они позволяют применить CSS-правила к элементам при совершении события или подчиняющимся определенному правилу. Псевдоклассы характеризуют элементы со следующими свойствами:

    :hover — любой элемент, по которому проводят курсором мыши;

    :focus — интерактивный элемент, к которому перешли с помощью клавиатуры или активировали посредством мыши;

    :active — элемент, который был активизирован пользователем;

    :valid — поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу данных;

    :invalid — поля формы, содержимое которых не соответствует указанному типу данных;

    :enabled — все активные поля форм;

    :disabled — заблокированные поля форм, т.е., находящиеся в неактивном состоянии;

    :in-range — поля формы, значения которых находятся в заданном диапазоне;

    :out-of-range — поля формы, значения которых не входят в установленный диапазон;

    :lang() — элементы с текстом на указанном языке;

    :not(селектор) — элементы, которые не содержат указанный селектор — класс, идентификатор, название или тип поля формы — :not() ;

    :target — элемент с символом # , на который ссылаются в документе;

    :checked — выделенные (выбранные пользователем) элементы формы.

    2.10. Селектор структурных псевдоклассов

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

    :nth-child(odd) — нечётные дочерние элементы;

    :nth-child(even) — чётные дочерние элементы;

    :nth-child(3n) — каждый третий элемент среди дочерних;

    :nth-child(3n+2) — выбирает каждый третий элемент, начиная со второго дочернего элемента (+2) ;

    :nth-child(n+2) — выбирает все элементы, начиная со второго;

    :nth-child(3) — выбирает третий дочерний элемент;

    :nth-last-child() — в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с:nth-child() , но начиная с последнего, в обратную сторону;

    :first-child — позволяет оформить только самый первый дочерний элемент тега;

    :last-child — позволяет форматировать последний дочерний элемент тега;

    :only-child — выбирает элемент, являющийся единственным дочерним элементом;

    :empty — выбирает элементы, у которых нет дочерних элементов;

    :root — выбирает элемент, являющийся корневым в документе — элемент html .

    2.11. Селектор структурных псевдоклассов типа

    Указывают на конкретный тип дочернего тега:

    :nth-of-type() — выбирает элементы по аналогии с:nth-child() , при этом берёт во внимание только тип элемента;

    :first-of-type — выбирает первый дочерний элемент данного типа;

    :last-of-type — выбирает последний элемент данного типа;

    :nth-last-of-type() — выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца;

    :only-of-type — выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.

    2.12. Селектор псевдоэлемента

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

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

    :first-line — выбирает первую строку текста элемента, применяется только к блочным элементам;

    :before — вставляет генерируемое содержимое перед элементом;

    :after — добавляет генерируемое содержимое после элемента.

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

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

    img:nth-of-type(even) — выберет все четные картинки, альтернативный текст которых содержит слово css .

    4. Группировка селекторов

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

    H1, h2, p, span { color: tomato; background: white; }

    5. Наследование и каскад

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

    5.1. Наследование

    Наследование является механизмом, с помощью которого определенные свойства передаются от предка к его потомкам. Спецификацией CSS предусмотрено наследование свойств, относящихся к текстовому содержимому страницы, таких как color , font , letter-spacing , line-height , list-style , text-align , text-indent , text-transform , visibility , white-space и word-spacing . Во многих случаях это удобно, так как не нужно задавать размер шрифта и семейство шрифтов для каждого элемента веб-страницы.

    Свойства, относящиеся к форматированию блоков, не наследуются. Это background , border , display , float и clear , height и width , margin , min-max-height и -width , outline , overflow , padding , position , text-decoration , vertical-align и z-index .

    Принудительное наследование

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

    Как задаются и работают CSS-стили

    1) Стили могут наследоваться от родительского элемента (наследуемые свойства или с помощью значения inherit);

    2) Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в таблице выше;

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


    Рис. 2. Режим разработчика в браузере Google Chrome

    4) При определении стиля можно использовать любую комбинацию селекторов — селектор элемента, псевдокласса элемента, класса или идентификатора элемента.

    div {border: 1px solid #eee;} #wrap {width: 500px;} .box {float: left;} .clear {clear: both;}

    5.2. Каскад

    Каскадирование — это механизм, который управляет конечным результатом в ситуации, когда к одному элементу применяются разные CSS-правила. Существует три критерия, которые определяют порядок применения свойств — правило!important , специфичность и порядок, в котором подключены таблицы стилей.

    Правило!important

    Вес правила можно задать с помощью ключевого слова!important , которое добавляется сразу после значения свойства, например, span {font-weight: bold!important;} . Правило необходимо размещать в конец объявления перед закрывающей скобкой, без пробела. Такое объявление будет иметь приоритет над всеми остальными правилами. Это правило позволяет отменить значение свойства и установить новое для элемента из группы элементов в случае, когда нет прямого доступа к файлу со стилями.

    Специфичность

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

    для id добавляется 0, 1, 0, 0 ;
    для class добавляется 0, 0, 1, 0 ;
    для каждого элемента и псевдоэлемента добавляется 0, 0, 0, 1 ;
    для встроенного стиля, добавленного непосредственно к элементу — 1, 0, 0, 0 ;
    универсальный селектор не имеет специфичности.

    H1 {color: lightblue;} /*специфичность 0, 0, 0, 1*/ em {color: silver;} /*специфичность 0, 0, 0, 1*/ h1 em {color: gold;} /*специфичность: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about {color: blue;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar {color: grey;} /*специфичность 0, 0, 1, 0*/ #sidebar {color: orange;} /*специфичность 0, 1, 0, 0*/ li#sidebar {color: aqua;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

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

    Порядок подключённых таблиц

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