Css второй элемент: CSS. Как выбрать каждый первый, второй, третий и.т.д. элементы списка, таблицы, блока.

CSS. Как выбрать каждый первый, второй, третий и.т.д. элементы списка, таблицы, блока.

Иногда, при работе с CSS нужно выбрать какой-то определенный по счету элемент, например, в списке, таблице и.т.д. Либо нужно выбрать каждый второй, третий и.т.д. элементы. 

Давайте рассмотрим способ, как это можно сделать с помощью CSS и псевдокласса nth-child.

Все мои уроки по CSS (каскадным таблицам стилей) здесь.

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

<ul>
            <li>Элемент 1</li>
            <li>Элемент 2</li>
            <li>Элемент 3</li>
            <li>Элемент 4</li>
            <li>Элемент 5</li>
            <li>Элемент 6</li>
            <li>Элемент 7</li>
            <li>Элемент 8</li>
            <li>Элемент 9</li>
            <li>Элемент 10</li>
</ul>

Давайте выделим красным цветом, например, пятый по счету элемент li. Для этого воспользуемся псевдоклассом CSS nth-child

ul li:nth-child(5) {color:#F00;}

Для того, чтобы выбрать 5 элемент, в качестве параметра для псевдокласса nth-child, нужно указать цифру 5. Все просто. Цифра 5 это позиция элемента, по порядку, в котором он находится в коде.

Вот какой результат получился.

Вместо цифры «5» можно указывать любое другое число, в зависимости от того элемента, который вы хотите выбрать.

Например, для того, чтобы выбрать каждый второй элемент с помощью CSS, необходимо написать:

ul li:nth-child(2) {color:#F00;}

Что делать, если нужно выбрать каждый второй элемент с помощью CSS, а не только второй. Как быть в этом случае?

Используйте следуйющий код:

ul li:nth-child(2n) {color:#F00;}

По сути, добавляем символ «n» к цифре.

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

Все мои уроки по CSS (каскадным таблицам стилей) здесь.

Использование псевдокласса CSS :nth-child

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

tr:nth-child(odd)
{
    // background color
}

tr:nth-child(even)
{
    // another background color
}

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

Здесь a определяет количество элементов в группе, а b определяет, какой элемент из группы будет выбран. Если использовать значение 2n+1, то элементы будут разделены на группы по два, и будут выбраны первые элементы каждой группы, т. е., элементы с нечетным порядковым номером. Если использовать значение 2n+2, то элементы снова будут разделены на группы по два, но теперь будут выбраны вторые элементы каждой группы, т. е., элементы с четным порядковым номером.

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

tr:nth-child(4n+4)
{
    // задаем стили каждому четвертому элементу
}

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

Использование псевдокласса CSS :nth-child для выбора единственного элемента 

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

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

#selector_example li:nth-child(4){
     font-size:150%;
     font-weight:bold;
     color:green;
}

Использование псевдокласса CSS :nth-child для выбора всех элементов, кроме первых пяти 

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

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

#selector_example li:nth-child(n+6){
     font-size:150%;
     font-weight:bold;
     color:green;
}

Использование псевдокласса CSS :nth-child для выбора только первых пяти элементов 

Когда мы задаем псевдоклассу :nth-child значение в виде отрицательного n+ число, мы выбираем все элементы, находящиеся до элемента с этим порядковым номером:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

#selector_example li:nth-child(-n+5){
     font-size:150%;
     font-weight:bold;
     color:green;
}

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

Псевдокласс :nth-child можно использовать, чтобы выбрать последовательность элементов, задавая, сколько элементов в последовательности и порядковый номер нужного элемента. Если задать значение 3n+1, будет выбран каждый третий элемент, начиная с первого:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10 

#selector_example li:nth-child(3n+1){
     font-size:150%;
     font-weight:bold;
     color:green;
} 

Использование псевдокласса CSS :nth-child для выбора только нечетных элементов 

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

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

#selector_example li:nth-child(odd){
     font-size:150%;
     font-weight:bold;
     color:green;
}

