Как обратиться ко второму элементу css
Перейти к содержимому

Как обратиться ко второму элементу css

  • автор:

Атрибут class

Атрибут class задает один или несколько классов для элемента (под элементом имеется ввиду тег).

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

Существует также атрибут id, который подобно атрибуту class позволяет выбирать элементы на HTML странице.

Разница между атрибутом class и атрибутом id в том, что class выбирает группу элементов (даже если он дан одному элементу — его в последствии можно дать и другому), а id выбирает уникальный элемент (больше элемента с таким id не должно быть на странице сайта, иначе будет конфликт).

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

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

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

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

Пример

Давайте всем абзацам с классом test зададим красный цвет текста:

Абзац с классом test.

Контрольный абзац без класса.

.test < color: red; >

Пример . Несколько классов для элемента

А здесь давайте первому абзацу зададим несколько классов — test1 и test2 (запишем их через пробел). Класс test1 задает красный цвет тексту, а класс test2 задает размер шрифта в 20px . Второму абзацу дан только класс test1 (этот абзац станет красным), а третьему абзацу — класс test2 (этот абзац будет иметь размер шрифта в 20px). Первый абзац, у которого два класса, будет иметь одновременно и красный цвет и размер шрифта в 20px :

Абзац с двумя классами test1 и test2.

Абзац с классом test1.

Абзац с классом test2.

Контрольный абзац без классов.

.test1 < color: red; >.test2 < font-size: 20px; >

:nth-of-type

CSS псевдокласс :nth-of-type() находит один или более элементов с заданным тегом, основываясь на их позиции среди группы соседних элементов.

/* Выбирает каждый четвёртый элемент 

среди любой группы соседних элементов. */ p:nth-of-type(4n) color: lime; >

Синтаксис

Псевдокласс nth-of-type указывается с единственным аргументом, описывающим паттерн для выбора элементов.

Более детальное описание синтаксиса может быть найдено на странице псевдокласса :nth-child .

Формальный синтаксис

Error: could not find syntax for this item

Примеры

Базовый пример

HTML
div> div>Этот элемент не учитывается.div> p>Первый параграф.p> p>Второй параграф.p> div>Этот элемент не учитывается.div> p>Третий параграф.p> p>Четвёртый параграф.p> div> 
CSS
/* Нечётные параграфы */ p:nth-of-type(2n + 1)  color: red; > /* Чётные параграфы */ p:nth-of-type(2n)  color: blue; > /* Первый параграф */ p:nth-of-type(1)  font-weight: bold; > 
Результат

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

Specification
Selectors Level 4
# nth-of-type-pseudo

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

CSS псевдоклассы :nth-child и :nth-of-type

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

Возьмем обычный список, зададим симпатичные стили его элементам и отдельно раскрасим 5ый элемент:

See the Pen aboqOvL by Websitio (@Websitio) on CodePen.

Таким образом можно выбрать несколько элементов, 5ый и 7ой:

See the Pen wvwyaGw by Websitio (@Websitio) on CodePen.

Переменная n

В общем виде значение задаётся с помощью математического выражения an+b, где a и b это целые числа, а n последовательность целых чисел от 0 и до бесконечности (0, 1, 2, 3 . ). Если браузер находит элемент с вычисленным порядковым номером, то применяет кнему указанные стили.

Рассмотрим на примере :nth-child(2n) .
При n=0 получаем 2х0=0. Нулевых элементов нет — ничего не покрасится.
При n=1 2х1=2. Стили применятся ко второму по порядку элементу.
При n=2 2х2=4. Стили применятся к четвертому элементу.
И т.д.

Так мы получили последовательность для выбор четных элементов.

Для чётных элементов существует также специальное ключевое слово even .

Аналогично для нечетных чисел есть специальное слово odd или запись через счетчик n :nth-child(2n + 1)

n=0 получаем 2х0+1=1. 1ый элемент.
n=1 2х1+1=3. 3ий элемент.
n=2 2х2+1=5. 5ый элемент.

В примере ниже одновременно применены odd и even.

See the Pen vYBdOxb by Websitio (@Websitio) on CodePen.

Более сложные выражения

:nth-child(5n-1) — стили применятся к каждому 5му элементу начиная с 4го

See the Pen LYPQVLB by Websitio (@Websitio) on CodePen.

Выделить все элементы кроме нескольких начальных

