Кроме первого элемента css: Как выбрать все элементы кроме первого? — Хабр Q&A

Содержание

Псевдокласс :nth-last-child | CSS | WebReference

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

Синтаксис

Селектор:nth-last-child(odd | even | <число> | <выражение>) {...}

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

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

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

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

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

Табл. 1. Результат для различных значений псевдокласса
Значение	Номера элементов	Описание
1	1	Последний элемент, является синонимом псевдокласса :last-child.
5	5	Пятый элемент с конца.
2n	2, 4, 6, 8, 10,…	Все чётные элементы, начиная с конца; аналог значения even.
2n+1	1, 3, 5, 7, 9,…	Все нечётные элементы, начиная с конца; аналог значения odd.
3n	3, 6, 9, 12,…	Каждый третий элемент, начиная с конца.
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,…	Все нечётные элементы, начиная с конца.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>nth-last-child</title> <style> table { width: 100%; /* Ширина таблицы */ border-collapse: collapse; /* Убираем двойные границы */ border-spacing: 0; /* Расстояние между ячейками */ } td { border: 1px solid #333; /* Параметры рамки */ padding: 3px; /* Поля в ячейках */ border-left: 3px double #333; /* Граница слева */ } td:nth-last-child(2n+1) { background: #f0f0f0; /* Цвет фона */ } td:nth-child(1) { border: 1px solid #333; /* Параметры рамки */ background: #cfc; /* Цвет фона */ } </style> </head> <body> <table> <tr> <td> </td><td>2134</td><td>2135</td> <td>2136</td><td>2137</td><td>2138</td> </tr> <tr> <td>Нефть</td><td>16</td><td>34</td> <td>62</td><td>74</td><td>57</td> </tr> <tr> <td>Золото</td><td>4</td><td>69</td> <td>72</td><td>56</td><td>47</td> </tr> <tr> <td>Дерево</td><td>7</td><td>73</td> <td>79</td><td>34</td><td>86</td> </tr> <tr> <td>Камни</td><td>23</td><td>34</td> <td>88</td><td>53</td><td>103</td> </tr> </table> </body> </html>
В данном примере псевдокласс :nth-last-child используется для выделения цветом всех нечётных колонок, начиная с последней (рис.

1).
Рис. 1. Применение псевдокласса :nth-last-child к колонкам таблицы
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
— свойство полностью поддерживается браузером со всеми допустимыми значениями;
— свойство браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 06.08.2018
Редакторы: Влад Мержевич
Учебник CSS 3. Статья «Селекторы. Часть 2».

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

Многие термины, которые вы прочитаете в этой статье, будут использоваться в дальнейших статьях этого учебника, прошу Вас внимательно их изучить и понять. Понимание древовидной структуры документа Вам понадобится не только при изучении CSS, но и при изучении, например, клиентского JavaScript.

Древовидная структура HTML документа

Рассмотрим следующее изображение:

Рис. 8 Пример древовидной структуры HTML.
Любой HTML код имеет древовидную структуру, в которой первый используемый тег — <html> выступает предком (прародителем) всех остальных элементов, из него выходят такие элементы как <head> и <body>:

Рис. 8а Предок в HTML документе.
HTML элемент, расположенный внутри другого элемента является его потомком. Элемент <title> потомок <head>, а элемент <h3> и <p> на изображении потомки <body>.

Рис. 8б Потомки в HTML документе.
Обратите внимание на важный момент, что элемент <i> является потомком одновременно для элемента <p>, <body> и для <html>.

Рис. 8в Потомок для нескольких элементов.
Родительский элемент связан с другими элементами более низкого уровня и находится на один уровень выше их. Например, <html> элемент является родительский элементом для <head> и <body>, а элемент <p> является родительским для элемента <i>.

Рис. 8г Родительские элементы в HTML документе.
Элемент, подчиненный другому элементу более высокого уровня, является дочерним. На изображении ниже оба элемента <h3> и <p> являются дочерними по отношению к <body>, но элемент <i> при этом не является дочерним для элемента <body>, так как он расположен внутри тега <p>, и является дочерним именно для него.

Рис. 8д Дочерние элементы в HTML документе.
Дочерние элементы для одного и того же родительского элемента, называются элементами одного уровня (соседними элементами, или сестринскими элементами). Например, такие элементы как <head> и <body>, или <h3> и <p>.

Еще раз акцентирую ваше внимание на том, что сестринские элементы расположены на одном уровне в пределах одного родителя. К примеру, элементы <h3> и <title> являются просто элементами одного уровня, а не сестринскими элементами.

Рис. 8е Сестринские элементы в HTML документе.
И так, с родственными связями мы пока остановимся, у нас же тут не ток шоу с Андреем Малаховым, верно? Вернемся к селекторам потомков, которые, используя древовидную структуру HTML документа, позволяют форматировать вложенные элементы по нашему усмотрению.

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

В конце предыдущей статьи, мы с Вами уже рассматривали примеры с селекторами потомков, их основное назначение заключается в том, чтобы единообразно отформатировать элементы, которые расположены внутри других элементов (содержатся внутри других элементов).
Например, во всех заголовках <h3>, в которых находится текст, отражённый курсивом (элемент <i>), вы хотите выделить определённым цветом. Решение этого вопроса, надеюсь, для Вас выглядит вполне очевидно, и вы используете для этой задачи селектор потомков:
h3 i { color: red; }

Вместо h3 i в нашем случае можно воспользоваться и универсальным селектором h3 *, так как внутри элемента <h3> находится только один элемент, но если мы захотим, добавить еще какой-то элемент, то придется изменять стили.

У Вас может возникнуть вопрос: почему мы просто не создали селектор класса для i? Благодаря селектору потомка у нас отсутствует необходимость с использованием глобального атрибута class назначать каждому элементу <i> свой класс, что может значительно сэкономить наше время.

Рассмотрим этот пример:

<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Cелекторы потомков</title> <style> . test { background-color: lime; /* задаём цвет заднего фона */ color: white; /* задаём цвет шрифта*/ font-size: 30px; /*Указываем размер шрифта*/ height: 40px; /* указываем высоту элемента*/ text-align: center; /* горизонтальное выравнивание текста по центру */ } h3 i { color:red; /* задаём цвет шрифта*/ } </style> </head> <body> <h3 class = "test">Заголовок <i>второго</i> уровня</h3> <h3>Заголовок <i>второго</i> уровня</h3> <h3>Заголовок <i>второго</i> уровня</h3> </body> </html>

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

Результат нашего примера:
Рис. 9 Пример использования селектора потомков.
Думаю, Вы уже начали осознавать какие возможности даёт CSS в оформлении веб страниц, но это только начало нашего пути в изучении, давайте рассмотрим другие примеры, постепенно все более углубляясь в тонкости использования таблиц стилей на ваших страницах.

В следующем примере я разместили три ссылки (элементы <a>) внутри элемента маркированного списка (элемент <li>), и разместил еще одну ссылку внутри абзаца:

Рис. 10 Древовидная структура страницы.
При создании селектора потомков вы объединяете селекторы вместе согласно «ветви дерева» документа, помещая самого старшего родителя слева, а форматируемый элемент располагаете справа.

Селекторы, которые будут работать аналогично и выбирать элементы <a> внутри элементов <li>:

html body ul li a {блок объявлений} html ul li a {блок объявлений} html li a {блок объявлений} body ul li a {блок объявлений} body li a {блок объявлений} ul li a {блок объявлений} li a {блок объявлений}

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

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

li a { text-decoration: none; /* убираем декорирование текста (нижнее подчеркивание под ссылкой) */ font-size: 20px; /* устанавливаем размер шрифта */ }

Как вы понимаете, ссылка, помещённая внутри элемента <p> не будет отформатирована, для неё мы создадим свой стиль:

p a { color: #000; /* устанавливаем черный цвет текста */ background-color: yellow; /* устанавливаем цвет заднего фона */ }

Теперь соберем это в одном примере и посмотрим результат:

<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title> Декорирование ссылок с использованием селекторов потомков</title> <style> li a { text-decoration: none; /* убираем декорирование текста (нижнее подчеркивание под ссылкой) */ font-size: 20px; /* устанавливаем размер шрифта */ } p a { color: #000; /* устанавливаем черный цвет текста */ background-color: yellow; /* устанавливаем цвет заднего фона */ } </style> </head> <body> <p> Нажмите для перехода к поиску <a href = "http://yandex. ru"> Яндекс</a></p> <ul> <li><a href = "http://yandex.ru">Яндекс</a></li> <li><a href = "http://yandex.ru">Яндекс</a></li> <li><a href = "http://yandex.ru">Яндекс</a></li> </ul> </body> </html>

Результат нашего примера:
Рис. 11 Пример декорирования ссылок с использованием селекторов потомков.
Продвинутое использование селекторов потомка

Рассмотрим пример, который более приближен к текущим реалиям, а именно комбинирование селекторов класса, а не селекторов типа, как мы рассматривали в примерах выше.

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

Предлагаю каждого сотрудника поместить в отдельный контейнер (элемент <div>) и внутри контейнера отдельно стилизовать контактные данные о сотруднике:

<div class = "top-card"> /* создаем контейнер с классом top-card */ <img src = "nich. jpg"> /* добавляем фото сотрудника */ <p class = "name">Boris Britva</p> /* добавляем абзац с классом name (фамилия имя сотрудника) */ <p class = "phone">88005553535</p> /* добавляем абзац с классом phone (телефон сотрудника) */ <p>[email protected]</p> /* добавляем абзац с адресом электронной почты сотрудника */ </div>

Затем мы создаем стили для контейнера и селекторов потомков:

.top-card { /* выбирает контейнер с классом top-card */ border: 5px solid orange; /* создаем сплошную границу оранжевого цвета размером 5 пикселей */ width: 100px; /* задаем ширину элемента */ } .top-card img { /* выбирает все изображения (элемент <img>) внутри контейнера с классом top-card */ width: 100px; /* задаем ширину изображения */ height: 100px; /* задаем высоту изображения */ border-bottom: 1px solid; /* устанавливаем сплошную границу снизу размером 1 пиксель (черный цвет по умолчанию) */ } . top-card .name { /* выбирает элементы с классом name внутри контейнера с классом top-card */ color: blue; /* устанавливаем цвет текста */ } .top-card .phone { /* выбирает элементы с классом phone внутри контейнера с классом top-card */ color: red; /* устанавливаем цвет текста */ } .top-card p { /* выбирает все абзацы (элемент <p>) внутри контейнера с классом top-card */ text-align: center; /* горизонтальное выравнивание текста по центру */ }

Теперь соберем это в одном примере и посмотрим результат:

<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title> Стилизация карточки сотрудника</title> <style> .top-card { /* выбирает контейнер с классом top-card */ border: 5px solid orange; /* создаем сплошную границу оранжевого цвета размером 5 пикселей */ width: 100px; /* задаем ширину элемента */ } . top-card img { /* выбирает все изображения (элемент <img>) внутри контейнера с классом top-card */ width: 100px; /* задаем ширину изображения */ height: 100px; /* задаем высоту изображения */ border-bottom: 1px solid; /* устанавливаем сплошную границу снизу размером 1 пиксель (черный цвет по умолчанию) */ } .top-card .name { /* выбирает элементы с классом name внутри контейнера с классом top-card */ color: blue; /* устанавливаем цвет текста */ } .top-card .phone { /* выбирает элементы с классом name внутри контейнера с классом top-card */ color: red; /* устанавливаем цвет текста */ } .top-card p { /* выбирает все абзацы (элемент <p>) внутри контейнера с классом top-card */ text-align: center; /* горизонтальное выравнивание текста по центру */ } </style> </head> <body> <div class = "top-card"> /* создаем контейнер с классом top-card */ <img src = "nich. jpg"> /* добавляем фото сотрудника */ <p class = "name">Boris Britva</p> /* добавляем абзац с классом name (фамилия имя сотрудника) */ <p class = "phone">88005553535</p> /* добавляем абзац с классом phone (телефон сотрудника) */ <p>[email protected]</p> /* добавляем абзац с адресом электронной почты сотрудника */ </div> </body> </html>

Результат нашего примера:
Рис. 12 Пример стилизации карточки сотрудников с использованием селекторов потомков.
Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:
Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл с изображениями) в любую папку на вашем жестком диске:

Составьте следующую HTML страницу:

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

Дочерние селекторы в CSS
Вы здесь: Главная — CSS — CSS Основы — Дочерние селекторы в CSS

Я думаю, что многие знают о контекстных селекторах в CSS. Они используются чаще всего, однако, опытные верстальщики прекрасно знают, что иногда контекстные селекторы вносят определённые проблемы. Это проблема связана с тем, что в структуре элемента может быть много одинаковых элементов, вложенных друг в друга. И необходимо применить стиль не для всех вложенных элементов, а только к непосредственно дочернему элементу. Вот для этого и используются дочерные селекторы в CSS.

Чтобы проблема стала более понятной, давайте приведу небольшой пример. Пусть у нас есть такой HTML-код:
<div> <div> <p>Первый абзац</p> </div> <p>Второй абзац</p> </div>
И наша задача сделать красным только «Второй абзац«. Если мы напишем с использованием контекстного селектора:
.container p { color: red; }
То у нас станут красным оба абзаца, что нам совсем не нужно. Данная задача очень просто решается с помощью дочерних селекторов в CSS:
.container > p { color: red; }
Всё, теперь красным у нас стал только «Второй абзац«. Поскольку именно данный абзац является непосредственно дочерним для .container. А «Первый абзац» является дочерним для внутреннего div, таким образом, под действие дочернего селектора он не попадает.

Вот так легко решаются такие задачи, однако, есть один огромный минус дочерних селекторов в CSS — они не работают в браузерах Internet Explorer. По этой причине, их использование крайне нежелательно. Но если Вы вдруг где-нибудь встретите, то теперь Вы будете знать, что означает данный тип селекторов и что он делает.
Создано 20. 02.2012 09:54:47

Михаил Русаков

Предыдущая статья Следующая статья
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Кнопка:
<a href=»https://myrusakov. ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
Она выглядит вот так:

Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт

BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

CSS | : not (: last-child): после селектора — GeeksforGeeks

< HTML >

< голова >
< стиль >
дел {
ширина: 100 пикселей;
высота: 100 пикселей;
контур: сплошной 1 пиксель;
поле: 10 пикселей;
box-shadow: 0 0 5px черный;
фон: зеленый;
семейство шрифтов: 'Segoe UI', без засечек;
дисплей: гибкий;
flex-direction: столбец;
justify-content: space-around;
align-items: center;
}
. внутреннее деление {
ширина: 90%;
высота: 45%;
фон: белый;
маржа: 0 авто;
padding-left: 2px;
}
стиль >
голова >

< корпус >
< div class = "div" >
< div class = "внутренний div" > div >
< div class = "внутренний div" > div >
дел >
< div class = "div" >
< div class = "внутренний div" > div >
< div class = "внутренний div" > div >
дел >
< div class = "div" >
< div class = "внутренний div" > div >
< div class = "внутренний div" > div >
дел >
корпус >

CSS: not Selector | СамантаМинг. com
Вместо использования двух разных селекторов для назначения стиля, а затем другого для его отмены. Используйте селектор: not, чтобы выбрать каждый элемент, кроме тех, которые соответствуют аргументу, который вы передали 👍
Допустимые аргументы
В текущем черновике, CSS-селекторы уровня 3, вы можете передавать только простой селектор в качестве аргумента.
Простые селекторы:
Селектор типа
Универсальный селектор
Селектор атрибутов
Селектор классов
Селектор идентификаторов
Псевдо-класс
CSS Versioning M, как у JavaScript 9plaining Briefing версии.У CSS тоже есть разные версии. Однако, в отличие от ECMAScript, где все находится в одной большой категории (ES5, ES6, ES7), CSS работает по частям. Например, у них есть CSS-селекторов уровня 3 , CSS Grid Layout Level 1 и CSS Flexbox Level 1 . Селектор : not подпадает под спецификацию CSS Selectors Level 3. Следующее, над чем работает рабочая группа CSS, это ... намек, что следует после 3 ... ding ding, CSS Selectors Level 4 😜 Рэйчел Эндрю написала фантастическую статью, объясняющую уровни CSS, я также связал ее в Раздел ресурсов, так что прочтите, если вам интересно 🤓 Передача списка селекторов В текущей версии вы можете передавать только простые селекторы в качестве аргумента.Однако на уровне 4 селекторов CSS вы сможете передать список селекторов. Так здорово, верно 👏. И вот что будет выбрано Вложенные отрицания не разрешены 🙈 Следует отметить, что отрицания могут не быть вложенными. Итак, это нет-нет: : первый ребенок vs : первый тип Давайте начнем с определения их индивидуально: : первый ребенок выбирает только первый элемент, ЕСЛИ это первый ребенок своего родителя.Это означает, что если это не первый дочерний элемент родителя, ничего не будет выбрано. : first-of-type выберет первый элемент указанного вами типа. Даже если это не первый ребенок своего родителя. Таким образом, результат всегда будет отображаться, если вы используете этот селектор (если вы не выбрали элемент, которого вообще не существует). Хорошо, давайте рассмотрим несколько примеров. Все дочерние типы имеют один и тот же тип Поскольку все дочерние типы одинаковы, результат одинаков для обоих. Дети бывают разных типов НО , потому что p уже не первый ребенок. Если вы позвоните p: first-child , НИЧЕГО не будет выбрано. Выбор первого ребенка Итак, вам может быть интересно, а что, если меня не волнует тип, я просто хочу выбрать первого дочернего элемента его родителя. В этом случае вы можете сделать это: Другой аналогичный псевдокласс CSS И это понимание применимо к другим классам двоюродных братьев: : последний ребенок и : последний тип : nth-child и : nth-of-type : only-child и only-of-type Поддержка браузера Селектор : not поддерживается большинством современных браузеров и Internet Explorer 9 и выше. Совместимость с браузером @hkfoster: Еще пара однострочников, которые тоже делают это: li: nth-of-type (n + 2) li ~ li @vels_io: li + li {...} @ andr3: Это мощный инструмент, и, как и все остальное, следует использовать ответственно. В нашем примере вы можете обойтись простым: Resources CSS3: First-Of-Type Structural Selector Одна вещь, которая мне нравится в CSS3, - это новое добавление селекторов, которые позволяют нам нацеливать элементы специально, не полагаясь на class , id или другой атрибут элемента, и один, который мы рассмотрим здесь, это следующий селектор, : первый в своем классе . Селектор : first-of-type будет нацелен на первого дочернего элемента указанного элемента, например, приведенный ниже фрагмент будет нацелен на первые h3 на веб-странице. h3: first-of-type { / * объявление стиля * / } : first-of-type также равно : nth-of-type (1) , поэтому вместо того, чтобы выбирать только первых типа, мы можем дополнительно выбрать второй, третий и т. Д. на. Следующий фрагмент будет нацелен на второй элемент h3 на веб-странице. h3: nth-of-type (2) { / * объявление стиля * / } : первородящие против «первородные» Может показаться, что эти два селектора делают одно и то же, но это не так. Давайте посмотрим на следующую демонстрацию: Допустим, у нас есть пять элементов абзаца, заключенных в div , например: Праграф 1 Pragraph 2 Pragraph 3 Pragraph 4 Pragraph 5 Теперь мы хотим выбрать первый абзац с помощью селектора : first-child . p: first-child { отступ: 5 пикселей 10 пикселей; радиус границы: 2 пикселя; фон: # 8960a7; цвет: #fff; граница: 1px solid # 5b456a; } И, как мы и ожидали, первый абзац выбран успешно. Однако, когда мы добавляем другой элемент перед первым абзацем, допустим, h2 , как в приведенном ниже фрагменте: Заголовок 1 Праграф 1 Pragraph 2 Pragraph 3 Pragraph 4 Pragraph 5 первый абзац не будет выбран , так как первый дочерний элемент внутри div - это , больше не абзац , а h2 . Итак, это ситуация, когда селектор : first-of-type подходит для решения проблемы. p: first-of-type { отступ: 5 пикселей 10 пикселей; радиус границы: 2 пикселя; фон: # a8b700; цвет: #fff; граница: 1px solid # 597500; } Селектор «Последний» Если есть «первый» , то будет и «последний» . Обратными двух селекторов, которые мы обсуждали выше, являются следующие два селектора; : последний ребенок и : последний тип . Они в основном такие же, как и два выше, за исключением того, что они нацелены на последний дочерний элемент указанного элемента . Например, этот фрагмент ниже будет нацелен на последний абзац внутри div. p: last-child { отступ: 5 пикселей 10 пикселей; радиус границы: 2 пикселя; фон: # 8960a7; цвет: #fff; граница: 1px solid # 5b456a; } И этот фрагмент также будет нацелен на последний абзац в той же ситуации, что мы обсуждали выше; на этот раз за следует другой элемент . p: last-of-type { отступ: 5 пикселей 10 пикселей; радиус границы: 2 пикселя; фон: # a8b700; цвет: #fff; граница: 1px solid # 597500; } The Selectivizr Как и любая другая новая функция в CSS3, эти селекторы не поддерживаются в старых браузерах, в основном Internet Explorer от 6 до 8 , за исключением селектора : first-child , который был добавлен в CSS2. 1. Его родственник : last-child был добавлен только в CSS3. Итак, если все упомянутые здесь селекторы действительно необходимы для вашего веб-сайта, вы можете использовать библиотеку JavaScript под названием Selectivizr для эмуляции этих функций селектора CSS3. Selectivizr для своей работы зависит от других библиотек JavaScript, таких как jQuery, Dojo, Prototype и MooTools; и, судя по сравнительной таблице на официальном сайте, MooTools, похоже, может обрабатывать все селекторы. Итак, давайте включим его вместе с Selectivizr следующим образом: Условный комментарий выше гарантирует, что эти библиотеки будут загружены только в Internet Explorer 8 и ниже. Наконец, вы можете просмотреть демонстрацию по следующим ссылкам, и теперь она должна работать как в современных, так и в старых браузерах (IE8 и ниже). No related posts.