Css второй элемент


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

12.0+ 9.0+ 3.5+ 4.0+ 9.6+ 3.2+

Описание

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

Синтаксис

  :nth-child(число) { свойства }  

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

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

  /* выбрать третий по счёту пункт списка */  ul li:nth-child(3) { color: red; }  

Всего есть два возможных ключевых слова: odd (нечётные) и even (чётные). Они позволяют выбирать дочерние элементы имеющие чётные или нечётные порядковые номера:


  /* выбрать все строки в таблице с нечётным порядковым номером */  tr:nth-child(odd) td { background-color: silver; }  

Часть выражения «an» вычисляет позиции дочерних элементов по следующей формуле: число*n, так как n — счётчик, вместо него при вычислении автоматически подставляются числовые значения начиная с 0 и далее значение каждый раз увеличивается на единицу больше предыдущего: 0,1,2,3 и т.д. Допустим нам необходимо выбрать каждый третий пункт списка, для этого нам надо написать всего лишь 3n:

  ul li:nth-child(3n) { color: red; }  

Таким образом пункты списка будут выбираться по следующей формуле:
3 * 0 = 0 — ничего не выбрано
3 * 1 = 3-ий пункт
3 * 2 = 6-ой пункт
и т.д.

Часть выражения «b» позволяет указать с какой позиции следует начинать выбор элементов. Допустим нам необходимо выбрать каждый третий пункт списка начиная со второго пункта в списке, для этого нам надо написать следующее выражение 3n + 2:

  ul li:nth-child(3n + 2) { color: red; }  

Таким образом пункты списка будут выбираться по следующей формуле:
(3 * 0) + 2 = 2-ой пункт
(3 * 1) + 2 = 5-ый пункт
(3 * 2) + 2 = 8-ой пункт
и т.д.


Пример:

  <!doctype html>  <html>   <head>   <meta charset="utf-8">   <title>Пример</title>   <style>   tr:nth-child(odd) td { background-color: silver; }   </style>   </head>   <body>     <table>   <tr> <td>текст</td> </tr>   <tr> <td>текст</td> </tr>   <tr> <td>текст</td> </tr>   <tr> <td>текст</td> </tr>   <tr> <td>текст</td> </tr>   <tr> <td>текст</td> </tr>   <tr> <td>текст</td> </tr>   <tr> <td>текст</td> </tr>   <tr> <td>текст</td> </tr>   <tr> <td>текст</td> </tr>   </table>     </body>  </html>  

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

puzzleweb.ru

:nth-last-of-type

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

Селектор :nth-last-of-type выглядит примерно так:

«Выражение» может быть представлено ключевыми словами even или odd, целым числом или формулой по типу an+b, где a и b — целые числа, положительные или отрицательные.


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

У меня есть маркированный список из 12 элементов. Посмотрим, как можно использовать :nth-child для выбора определенного элемента или набора элементов по шаблону:

Чтобы выбрать третий элемент списка, нужно указать li:nth-child(3). Чтобы выбрать все четные элементы, можно использовать ключевое слово even. И наоборот, можно использовать :nth-child(odd), чтобы выбрать все элементы с нечетным номером.

CSS nth child каждый 3 й — указываем li:nth-child(3n). Чтобы выбрать первые четыре элемента, используем li:nth-child(-n+4). Чтобы выбрать все, кроме первых четырех элементов, можно использовать li:nth-child(n+5).

Выражение an + b

Альтернативой использованию ключевого слова odd является использование выражения 2n+1. Но как это работает?

Когда выражение в формате an+b содержит отличные от ноля значения a и b, дочерние элементы разбиваются на группы. Если это выражение 2n+1, дочерние элементы разбиваются на группы по два. Каждому элементу в группе присваивается индекс, начиная с 1. Соответствующий элемент в каждой группе — это индекс номер b. В нашем примере это будет первый элемент.

Если выражение 3n+2, элементы группируются по три элемента, и второй элемент в каждой группе соответствует выражению.

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


Ключевое слово even в CSS nth child может быть выражено как 2n. В этом случае у нас нет значения b, поэтому выбирается каждый элемент группы с индексом a; 2n выбирает каждый второй элемент, 3n — каждый третий, 4n — каждый четвертый и так далее.

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

Мне больше нравится концепция поиска каждого n-ного элемента — каждого 2-го, 3-го или 4-го и т.д. А потом мне проще представить, что вторая часть выражения — это смещение.

В случае 2n+1 я читаю это выражение следующим образом: «Найти каждый второй элемент и переместить выделение вниз на 1».

Если выражение 3n-5, оно будет читаться так: «Найти каждый третий элемент и переместить выделение вверх на 5».

Другие селекторы :nth-child

:nth-child имеет соответствующий ему псевдокласс :nth-last-child, который работает наоборот.

li:nth-last-child(3n) начинает с последнего дочернего элемента и обрабатывает их в обратном направлении, сопоставляя каждый третий элемент с конца списка.

Этот псевдокласс менее распространен. Тем не менее, часто необходимо выбрать первый или последний дочерний элемент. Это можно сделать с помощью :nth-child(1) или :nth-last-child(1), но этот метод встречается не так часто, как псевдоклассы :first-child и :last-child. При этом только :first-child работает в IE8, а :last-child и :nth-селекторы — нет.


