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 и приведенного алгебраического уравнения. Подумайте об 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. Поэтому когда дело доходит до его использования, и конечный результат сделан по технологии прогрессивного улучшения — вы можете смело использовать его для некоторых оформительских элементов, вроде расцветки строк таблицы. Однако не стоит применять его в более серьезных случаях. Например, полагаться на него в раскладке сайта или удалять правое поле из каждого третьего блока в сетке три на три, чтобы они вошли в ряд.

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

web-standards.ru

Псевдоклассы :first-child и first-of-type в чем разница?

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

<div id = "wrapper"> 	<p>Это абзац</p> 	<p>Это абзац</p> 	<p>Это абзац</p> 	<p>Это абзац</p> 	<p>Это абзац</p> </div>

Допустим, имеем такую разметку. Цель – обратиться к первому абзацу и стилизовать его отдельно от других без дописывания ему классов. Это можно сделать так:

#wrapper p:first-child{ 	Color: red; }  

  
 

Цвет первого абзаца станет красным, можете проверить.

#wrapper p:first-of-type{ 	color: red; }

Произойдет то же самое. Так в чем же разница? А она заключается в том, что псевдокласс first-of-type ищет и находит первый элемент родителя, учитывая его тип, а first-child ничего не ищет – он просто берет первый попавшийся элемент родителя и если это абзац, то применяет к нему стили. Если нет, то ничего не выберется и не применится.

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

<div id = "wrapper"> 	<img> 	<p>Это абзац</p> 	<p>Это абзац</p> 	<p>Это абзац</p> 	<p>Это абзац</p> 	<p>Это абзац</p> </div>

А теперь подумайте: сработает ли в этом случае first-of-type

? Да, потому что он учитывает тип элемента и выберет именно первый абзац, а не первый из вообще всех элементов. А first-child сработает? Попробуйте. Ничего не получится, потому что абзац не стоит первым элементом в родителе.

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

Еще важная деталь

Отсчет элементов идет именно от родительского элемента, поэтому если вы указали так:

Li:first-of-type{ 	… }

То выбран будет первые пункты списков в теге body (то есть на всей странице). Таким образом, в любом списке первый пункт будет оформляться по-другому.
Если же написать так:

#sidebar li:first-of-type{ 	… }

То выбраны будут только первые пункты списков в сайдбаре, то есть боковой колонке на нашем сайте.

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

Кстати, я забыл упомянуть о противоположных псевдоклассах – last-child (и last-of-type соответственно). Они позволяют выбрать последний элемент из родительского контейнера.

Где вы можете использовать на практике

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

Вам всего лишь нужно узнать название блока, в котором хранится нужный элемент. Допустим, имеем дело с популярными записями. Родительский контейнер имеет класс popular. Тогда пишем так:

.popular li:first-of-type{ 	Padding-top: 20px; }

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

Вот еще такой пример. У меня в теге body всего три одинаковых серых блока. Напишем так:

div:first-of-type{ 	transform: rotate(7deg); } div:last-of-type{ 	transform: rotate(-7deg); }

Первый блок получил наклон вправо, а последний – влево.
И это лишь примеры того, где и как могут применяться наши псевдоклассы.

Итог

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

dolinacoda.ru

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

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

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

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

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

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

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

 

 <!-- 1. простой список -->  <ul>   <li>Первый пункт</li>   <li>Второй пункт</li>   <li>Третий пункт</li>  </ul>    <!-- 2. абзац с форматированным текстом -->  <p>  Есть только <b>два способа</b> прожить жизнь. <i>Первый</i> - будто чудес не существует. <i>Второй</i> - будто кругом одни чудеса. <a href="#">Альберт Эйнштейн</a>  </p>  

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

<!-- 1. простой список -->   <li>Первый пункт</li>    <!-- 2. абзац с форматированным текстом -->  <b>два способа</b>  

Синтаксис

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

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

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