Использование псевдокласса CSS :nth-child для выбора только четных элементов 

Этот пример показывает то же, что и прошлый, но на этот раз выбраны все элементы с четными порядковыми номерами. Т.е., второй, четвертый, шестой, восьмой, десятый и т. д. элементы:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10 

#selector_example li:nth-child(even){
     font-size:150%;
     font-weight:bold;
     color:green;
}

Использование псевдокласса CSS :first-child для выбора первого элемента 

Другой псевдокласс :first-child выберет первый элемент:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

#selector_example li:first-child{
     font-size:150%;
     font-weight:bold;
     color:green;
} 

Использование псевдокласса CSS :last-child для выбора последнего элемента 

Кроме псевдокласса :first-child есть псевдокласс :last-child, который выберет последний элемент из группы элементов:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10 

#selector_example li:last-child{
     font-size:150%;
     font-weight:bold;
     color:green;
}

Использование псевдокласса CSS :nth-last-child для выбора предпоследнего элемента 

Еще можно использовать псевдокласс :nth-last-child, который совмещает в себе возможности псевдоклассов :last-child и :nth-child, чтобы начинать отсчет элементов с конца. Т.е., можно выбрать элемент, отсчитывая порядковые номера с конца группы, например, в группе из десяти элементов можно выбрать второй с конца элемент:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

#selector_example li:nth-last-child(2){
     font-size:150%;
     font-weight:bold;
     color:green;
} 

Ознакомьтесь с возможностями псевдокласса :nth-child  с помощью «Конструктора nth-child».

Дополнительные материалы 

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

Автор урока Paul Underwood

Перевод — Дежурка

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

Различия между :nth-child и :nth-of-type / Хабр

Допустим, есть такой HTML:

<section>

   <p>Little</p>

   <p>Piggy</p>    <!— Нужен этот элемент —>
</section>

Следующий CSS будет делать одно и тоже:

p:nth-child(2) { color: red; }

p:nth-of-type(2) { color: red; }

Хотя, конечно, в этих селекторах, есть разница.

Псевдокласс :nth-child, означачает выбрать элемент, если:

1. Этот элемент — параграф;
2. Это второй элемент одного родителя.

Псевдокласс :nth-of-type, означает:

1. Выбрать второй параграф одного родителя.

Предположим, что наша разметка изменена следующим образом:

<section>

   <h2>Words</h2>

   <p>Little</p>

   <p>Piggy</p>    <!— Нужен этот элемент —>
</section>

Теперь первый вариант не работает:

p:nth-child(2) { color: red; } /* Не работает */

Второй продолжает работать:

p:nth-of-type(2) { color: red; } /* Продолжает работать */

Под «Не работает» я имею ввиду, что cелектор :nth-child выбирает слово «Little» вместо «Piggy». Потому что элемент выполняет оба условия: 1) Это второй элемент родительского элемента и 2) Это параграф. Под «Продолжает работать», я имею ввиду, что селектор продолжает выбираться «Piggy», потому что это второй параграф родительского элемента.

Если добавить <h3> после <h2>, то селектор с :nth-child не выберет ничего, потому что параграф больше не является вторым элементом. Селектор с :nth-of-type продолжит работать.

Мне кажется :nth-of-type менее хрупкий и более полезный в целом, несмотря на это :nth-child продолжает быть основным в работе. Как часто вы думаете «Я хочу выбрать второй элемент в родительском блоке, если это параграф». Возможно иногда, но чаще вы думаете «Выбрать второй параграф» или «выбрать каждую третью строку таблицы», для этих задач больше подходит :nth-of-type (опять же, на мой взгляд).

Большинство ситуаций, когда я говорю «Почему мой селектор с :nth-child не работает?» случаются из за того, что я забываю про выборку тегов и нужный тег не оказывается по счету тем, который нужен. Поэтому, при использовании :nth-child лучше указывать его от родителя и не использовать привязку к тегу.

dl :nth-child(2) {  } /* Этот вариант лучше чем */