:nth-of-type

Что меня часто не удовлетворяет, так это то, что псевдокласс CSS nth child отбирает дочерние элементы по индексу и не учитывает тип элемента.

Рассмотрим следующий пример.

Есть раздел с заголовком, подзаголовком и несколькими абзацами. Я хочу, чтобы первый абзац немного выделялся с помощью увеличенного размера шрифта 1.5em.

Можно попробовать применить код section p:first-child, так как нужно задать дополнительный стиль для первого абзаца в этом разделе. Но это не сработает, поскольку первый дочерний элемент раздела — h1. В этом случае необходимо использовать селектор :first-of-type.

Существует целый ряд селекторов этого типа — :first-of-type, :last-of-type, :nth-of-type и :nth-last-of-type. Они ведут себя так же, как :nth-child, но отбирают n-ые экземпляры элементов определенного типа.

Эти селекторы довольно сложны, но они предоставляют большие возможности. Они поддерживаются всеми браузерами, начиная с IE9, в IE8 поддерживается только :first-child. В прошлом они не раз помогли мне решить несколько сложных задач.

Перевод статьи «AtoZ CSS Screencast: nth-child and nth-of-type» дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Как работает CSS-селектор nth-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.

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

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

www.css-tricks.ru

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

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

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


, даже в Internet Explorer.

web-standards.ru

<!DOCTYPE HTML> <html>  <head>  <meta charset="utf-8"> </head>  <body>   <input type="checkbox">  <input type="checkbox" checked>  <input type="text" id="message">   <h3 id="widget-title">Сообщения:</h3>  <ul id="messages">  <li id="message-1">Сообщение 1</li>  <li id="message-2">Сообщение 2</li>  <li id="message-3" data-action="delete">Сообщение 3</li>  <li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>  <li id="message-5" data-action="edit delete">Сообщение 5</li>  <li><a href="#">...</a></li>  </ul>    <a href="http://site.com/list.zip">Ссылка на архив</a>  <a href="http://site.com/list.pdf">..И на PDF</a>    <script>  // тестовая фу.  

box"]:not(:checked)', 1); // Найти все элементы с id=message или message-* test('[id|="message"]', 6); // Найти все элементы с id=message-* test('[id^="message-"]', 5); // Найти все ссылки с расширением href="...zip" test('a[href$=".zip"]', 1); // Найти все элементы с data-action, содержащим delete в списке (через пробел) test('[data-action~="delete"]', 2); // Найти все элементы, у которых ЕСТЬ атрибут data-action, // но он НЕ содержащит delete в списке (через пробел) test('[data-action]:not([data-action~="delete"])', 1); // Выбрать все чётные элементы списка #messages test('#messages li:nth-child(2n)', 3); // Выбрать один элемент сразу за заголовком h3#widget-title // на том же уровне вложенности test('h3#widget-title + *', 1); // Выбрать все ссылки, следующие за заголовком h3#widget-title // на том же уровне вложенности test('h3#widget-title ~ a', 2); // Выбрать ссылку внутри последнего элемента списка #messages test('#messages li:last-child a', 1); </script> </body> </html>

learn.javascript.ru

Значение и применение

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

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

CSS синтаксис:

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

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

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

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

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

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

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

 <!DOCTYPE html> <html> <head> 	<meta charset = "UTF-8"> 	<title>Псевдокласс :first-child</title> <style> /* групповой селектор, который выбирает каждый третий дочерний элемент <h2> своего родителя и каждый второй элемент <li> своего родителя */ h2:nth-child(3), li:nth-child(2) {  background-color: orange; /* устанавливаем цвет заднего фона */ } </style> </head> 	<body> 		<h2>Первый заголовок h2 тега body</h2> 		<ul> 			<li>один</li> 			<li>два</li> 			<li>три</li> 		</ul> 		<h2>Второй заголовок h2 тега body</h2> 		<article> 			<h2>Первый заголовок h2 тега article</h2> 			<ul> 				<li>один</li> 				<li>два</li> 				<li>три</li> 			</ul> 		</article> 	</body> </html>  

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

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

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

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

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

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

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

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

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

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

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

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

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

 td:nth-child(4n+2)  { background-color: lightblue; /* устанавливаем цвет заднего фона */ } 

Этот селектор означает, что каждая четвёртая ячейка таблицы (<td>) внутри строки, начиная со второй ячейки таблицы, будет стилизована:

  • 4n – каждый четвертый элемент.
  • 2 – с какого элемента начинать.

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

 td:nth-child(4n-1)  { background-color: lightblue; /* устанавливаем цвет заднего фона */ } 

Этот селектор означает, что каждая четвёртая ячейка таблицы (<td>) внутри строки, начиная с третьей ячейки таблицы (-1 ячейки нет по объективным причинам, поэтому происходит сдвиг влево), будет стилизована:

  • 4n – каждый четвертый элемент.
  • -1 – с какого элемента начинать.

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

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

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

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

basicweb.ru

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

www.dejurka.ru

Просмотров: 17 854

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

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

<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 это позиция элемента, по порядку, в котором он находится в коде.

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

Css второй элемент

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

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

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

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

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

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

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

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

Далее. Следующие уроки по CSS.

webgyry.info


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.