<ul>   <li>   Все хотят изменить <b>мир</b>, но никто не хочет измениться <b>сам</b>.    <i>Лев Толстой</i>   </li>   <li>   Тот, кто умеет, <b>тот делает</b>, кто не умеет - <b>тот учит других</b>.    <i>Бернард Шоу</i>   </li>  </ul>    

 

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

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

.class:first-child {}  [alt]:first-child {}  *:first-child {}

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

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

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

<ul>   <li>   <i>Лев Толстой</i>   Все хотят изменить <b>мир</b>, но никто не хочет измениться <b>сам</b>.    </li>   <li>   <i>Бернард Шоу</i>   Тот, кто умеет, <b>тот делает</b>, кто не умеет - <b>тот учит других</b>.    </li>  </ul>  

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

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

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

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

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

 

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

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

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

fb.ru

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

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

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

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

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

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

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

<!— 1. простой список —>
<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>

<!— 2. абзац с форматированным текстом —>
<p>
Есть только <b>два способа</b> прожить жизнь. <i>Первый</i> — будто чудес не существует. <i>Второй</i> — будто кругом одни чудеса. <a href=»#»>Альберт Эйнштейн</a>
</p>

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

<!— 1. простой список —>
<li>Первый пункт</li>

<!— 2. абзац с форматированным текстом —>
<b>два способа</b>

Синтаксис

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

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

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

<ul>
<li>
Все хотят изменить <b>мир</b>, но никто не хочет измениться <b>сам</b>.
<i>Лев Толстой</i>
</li>
<li>
Тот, кто умеет, <b>тот делает</b>, кто не умеет — <b>тот учит других</b>.
<i>Бернард Шоу</i>
</li>
</ul>

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

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

.class:first-child {}
[alt]:first-child {}
*:first-child {}

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

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

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

<ul>
<li>
<i>Лев Толстой</i>
Все хотят изменить <b>мир</b>, но никто не хочет измениться <b>сам</b>.
</li>
<li>
<i>Бернард Шоу</i>
Тот, кто умеет, <b>тот делает</b>, кто не умеет — <b>тот учит других</b>.
</li>
</ul>

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

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

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

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

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

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

ruud.ru

Дочерние селекторы CSS

В предыдущей статье мы рассказывали о родственных связях между элементами HTML-документа, в том числе и о дочерних элементах. Давайте посмотрим на примере, как эти связи можно использовать в CSS.