dd:nth-child(2) {  } /* этот */

Но, конечно, все зависит от конкретной ситуации.

Поддержка браузерами :nth-of-type довольно приличная… Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+. Я бы сказал, если вам нужна более глубокая поддержка, то используйте jQuery (используйте селектор и применяйте класс, там где нужно), но jQuery прекратил поддержку :nth-of-type. Слышал, что из за редкого использования, но мне это кажется странным. Если вы хотите пойти этим путем, то вот плагин возвращающий поддержку назад.

CSS псевдокласс nth-child. Как выбрать все четные элементы списка, таблицы, блока, и.т.д.

Иногда, при оформлении страниц, хочется немного «автоматизировать» стили CSS.

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

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

Мне бы хотелось рассказать о методе, который основывается на использовании псевдокласса nth-child.

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

Одним из способов применения этого псевдокласса на практике является выборка всех четных элементов, которые располагаются в дереве HTML-документа.

Есть несколько вариантов, как это можно реализовать. Давайте их разберем.

1 вариант. Использовать параметр even. 

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

<ul>
            <li>Элемент 1</li>
            <li>Элемент 2</li>
            <li>Элемент 3</li>
            <li>Элемент 4</li>
            <li>Элемент 5</li>
            <li>Элемент 6</li>
            <li>Элемент 7</li>
            <li>Элемент 8</li>
            <li>Элемент 9</li>
            <li>Элемент 10</li>
</ul>

Чтобы выделить красным цветом все четные элементы в этом списке, нужно добавить стиль CSS:

