css первый элемент класса

CSS3-селекторы – фундаментально полезная вещь.

Даже если вы почему-то (старый IE?) не пользуетесь ими в CSS, есть много фреймворков для их кросс-браузерного использования CSS3 из JavaScript.

Поэтому эти селекторы необходимо знать.

Основные виды селекторов

Основных видов селекторов всего несколько:

  • * – любые элементы.
  • div – элементы с таким тегом.
  • #id – элемент с данным id .
  • .class – элементы с таким классом.
  • [name=»value»] – селекторы на атрибут (см. далее).
  • :visited – «псевдоклассы», остальные разные условия на элемент (см. далее).

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

  • .c1.c2 – элементы одновременно с двумя классами c1 и c2
  • a#id.c1.c2:visited – элемент a с данным id , классами c1 и c2 , и псевдоклассом visited

Отношения

В CSS3 предусмотрено четыре вида отношений между элементами.

Самые известные вы наверняка знаете:

  • div p – элементы p , являющиеся потомками div .
  • div > p – только непосредственные потомки

Есть и два более редких:

p – правые соседи: все p на том же уровне вложенности, которые идут после div .

  • div + p – первый правый сосед: p на том же уровне вложенности, который идёт сразу после div (если есть).
  • Internet Explorer Chrome Opera Safari Firefox Android iOS
    9.0+ 1.0+ 9.6+ 3.1+ 3.6+ 2.1+ 2.0+

    Краткая информация

    Значение по умолчанию Нет
    Применяется Ко всем элементам
    Ссылка на спецификацию http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

    Версии CSS

    CSS 1 CSS 2 CSS 2.1 CSS 3

    Описание

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

    Синтаксис

    Значения

    Если 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+2 2, 5, 8, 11, 14
    -n+3 3, 2, 1
    5n-2 3, 8, 13, 18, 23
    even 2, 4, 6, 8, 10 Все четные элементы.
    odd 1, 3, 5, 7, 9 Все нечетные элементы.

    HTML5 CSS3 IE Cr Op Sa Fx

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

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

    Представьте себе какой-то элемент на странице, в который вложены несколько других элементов.

    Это может выглядеть вот так:

    Причем, количество вложенных элементов может постоянно меняться, например, программным способом (скриптами).

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

    С появлением CSS3 и модуля «Селекторы» такие обращения к элементу стали возможными.

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

    Синтаксис здесь простой:

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

    Этой записью мы сообщаем о том, что в родительском элементе #main, необходимо найти элемент «p», который расположен в коде выше всех.

    Будет выделен «Элемент 1».

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

    Оцените статью