Представьте, что вам нужно присвоить стиль только тем тегам <p>, которые являются дочерними по отношению к <body>, не затрагивая остальные <p> (например, <p>, дочерние по отношению к <div>).
Как это сделать? Очень просто: создадим дочерний селектор:

  body > p {  	color: #333;  }  

Обратите внимание на символ > после body. С помощью него вы указываете, что стиль применяется исключительно для дочерних тегов <p> родителя <body>. Если символ убрать, то стиль применится абсолютно ко всем тегам <p>, которые находятся внутри тега <body>, хотя они могут и не являться для него дочерними.

Дополнительные псевдоклассы

В CSS3 существует ряд псевдоклассов для работы с дочерними элементами. Ниже приведено описание каждого из них, примеры использования, а также отличия между псевдоклассами вида «child» и «of-type».

• :first-child – с помощью этого псевдокласса можно применить стиль к указанному элементу веб-страницы, при условии, что он является первым дочерним элементом своего родителя;
• :last-child – стиль применяется к указанному элементу веб-страницы при условии, что он является последним дочерним элементом своего родителя;
• :nth-child – позволяет выбрать четные (even) и нечетные (odd) дочерние элементы; также с помощью данного псевдокласса можно стилизовать чередующиеся дочерние элементы, используя выражения вида an+b и числа;
• :only-child – применяется к дочернему элементу при условии, что тот является единственным ребенком у родителя;
• :first-of-type – стиль применяется к первому элементу указанного типа (даже если этот элемент не является первым дочерним для своего родителя и над ним находятся другие дочерние элементы других типов);
• :last-of-type – работает точно так же, как и предыдущий псевдокласс, с той лишь разницей, что стиль применяется к последнему элементу указанного типа;
• :nth-of-type – по принципу работы похож на :nth-child, но ориентируется на тип элемента;
• :only-of-type – применяется к дочернему элементу указанного типа при условии, что тот является у родителя единственным ребенком своего типа.

Пример использования :first-child, :last-child и :nth-child

  <!-- HTML -->  <div>  <p>Первый ребенок</p>  <p>Второй ребенок</p>  <p>Третий ребенок</p>  <table>  <tr>   <td>Нечетный номер</td>  </tr>  <tr>   <td>Четный номер</td>  </tr>  <tr>   <td>Нечетный номер</td>  </tr>  <tr>   <td>Четный номер</td>  </tr>  </table>  <p>Последний ребенок</p>  </div>  

Стиль CSS:

  /* CSS */  p:first-child {   font-weight: bold;   text-transform: uppercase;  }    p:last-child {   font-style: italic;   font-size: 0.8em;  }    p:nth-child(3) {   color: red;  }    tr:nth-child(odd) {   background-color: #A2DED0;  }    tr:nth-child(even) {   background-color: #C8F7C5;  }  

Мы написали CSS стиль для дочерних элементов простого HTML-документа, где тег <div> является родителем для тегов <p>, <table>. Разберем CSS по порядку.

Первое правило – p:first-child – касается элемента p: если он является первым дочерним элементом своего родителя, то к нему применяется стиль (в нашем случае это жирный шрифт и преобразование текста в верхний регистр). Если в данный HTML-код сразу после открывающего тега <div> добавить еще какой-нибудь тег (к примеру, <h2>), то стиль p:first-child уже не будет отображаться, поскольку <p> перестанет быть первым дочерним тегом. В данном случае первым дочерним элементом будет h2.

Всё то же самое происходит и с правилом p:last-child – стиль CSS будет применен к тегу <p> лишь тогда, когда он будет являться последним дочерним элементом своего родителя. Добавьте после <p> любой другой тег отличного типа и вы увидите, что правило p:last-child перестанет применяться.

Правило p:nth-child(3) работает для третьего дочернего тега <p> (об этом свидетельствует число 3 в скобках). Цвет шрифта для этого абзаца становится красным. Вы можете изменить число 3 (например, на 2) и посмотреть результат.

Правила tr:nth-child(odd) и tr:nth-child(even) работают для нечётных и чётных элементов tr соответственно. Вы можете увидеть результат на скриншоте, а также скопировать весь код и поэкспериментировать со стилями самостоятельно.

Пример использования :first-of-type, :last-of-type, :nth-of-type и :only-of-type

  <!-- HTML -->  <div>  <h2>Первый ребенок</h2>  <p>Второй ребенок</p>  <p>Третий ребенок</p>  <h3>Четвертый ребенок</h3>  <p>Пятый ребенок</p>  <h4>Последний ребенок</h4>  </div>  

Стиль CSS:

  /* CSS */  p:first-of-type {   color: violet;   text-transform: uppercase;  }    p:last-of-type {   font-style: italic;   font-size: 0.8em;  }    p:nth-of-type(3) {   color: red;  }    p:nth-of-type(odd) {   background-color: #A2DED0;  }    p:nth-of-type(even) {   background-color: #C8F7C5;  }    h3:only-of-type {   text-decoration: underline;  }  

Первое правило CSS, которое вы видите – это p:first-of-type. Что оно делает? Оно выбирает дочерний элемент типа p, который первым встречается у родителя. И не важно, на каком месте среди элементов других типов находится данный тег – на первом, втором или десятом. В этом и заключается отличие между псевдоклассами :first-child и :first-of-type.

Второе правило – p:last-of-type – применяет стиль к последнему дочернему элементу типа p. Как видно из HTML-кода, после последнего тега <p> есть еще и тег <h4>, присутствие которого никак не влияет на выполнение CSS-правила (в отличие от варианта с :last-of-child).

Следующее правило – p:nth-of-type(3) – изменяет цвет шрифта на красный. Применяется этот стиль к тегу <p>, который является третьим по счету элементом своего типа у родителя. На скриншоте вы видите, что красный цвет применяется к тегу <p>, который по факту является пятым ребенком тега <div>. Но если не брать во внимание элементы других типов, то получается, что тег <p> с красным шрифтом находится на третьем месте (среди тегов своего типа). Таким образом работает данное правило.

Правила p:nth-of-type(even) и p:nth-of-type(odd) работают аналогично: поскольку перед двоеточием указано имя p, то выбираются четные и нечетные дочерние элементы типа p и окрашиваются в заданные цвета. Остальные элементы пропускаются.

Последнее правило – h3:only-of-type – применяется к содержимому тега <h3>, делая текст подчеркнутым. Данный стиль работает лишь потому, что тег <h3> является единственным дочерним элементом своего типа. Если в HTML-код добавить еще один тег <h3>, стиль не будет применён.

Выводы

Следующая часть этой главы – о смежных и родственных селекторах.

idg.net.ua

Использование псевдокласса 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

Это один из самых известных примеров того, как авторы не понимают, как работает :first-child. Представленный в CSS2, псевдокласс class :first-child представляет самый первый дочерний элемент родительского. Это. Там очень распространенное заблуждение, что он выбирает, какой дочерний элемент является первым, чтобы соответствовать условиям, указанным остальной частью составного селектора. Из-за того, как работают селекторы (см. здесь для объяснения), это просто неверно.

Селектор 3-го уровня вводит псевдо-класс :first-of-type, который представляет собой первый элемент среди братьев и сестер его типа элемента. Этот ответ объясняет, с иллюстрациями, разницу между :first-child и :first-of-type. Однако, как и в случае с :first-child, он не смотрит на какие-либо другие условия или атрибуты. В HTML тип элемента представлен именем тега. В вопросе этот тип p.

К сожалению, не существует подобного псевдо-класса :first-of-class для сопоставления первого дочернего элемента данного класса. Один обход, который Lea Verou и я придумал для этого (хотя и совершенно независимо), сначала применить ваши желаемые стили ко всем вашим элементам с этим классом:

/*   * Select all .red children of .home, including the first one,  * and give them a border.  */ .home > .red {  border: 1px solid red; } 

… затем «отмените» стили для элементов с классом, которые приходят после первого, используя общий комбинированный блок ~ в главном правиле:

/*   * Select all but the first .red child of .home,  * and remove the border from the previous rule.  */ .home > .red ~ .red {  border: none; } 

Теперь только первый элемент с class="red" будет иметь границу.

Вот пример того, как применяются правила:

<div class="home">  <span>blah</span> <!-- [1] -->  <p class="red">first</p> <!-- [2] -->  <p class="red">second</p> <!-- [3] -->  <p class="red">third</p> <!-- [3] -->  <p class="red">fourth</p> <!-- [3] --> </div> 

• Правила не применяются; никакая граница не отображается.
  Этот элемент не имеет класса red, поэтому он пропустил.

• Применяется только первое правило; отображается красная рамка.
  Этот элемент имеет класс red, но ему не предшествуют какие-либо элементы с классом red в его родительском элементе. Таким образом, второе правило не применяется, только первое, а элемент сохраняет свою границу.

• Оба правила применяются; никакая граница не отображается.
  Этот элемент имеет класс red. Ему также предшествует хотя бы один другой элемент с классом red. Таким образом, применяются оба правила, а второе объявление border переопределяет первое, тем самым «отменяя» его, так сказать.

В качестве бонуса, хотя он был представлен в селекторах 3, общий синонимы-комбинатор на самом деле довольно хорошо поддерживается IE7 и новее, в отличие от :first-of-type и :nth-of-type(), которые поддерживаются только IE9. Если вам нужна хорошая поддержка браузера, вам повезло.

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

• Вы можете использовать это, чтобы обойти :first-of-type в IE7 и IE8, просто предоставив селектор типов вместо селектора классов (опять же, больше о его неправильном использовании здесь в следующем разделе):

  article > p { /* Apply styles to article > p:first-of-type, which may or may not be :first-child */ } article > p ~ p { /* Undo the above styles for every subsequent article > p */ } 

• Вы можете фильтровать селектора атрибутов или любые другие простые селекторы вместо классов.

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

Обратите внимание, что для того, чтобы это сработало, вам нужно заранее знать, какие стили по умолчанию будут для ваших других элементов sibling, чтобы вы могли переопределить первое правило. Кроме того, поскольку это связано с отменой правил в CSS, вы не можете добиться того же самого с помощью одного селектора для использования с API селекторов или Selenium Локаторы CSS.

Стоит отметить, что селектор 4 вводит расширение к нотации :nth-child() (первоначально совершенно новый псевдокласс класса :nth-match()), что позволит вам использовать нечто вроде :nth-child(1 of .red) вместо гипотетического .red:first-of-class. Будучи относительно недавним предложением, недостаточно совместимых реализаций для его использования на производственных площадках. Надеюсь, это скоро изменится. Тем временем обходной путь, который я предложил, должен работать в большинстве случаев.

Имейте в виду, что этот ответ предполагает, что вопрос ищет каждый первый дочерний элемент, который имеет данный класс. Для n-го совпадения сложного селектора по всему документу нет ни псевдо-класса, ни даже общего решения CSS, независимо от того, существует ли решение, в значительной степени зависит от структуры документа. jQuery предоставляет :eq(), :first, :last и больше для этой цели, но еще раз обратите внимание, что они работают по-разному, чем :nth-child() и др.. Используя API Selectors, вы можете использовать document.querySelector() для получения первого совпадения:

var first = document.querySelector('.home > .red'); 

Или используйте document.querySelectorAll() с индексом для выбора любого конкретного соответствия:

var redElements = document.querySelectorAll('.home > .red'); var first = redElements[0]; var second = redElements[1]; // etc 

---

Несмотря на то, что работает .red:nth-of-type(1) решение в исходном принятом ответе Philip Daubmeier (которое первоначально было написано Martyn, но с тех пор удаляется), он не ведет себя так, как вы ожидали.

Например, если вы хотите только выбрать p в исходной разметке:

<p class="red"></p> <div class="red"></div> 

… тогда вы не можете использовать .red:first-of-type (эквивалентно .red:nth-of-type(1)), потому что каждый элемент является первым (и единственным) одним из его типов (p и div соответственно), поэтому оба будет соответствовать селектору.

Когда первый элемент определенного класса также является первым его типом, псевдокласс будет работать, но это происходит только по совпадению. Такое поведение продемонстрировано в ответе Филиппа. В тот момент, когда вы вставите элемент того же типа перед этим элементом, селектор завершится с ошибкой. Принимая обновленную разметку:

<div class="home">  <span>blah</span>  <p class="red">first</p>  <p class="red">second</p>  <p class="red">third</p>  <p class="red">fourth</p> </div> 

Применение правила с помощью .red:first-of-type будет работать, но как только вы добавите еще один p без класса:

<div class="home">  <span>blah</span>  <p>dummy</p>  <p class="red">first</p>  <p class="red">second</p>  <p class="red">third</p>  <p class="red">fourth</p> </div> 

… селектор немедленно выйдет из строя, потому что первый элемент .red теперь является вторым элементом p.

qaru.site

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

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