ul li:nth-child(even) {color:#F00;}

В итоге, получиться следующая картина.

Even – это ключевое слово, которое означает, что будут выбраны четные элементы.

Красивое решение, не правда ли? Всего одна строка CSS стилей.

2 вариант. Использовать параметр 2n. 

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

Вот как это может быть использовано применительно для таблиц.

<table>
  <tr>
    <td>Столбец 1</td>
    <td>Столбец 2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td>9</td>
  </tr>
</table>

И стили CSS

tr:nth-child(2n) {color:#F00;}

Текст в каждом четном элементе tr стал красным.

CSS псевдокласс nth-child. Как выбрать все нечетные элементы списка, таблицы, блока, и.т.д.

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

Давайте сейчас посмотрим, как сделать обратное. Задача будет выбрать все нечетные элементы. Делать это будем с помощью все того же псевдокласса nth-class.

Здесь тоже есть пара вариантов решения.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Вариант 1. Использовать параметр odd.

За основу возьмем немаркированный список:

<ul>
            <li>Элемент 1</li>
            <li>Элемент 2</li>
            <li>Элемент 3</li>
            <li>Элемент 4</li>
            <li>Элемент 5</li>
            <li>Элемент 6</li>
            <li>Элемент 7</li>
            <li>Элемент 8</li>
            <li>Элемент 9</li>
            <li>Элемент 10</li>
</ul>

Чтобы выделить красным цветом все нечетные элементы в этом списке, нужно добавить стиль CSS:

ul li:nth-child(odd) {color:#F00;}

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

Вариант 2. Использовать параметр 2n+1

Сделать то же самое можно и другим параметром. Для этого используем стиль.

ul li:nth-child(2n+1) {color:#F00;}

Расшифровать эту форму записи можно как к каждому второму элементу прибавляется 1.

Кажется, что в таком случае не попадет первый элемент 2*1+1 = 3, но не беспокойтесь, счет идет с нуля:

0*1+1 = 1 – это и будет первый элемент.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Как работает nth-child — Веб-стандарты

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

ul li:nth-child(3n+3) {
    color: #cccccc;
}

Что делает 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: #cccccc;
}

Однако давайте вернемся к 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 есть хороший справочник с милой табличкой, которую я бесстыдно опубликую здесь:

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

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

Спасением здесь может послужить библиотека jQuery, которая реализует поддержку всех CSS-селекторов, включая :nth-child, даже в Internet Explorer.

Всё равно неясно?#

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

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

Дочерние селекторы | htmlbook.ru

Версии CSS

Описание

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

Рис. 1. Дерево элементов

На рис. 1 в удобном виде представлена вложенность элементов и их иерархия. Здесь дочерним элементом по отношению к тегу <div> выступает тег <p>. Вместе с тем тег <strong> не является дочерним для тега <div>, поскольку он расположен в контейнере <p>.

Синтаксис

E > F { Описание правил стиля }

Стиль применяется к элементу F, только когда он является дочерним для элемента E.

Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Дочерние селекторы</title>
  <style>
   #menu {
    margin: 0; padding: 0; /* Убираем отступы */
   }
   #menu > li {
    list-style: none; /* Убираем маркеры списка */
    width: 100px; /* Ширина элемента в пикселах */
    background: #b3d9d2; /* Цвет фона */
    color: #333; /* Цвет текста */
    padding: 5px; /* Поля вокруг текста */
    font-family: Arial, sans-serif; /* Рубленый шрифт */
    font-size: 90%; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
    float: left; /* Располагаем элементы по горизонтали */
   }
   li > ul {
    list-style: none; /* Убираем маркеры списка */
    margin: 0; padding: 0; /* Убираем отступы вокруг элементов списка */
    border-bottom: 1px solid #666; /* Граница внизу */
    padding-top: 5px; /* Добавляем отступ сверху */
   }
   li > a {
    display: block; /* Ссылки отображаются в виде блока */
    font-weight: normal; /* Нормальное начертание текста */
    font-size: 90%; /* Размер шрифта */
    background: #fff; /* Цвет фона */
    border: 1px solid #666; /* Параметры рамки */
    border-bottom: none; /* Убираем границу снизу */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <ul> 
   <li>Правка 
    <ul> 
      <li><a href="undo.html">Отменить</a></li> 
      <li><a href="cut.html">Вырезать</a></li> 
      <li><a href="copy.html">Копировать</a></li> 
      <li><a href="paste.html">Вставить</a></li> 
    </ul> 
   </li> 
   <li>Начертание
    <ul> 
      <li><a href="bold.html">Жирное</a></li> 
      <li><a href="italic.html">Курсивное</a></li> 
      <li><a href="underline.html">Подчеркнутое</a></li> 
    </ul> 
   </li>
   <li>Размер
    <ul> 
      <li><a href="small.html">Маленький</a></li> 
      <li><a href="normal.html">Нормальный</a></li> 
      <li><a href="middle.html">Средний</a></li> 
      <li><a href="big.html">Большой</a></li> 
    </ul> 
   </li> 
  </ul>
 </body>
</html>

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

Рис. 2. Использование дочерних селекторов

Браузеры

Браузер Internet Explorer 7 не применяет стиль, если между селекторами располагается комментарий (li > /* больше */ a).

CSS: селектор nth-last-child ()

Пример

Укажите цвет фона для каждого элемента

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

p: nth-последний-ребенок (2)
{
фон: красный;
}

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Селектор : nth-last-child ( n )
соответствует каждому элементу, который является n -м дочерним элементом, независимо от
тип своего родителя, считая от последнего дочернего элемента.

n может быть числом, ключевым словом или формулой.

Совет: Посмотрите на
: селектор nth-last-of-type ()
для выбора элемента, который является n -м потомком, указанного
тип своего родителя, считая от последнего дочернего элемента.

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

Синтаксис CSS

: nth-last-child ( номер ) {
объявления css ;
}
Демо

Другие примеры

Пример

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

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

p: nth-last-child (нечетный)
{
фон: красный;
}

p: nth-last-child (четный)
{

фон: синий;
}

Попробуй сам »

Пример

По формуле ( и + b ).Описание: a представляет собой
размер цикла, n — счетчик (начинается с 0), а b —
значение смещения.

Здесь мы указываем цвет фона для всех элементов p, индекс которых равен
кратно 3, считая от последнего ребенка:

p: n-й-последний-ребенок (3n + 0)
{

фон: красный;
}

Попробуй сам »

.

CSS-селекторов

Селекторы CSS

Селекторы CSS

используются для «поиска» (или выбора) HTML-элементов, которые вы
хочу стиль.

Мы можем разделить селекторы CSS на пять категорий:

На этой странице описаны самые основные селекторы CSS.

Селектор элементов CSS

Селектор элементов выбирает элементы HTML на основе имени элемента.

Пример

Здесь все элементы

на странице будут
по центру, красный цвет текста:

п
{
выравнивание текста: центр;
красный цвет;
}

Попробуй сам »

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

Селектор id использует атрибут id элемента HTML для выбора определенного элемента.

Идентификатор элемента уникален на странице, поэтому селектор идентификатора
использовал к
выберите один уникальный элемент!

Чтобы выбрать элемент с определенным идентификатором, введите символ решетки (#), за которым следует
идентификатор элемента.

Пример

Правило CSS ниже будет применено к элементу HTML с:

# para1
{
выравнивание текста: центр;
красный цвет;
}

Попробуй сам »

Примечание: Имя идентификатора не может начинаться с цифры!

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

Селектор класса выбирает элементы HTML с определенным атрибутом класса.

Чтобы выбрать элементы с определенным классом, введите символ точки (.), За которым следует
название класса.

Пример

В этом примере все элементы HTML будут красными и выровнены по центру:

.center {
выравнивание текста: центр;
цвет: красный;
}

Попробуй сам »

Вы также можете указать, что класс должен воздействовать только на определенные элементы HTML.

Пример

В этом примере только элементы

с выравниванием по центру:

п.центр {
выравнивание текста: центр;
цвет: красный;
}

Попробуй сам »

HTML-элементов
также может относиться к более чем одному классу.

Пример

В этом примере элемент

будет оформлен в соответствии с
и на:

Этот абзац относится к двум классам.

Попробуй сам »

Примечание: Имя класса не может начинаться с цифры!

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

Универсальный селектор (*) выбирает весь HTML
элементы на странице.

Пример

Правило CSS ниже повлияет на каждый элемент HTML на странице:

*
{
выравнивание текста: центр;
цвет синий;
}

Попробуй сам »

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

Селектор группировки выбирает все элементы HTML с одинаковым стилем.
определения.

Посмотрите на следующий код CSS (элементы h2, h3 и p имеют одинаковые
определения стиля):

h2
{
выравнивание текста: центр;
цвет: красный;
}

h3
{

выравнивание текста: центр;
цвет: красный;
}

п.
{
выравнивание текста: центр;
цвет: красный;
}

Лучше сгруппировать селекторы, чтобы минимизировать код.

Чтобы сгруппировать селекторы, разделите каждый селектор запятой.

Пример

В этом примере мы сгруппировали селекторы из кода выше:

h2, h3, p
{

выравнивание текста: центр;
цвет: красный;
}

Попробуй сам »

Проверьте себя упражнениями!

Все простые селекторы CSS

с.

.

селекторов css — может ли CSS определить количество дочерних элементов у элемента?

Переполнение стека

1. Около

2. Продукты

3. Для команд

1. Переполнение стека
   Общественные вопросы и ответы

2. Переполнение стека для команд
   Где разработчики и технологи делятся частными знаниями с коллегами

3. Вакансии
   Программирование и связанные с ним технические возможности карьерного роста

4. Талант
   Нанимайте технических специалистов и создавайте свой бренд работодателя

5. Реклама
   Обратитесь к разработчикам и технологам со всего мира

6. О компании

.

Комбинаторы CSS

Комбинаторы CSS

Комбинатор — это то, что объясняет взаимосвязь между селекторами.

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

В CSS есть четыре разных комбинатора:

• Селектор потомков (пробел)
• дочерний селектор (>)
• Селектор соседних братьев (+)
• общий родственный селектор (~)

Селектор потомков

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

В следующем примере выбираются все элементы

внутри элементов