Css выбирает первую строку

Селекторы CSS

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

Необходимые знания:	Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML), и представление о том, как работает CSS (смотрите Введение в CSS).
Цель:	Узнать, как работают CSS-селекторы.

Что такое селекторы?

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

Ранее вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент h1 или класс .special .

В CSS селекторы определяются в спецификации CSS-селекторов; как и другие части CSS, нужно поддерживать их работу в браузерах. Большинство селекторов, которые вы встретите, определены в Спецификации селекторов 3 уровня, где вы сможете найти всю информацию о поддержке селекторов в браузерах.

Несколько селекторов

Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в лист селекторов: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка h1 и класса .special ; я могу написать их так:

h1  color: blue; > .special  color: blue; > 

А могу написать короче — просто отделив селекторы запятыми:

Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:

В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.

При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.

В примере ниже правило для селектора класса не будет работать, в то время как h1 будет стилизован.

h1  color: blue; > ..special  color: blue; > 

Но если мы объединим селекторы, правило не применится ни к h1 , ни к классу: оно считается недействительным.

Типы селекторов

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

Селекторы тегов, классов и идентификаторов

К этой группе относятся селекторы HTML-элементов, таких как .

К группе относятся и селекторы классов:

или селекторы идентификаторов (ID):

Селекторы атрибутов

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

или основываясь на значении атрибута:

Псевдоклассы, псевдоэлементы

К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс :hover , например, применяет правило, только если на элемент наведён курсор мыши

К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, ::first-line всегда выбирает первую строку внутри элемента (абзаца

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

Комбинаторы

И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент с помощью комбинатора дочерних элементов ( > ):

Продолжение

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

Справка о селекторах

В таблице ниже — доступные сейчас селекторы, а также ссылки к страницам, где рассказывается, как использовать каждый из них. Я также добавил ссылки на страницы MDN для каждого селектора, чтобы вы могли проверить, поддерживаются ли они браузерами.

Селектор	Пример	Руководство
Селектор по типу	h1	Селектор по типу
Универсальный селектор	*	Универсальный селектор
Селектор класса	.box	Селекторы классов
Селектор ID	#unique	Селекторы по ID
Селектор атрибутов	a[title]	Селекторы атрибутов
Селектор псевдоклассов	p:first-child	Псевдоклассы
Селектор псевдоэлементов	p::first-line	Псевдоэлементы
Селектор потомков	article p	Селектор потомков
Селектор дочерних элементов	article > p	Селектор дочерних элементов
Смежные селекторы	h1 + p	Смежные селекторы
Селектор братских элементов	h1 ~ p	Селектор братских элементов

В этом модуле

1. Каскад и наследование
2. CSS-селекторы
   • Селекторы по типу, классу и идентификатору
   • Селекторы атрибутов
   • Псевдоклассы, псевдоэлементы
   • Комбинации селекторов
3. Блоки в CSS
4. Фон и границы
5. Изменение направления текста
6. Перекрытие содержимого
7. Значения свойств CSS
8. Изменение размеров в CSS
9. Изображения, формы и прочие медиа-элементы
10. Стилизация таблиц
11. Отладка CSS
12. Организация CSS-кода

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

Источник

:nth-child()¶

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

Синтаксис¶

/* Выбирает каждый четвёртый элемент среди любой группы соседних элементов */ :nth-child(4n)  color: lime; > 

Значения¶

odd Все нечётные номера элементов. even Все чётные номера элементов. <число>Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке. Задаётся в виде an±b , где a и b — целые числа, а n — счётчик, который автоматически принимает значение 0 , 1 , 2 . Если a равно нулю, то оно не пишется и запись сокращается до b . Если b равно нулю, то оно также не указывается и выражение записывается в форме an . a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1 .

За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1 .

Результат для различных значений псевдокласса

Значение	Номера элементов	Описание
1	1	Первый элемент, является синонимом псевдокласса :first-child
5	5	Пятый элемент
2n	2, 4, 6, 8, 10,…	Все чётные элементы, аналог значения even
2n+1	1, 3, 5, 7, 9,…	Все нечётные элементы, аналог значения odd
3n	3, 6, 9, 12, 15,…	Каждый третий элемент
3n+2	2, 5, 8, 11, 14,…	Каждый третий элемент, начиная со второго
n+4	4, 5, 6, 7, 8,…	Все элементы, кроме первых трёх
-n+3	3, 2, 1	Первые три элемента
5n-2	3, 8, 13, 18, 23,…	—
even	2, 4, 6, 8, 10,…	Все чётные элементы
odd	1, 3, 5, 7, 9,…	Все нечётные элементы

Допустимо комбинировать два псевдокласса :nth-child для выбора диапазона элементов. Здесь будут выбраны все элементы со второго по пятый.

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

Примеры¶

Пример 1¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

 html> head> meta charset="utf-8" /> title>nth-childtitle> style> table  width: 100%; /* Ширина таблицы */ border-spacing: 0; /* Расстояние между ячейками */ > tr:nth-child(2n)  background: #f0f0f0; /* Цвет фона */ > tr:nth-child(1)  background: #666; /* Цвет фона */ color: #fff; /* Цвет текста */ > style> head> body> table border="1"> tr> td> td> td>2134td> td>2135td> td>2136td> td>2137td> td>2138td> tr> tr> td>Нефтьtd> td>16td> td>34td> td>62td> td>74td> td>57td> tr> tr> td>Золотоtd> td>4td> td>69td> td>72td> td>56td> td>47td> tr> tr> td>Деревоtd> td>7td> td>73td> td>79td> td>34td> td>86td> tr> tr> td>Камниtd> td>23td> td>34td> td>88td> td>53td> td>103td> tr> table> body> html> 

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

Пример 2¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

h3> code>span:nth-child(2n+1)code>, БЕЗ элемента code><em>code> в группе элементов-потомков. h3> p>Элементы 1, 3, 5 и 7 будут выбраны.p> div class="first"> span>Span 1!span> span>Span 2span> span>Span 3!span> span>Span 4span> span>Span 5!span> span>Span 6span> span>Span 7!span> div> br /> h3> code>span:nth-child(2n+1)code>, С элементом code><em>code> в группе элементов-потомков. h3> p> Элементы 1, 5 и 7 будут выбраны.br /> 3 используется в подсчёте потому что это элемент-потомок, но он не выбран потому что он не code><span>code>. p> div class="second"> span>Span!span> span>Spanspan> em>Это `em`.em> span>Spanspan> span>Span!span> span>Spanspan> span>Span!span> span>Spanspan> div> br /> h3> code>span:nth-of-type(2n+1)code>, С элементом code><em>code> в группе элементов-потомков. h3> p> Элементы 1, 4, 6 и 8 будут выбраны.br /> 3 не используется в подсчёте и не выбран, потому что это code><em>code>, но не code><span>code>, а code>nth-of-typecode> выбирает только потомков этого типа. Элемент code><em>code> полностью пропускается и игнорируется. p> div class="third"> span>Span!span> span>Spanspan> em>Это `em`.em> span>Span!span> span>Spanspan> span>Span!span> span>Spanspan> span>Span!span> div> 

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

html  font-family: sans-serif; > span, div em  padding: 5px; border: 1px solid green; display: inline-block; margin-bottom: 3px; > .first span:nth-child(2n + 1), .second span:nth-child(2n + 1), .third span:nth-of-type(2n + 1)  background-color: lime; > 

Источник