Если в формуле an+b задать b как большое положительное число, то элементы с номером меньше b не будут покрашены, а все остальные, начиная с номера b — будут

See the Pen rNBJVGG by Websitio (@Websitio) on CodePen.

Отрицательный n

:nth-child(-n+5)
Такая запись позволит выделить только 5 начальных элементов, а все остальные не выделять.

See the Pen ZEzrGay by Websitio (@Websitio) on CodePen.

Комбинирование выражений в :nth-child

Можно применять последовательно несколько :nth-child()

:nth-child(n+3):nth-child(-n+13)
Первая часть выражения выделит элементы с 3-го до бесконечности, вторая до 13го.
Стили применяться к элементам на пересечении этих двух множеств: от 3 до 13. Всего будут выделены 11 элементов.

See the Pen WNeMvMx by Websitio (@Websitio) on CodePen.

Комбинировать можно сколько угодно выражений. Возьмем только четные элементы из предыдущего интервала [3,13]

See the Pen qBWxdKJ by Websitio (@Websitio) on CodePen.

Или не будем писать плохой код и переопределять цвета, а зададим 2 отдельных правила:

See the Pen eYOVNje by Websitio (@Websitio) on CodePen.

Особенность :nth-child

:nth-child ищет лишь те элементы, которые соответствуют указанному типу селектора.

Пусть в теге p есть дочерние элементы strong и b

Запись strong:nth-child(even) сработает только для тегов strong. Соответствующие номера попадающие на тег b будут пропущены. Обратите внимание, элемент номер 8 является первым, т.е. нечетным strong’ом, но четным элементом в наборе. И к нему будет применен фон, потому что расчет идет среди всех элементов набора.

Дополнительный синтаксис of selector

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

li:nth-child(-n + 3 of .bright)

li:nth-child(odd of li.bright)

See the Pen nth-child by Websitio (@Websitio) on CodePen.

:nth-of-type

Похож на предыдущий псевдокласс, но учитывает тип элемента

Возьмем блок и разместим в него через один теги b и strong . Для наглядности b сделаем круглыми, а strong квадратными, а нумерацию не сквозную, а по тегам.

Для начала попробуем простые выражения для псевдокласса :nth-of-type

b:nth-of-type(2) и strong:nth-of-type(5)

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

See the Pen pozaJYr by Websitio (@Websitio) on CodePen.

Выберем нечетные b:nth-of-type(odd) и четные strong:nth-of-type(even)

See the Pen dybdoLE by Websitio (@Websitio) on CodePen.

Комбинированные :nth-of-type

Зададим фон нечетным b только из первых 5ти b:nth-of-type(odd):nth-of-type(-n+5)

Зададим фон четным strong после 5го strong:nth-of-type(even):nth-of-type(n+6)

See the Pen aboqOrR by Websitio (@Websitio) on CodePen.

Отличия :nth-child от :nth-of-type

Значения этих псевдоклассов задаются одинаково. Но нумерация элементов при использовании :nth-child идет по всем дочерним элементам родительского блока, а при использовании :nth-of-type расчет идет среди потомков указанного типа. На данный момент тип элемента может быть задан как селектором по тегу, так и классами, но считаться он будет по типу тега.

  • Предыдущий: Как сделать border градиентом
  • Следующий: Работа с инструментами разработчика в Chrome

CSS псевдокласс :nth-child()css3

Псевдокласс :nth-child() позволяет выбрать дочерние элементы внутри родительского элемента в зависимости от их размещения (порядкового номера).

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

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

Селектор Chrome

Firefox Opera Safari IExplorer Edge
:nth-child()css3 4.0 3.5 9.6 3.2 9.0 12.0

CSS синтаксис:

:nth-child(номер | ключевое слово | формула)  блок объявлений; > 

Версия CSS

Пример использования

Стилизация по порядковому номеру

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

Пример выбора селектора дочерних элементов.

Пример выбора селектора дочерних элементов.

css3

Что общего у элементов, выделенных на изображении? А общее у них то, что они выделены оранжевым цветом. Смешно? Не думаю. Общее у них все же есть, элементы являются вторыми дочерними элементами своих родителей, а элемент тоже можно посчитать, и его порядковый номер будет третьим (третий дочерний элемент своего родителя ). Чтобы стилизовать эти элементы, нам необходимо использовать псевдокласс :nth-child.

Перейдем к примеру:

    один два три
    один два три

css3

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

Результат нашего примера:

Пример использования псевдоэлемента :last-child.

Стилизация по ключевому слову

css3

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

  • even (четные элементы)
  • odd (нечетные элементы)

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

css3

Давайте для примера создадим две простые таблицы с разными стилевыми классами и рассмотрим наглядно разницу в применении значений ключевых слов псевдокласса :nth-child для HTML элемента , который определяет строку таблицы:

   charset = "UTF-8"> Стилизация четных и нечетных дочерних элементов .primer1 tr:nth-child(even)  /* стилизация четных дочерних элементов */ background-color: #AAA; /* устанавливаем цвет заднего фона */ > .primer2 tr:nth-child(odd)  /* стилизация нечетных дочерних элементов */ background-color: #AAA; /* устанавливаем цвет заднего фона */ > caption /* селектор типа (выбираем HTML элемент ) */ color: red; /* устанавливаем цвет текста */ >  class ="primer1"> Значение even (четные) 1 строка Позиция Количество2 строка3 строка4 строка5 строка
class ="primer2"> Значение odd (нечетные) 1 строка Позиция Количество2 строка3 строка4 строка5 строка

css3

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

Пример стилизации четных и нечетных дочерних элементов.

Стилизация по простой математической формуле

css3

Псевдокласс :nth-child() позволяет выбрать не только чётные, нечетные, или дочерние элементы с определённым порядковым номером, но и дочерние элементы, заданные по элементарной математической формуле. Давайте рассмотрим следующий селектор и разберем, что значит эта запись:

td:nth-child(4n+2)  background-color: lightblue; /* устанавливаем цвет заднего фона */ > 
  • 4n – каждый четвертый элемент.
  • 2 – с какого элемента начинать.

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

td:nth-child(4n-1)  background-color: lightblue; /* устанавливаем цвет заднего фона */ > 
  • 4n – каждый четвертый элемент.
  • -1 – с какого элемента начинать.

Давайте рассмотрим пример использования:

   charset = "UTF-8"> Стилизация дочерних элементов по математической формуле td, th /* групповым селектором выбираем заголовочные ячейки и ячейки данных */ border: 1px solid green; /* задаём сплошную границу размером 1 пиксель зеленого цвета */ width: 50px; /* устанавливаем ширину заголовочным ячейкам и ячейкам данных */ > td:nth-child(4n+2)  background-color: lightblue; /* устанавливаем цвет заднего фона */ >   1 2 3 4 5 6 7 8 9 10 11 12 13 14234

css3

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

Пример cтилизации дочерних элементов по математической формуле.

Отличие :nth-child от :nth-of-type()

Давайте разберем еще очень важный пример, чтобы понять в чем заключается отличие псевдокласса :nth-child от псевдокласса :nth-of-type() , который выбирает каждый указанный элемент определенного типа, при этом он является дочерним элементом своего родительского элемента.

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

 
Первый параграф Второй параграф

Допустим мы стоим перед выбором какой селектор использовать: p:nth-child(2) или p:nth-of-type(2). Попробуем проверить как работают оба варианта:

p:nth-child(2)  background-color: khaki; /* устанавливаем цвет заднего фона */ > p:nth-of-type(2)  background-color: khaki; /* устанавливаем цвет заднего фона */ > 

Что не удивительно оба селектора работают для данной задачи. Но в чём разница?

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

   charset = "UTF-8"> Отличие :nth-child() от :nth-of-type() p:nth-of-type(2)  background-color:khaki; /* устанавливаем цвет заднего фона */ > p:nth-child(2)  background-color:khaki; /* устанавливаем цвет заднего фона */ >   
Заголовок второго уровня Первый параграф Второй параграф

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

Пример использования псевдоклассов :nth-of-type() и :nth-child().

css3

В данном примере селектор p:nth-child(2) выбирает второй дочерний элемент своего родителя, а с добавлением заголовка второго уровня (тег ) порядок элементов в родительком элементе изменился и это у нас стал первый абзац, а не второй, что для нас не приемлимо. Для нашей задачи оптимальным выбором является использование селектора с псевдоклассом :nth-of-type() по той причине, что он выбирает второй элемент того же типа, а у нас количество элементов этого типа не изменилось.

© 2016-2024 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу basicweb.ru@gmail.com

Кажется, вы используете блокировщик рекламы 🙁

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *