Css последний элемент: Псевдокласс :last-child | htmlbook.ru
Псевдокласс :last-child | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
Описание
Псевдокласс :last-child задает стилевое оформление последнего элемента своего родителя.
Синтаксис
элемент:last-child { … }
Значения
Нет.
Пример
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>last-child</title>
<style>
.block {
background: #7da7d9; /* Цвет фона */
color: #fff; /* Цвет текста */
}
.block :first-child {
padding: 10px; /* Поля вокруг текста */
}
.block :last-child {
background: #dda458 url(images/line.png) repeat-x; /* Параметры фона */
height: 5px; /* Высота блока */
}
</style>
</head>
<body>
<div>
<div>
При истечении возможности понимания вышеизложенной информации вы
имеете объективную возможность подать официальный запрос главному
субординатору локальной виртуальной вселенной.
</div>
<div></div>
</div>
</body>
</html>Результат примера показан на рис. 1. В данном примере псевдокласс :last-child применяется для определения стиля последнего тега <div>, расположенного внутри контейнера с именем класса block. Это позволило создать цветную полосу внизу блока без включения новых классов.
Рис. 1. Результат использования псевдокласса :last-child
Статьи по теме
Статьи по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Псевдокласс :nth-last-child | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.6+ | 2.1+ | 2.0+ |
Краткая информация
Версии CSS
Описание
Псевдокласс :nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-child отсчет ведется не от первого элемента, а от последнего.
Синтаксис
элемент:nth-last-child(odd | even | <число> | <выражение>) {…}
Значения
- 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 | Последний элемент, является синонимом псевдокласса :last-child. |
| 5 | 5 | Пятый элемент с конца. |
| 2n | 2, 4, 6, 8, 10 | Все четные элементы, аналог значения even. |
| 2n+1 | 1, 3, 5, 7, 9 | Все нечетные элементы, аналог значения odd. |
| 3n+2 | 2, 5, 8, 11, 14 | — |
| -n+3 | 3, 2, 1 | |
| 5n-2 | 3, 8, 13, 18, 23 | — |
| even | 2, 4, 6, 8, 10 | Все четные элементы. |
| odd | 1, 3, 5, 7, 9 | Все нечетные элементы. |
Пример
HTML5CSS3IECrOpSaFx
<!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 к колонкам таблицы
Псевдокласс :last-child | CSS | WebReference
Псевдокласс :last-child задаёт стиль последнего элемента в группе братских элементов (имеющих одного родителя).
В качестве примера рассмотрим следующий код HTML:
<article>
<h2>Роль цитокинов при дорсалгии</h2>
<p>Автор: Гордон Фримен, канд. физ.-мат. наук</p>
<p>Содержание статьи</p>
<address>Почта: [email protected]</address>
<p>Опубликовано: <time datetime="2018-11-27">27 ноября 2018</time></p>
</article>Псевдокласс :last-child без указания селектора выберет все последние элементы внутри <article> и установит для них красный цвет текста. Здесь последними идут <p> и <time> они и будут выбраны.
article :last-child { color: red; }При добавлении селектора к :last-child сперва берётся последний элемент, затем смотрится какого он типа. Если элемент совпадает с указанным селектором, то он будет выбран. Таким образом, выбирается элемент, если он удовлетворяет двум условиям одновременно: это последний элемент и это элемент указанного типа. Здесь красным цветом будет выделен абзац, поскольку последним идёт именно <p>.
article p:last-child { color: red; }Если вместо p использовать другой селектор, то ничего выбрано не будет, поскольку не выполняется условие «последний элемент это <h2>».
article h2:last-child { color: red; }Для выбора последнего элемента определённого типа используйте псевдокласс :last-of-type.
Вместо :last-child допустимо использовать :nth-last-child(1).
Синтаксис
Селектор:last-child { ... }Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>last-child</title> <style> .block { background: #7da7d9; /* Цвет фона */ color: #fff; /* Цвет текста */ } .block :first-child { padding: 10px; /* Поля вокруг текста */ } .block :last-child { background: #dda458 url(/example/image/line.png) repeat-x; /* Параметры фона */ height: 5px; /* Высота блока */ } </style> </head> <body> <div> <div> При истечении возможности понимания вышеизложенной информации вы имеете объективную возможность подать официальный запрос главному субординатору локальной виртуальной вселенной. </div> <div></div> </div> </body> </html>Рис. 1. Результат использования псевдокласса :last-child
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 06.08.2018
Редакторы: Влад Мержевич
CSS:: last-child on list item
Если ul имеет li элементов с несколькими классами, можно ли получить последний элемент определенного класса с помощью :last-child?
Например, рассмотрим следующее:
<ul>
<li>
<li>
<li>
<li>
<li>
</ul>
Я хочу добавить некоторый стиль к последнему li, имеющему класс «one» (т. е. третий в списке).
Я попробовал последовать за ним, но это не сработало.
ul.test li.one:last-child
Поделиться Источник user1355300 04 июля 2012 в 10:08
3 ответа
- Выберите recursive :last-child. Возможно?
В CSS можно ли рекурсивно выбрать все: last-child из тела? Учитывая это markup: <body> <div id=_1> <div id=_2></div> </div> <div id=_3> <div id=_4> <div id=_5></div> <div id=_6></div> </div> </div> </body> Я ищу…
- CSS: not (: last-child): после селектора
У меня есть список элементов, которые стилизованы следующим образом: ul { list-style-type: none; text-align: center; } li { display: inline; } li:not(:last-child):after { content:’ |’; } <ul> <li>One</li> <li>Two</li> <li>Three</li>…
20
Это пока невозможно .
-
:last-childвыбирает последнего дочернего элемента, независимо от имени тега и т. Д. - В качестве возможной альтернативы
:last-of-typeвыбирает последнее вхождение тега . Он игнорирует имя класса и т. Д.
Ваш единственный вариант-добавить определенное имя класса к этому элементу или использовать JavaScript для добавления этого имени класса.
Поделиться Rob W 04 июля 2012 в 10:14
5
Вместо того, чтобы давать класс для каждого li, вы можете перейти к n-му дочернему элементу, где вы можете назначить стиль по номеру li.
Если вы хотите дать отдельный css для вашего 3-го li, вам нужно написать
li:nth-child(3) {
color: green;
}
Поделиться Sowmya 04 июля 2012 в 11:44
Поделиться SVS 04 июля 2012 в 10:22
- Как использовать: nth-last-child в IE8?
У меня есть этот CSS ниже, но он не работает на IE8. Я знаю, что CSS3 не работает на IE8. Я хотел бы попробовать что-то вроде div:first-child + div + div , но это не работает. Я думаю, что это не работает из-за nth-last-child() . Я не могу перевести nth-last-child() с помощью смежного родственного…
- Clearfix ломает :last-child
Это странно, но когда я использую :last-child для своих элементов, а затем ставлю clearfix div В конце, он ломает last-child? Есть какие-нибудь идеи? HTML: <div> <a href=#>first child</a> <a href=#>second child</a> <a href=#>third child</a> <a…
Похожие вопросы:
CSS :last-child переопределяет все
css с :last-child переопределяет все остальные. .service-teaser .item:first-child { margin-left: 0px; margin-right: 50px; } .service-teaser .item:last-child { margin-left: 50px; margin-right: 0px; }…
Выберите :first-child или :last-child, который не содержит определенного класса
Предположим, у нас есть список из 5 элементов, и мы хотим применить некоторые конкретные стили к первому или последнему дочернему элементу. Но функциональность этого списка потребует скрыть…
Комбинируя CSS псевдоэлементов, «: после» the»: last-child»
Я хочу сделать grammatically correct списка, используя CSS. Это то, что у меня есть до сих пор: Теги <li> отображаются горизонтально с запятыми после них. li { display: inline;…
Выберите recursive :last-child. Возможно?
В CSS можно ли рекурсивно выбрать все: last-child из тела? Учитывая это markup: <body> <div id=_1> <div id=_2></div> </div> <div id=_3> <div id=_4> <div…
CSS: not (: last-child): после селектора
У меня есть список элементов, которые стилизованы следующим образом: ul { list-style-type: none; text-align: center; } li { display: inline; } li:not(:last-child):after { content:’ |’; } <ul>…
Как использовать: nth-last-child в IE8?
У меня есть этот CSS ниже, но он не работает на IE8. Я знаю, что CSS3 не работает на IE8. Я хотел бы попробовать что-то вроде div:first-child + div + div , но это не работает. Я думаю, что это не…
Clearfix ломает :last-child
Это странно, но когда я использую :last-child для своих элементов, а затем ставлю clearfix div В конце, он ломает last-child? Есть какие-нибудь идеи? HTML: <div> <a href=#>first…
non-last children применяет стиль CSS, определенный следующим образом :last-child
Я только что обнаружил, что если класс CSS определяется селектором children, например ‘:last-child’, то не последние дети будут применены к классу неожиданно. span.item-это тоже дитя div.list, на…
как выбрать элементы last-child или first-child только в parent? (css — html)
У меня проблема с выбором элемента last-child ! Я создал страницу примерно так для navbar: <nav> <ul> <li><a href=#>list numeber 1</a></li> <li><a…
CSS Susy Gallery-центр последнего ряда с nth-last-child
У меня есть 4 столбца Susy CSS gallery grid, которые могут содержать любое количество блоков. Если в последней строке меньше 4 блоков, мне нужно, чтобы она была центрирована. Использование этого…
last-child() | HTML и CSS с примерами кода
Псевдокласс :nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-child отсчёт ведётся не от первого элемента, а от последнего.
Синтаксис
element:nth-last-child(an + b) {
/* стили */
}
Значения
odd- Все нечётные номера элементов, начиная с конца.
even- Все чётные номера элементов, начиная с конца.
<число>- Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с
1, это соответствует последнему элементу в списке. <выражение>- Задаётся в виде
an±b, гдеaиbцелые числа, аn— счётчик, который автоматически принимает значение 0, 1, 2… Еслиaравно нулю, то оно не пишется и запись сокращается доb. Еслиbравно нулю, то оно также не указывается и выражение записывается в формеan.aиbмогут быть отрицательными числами, в этом случае знак плюс меняется на минус, например:5n-1. - За счёт использования отрицательных значений
aиbнекоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с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,… | Все нечётные элементы, начиная с конца. |
Спецификации
Примеры
Пример 1
В данном примере псевдокласс :nth-last-child используется для выделения цветом всех нечётных колонок, начиная с последней.
<!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>
Пример 2
См. также
Ссылки
Псевдоклассы nth-child и nth-last-child CSS
Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в родительском элементе. В значении может быть указан как порядковый номер элемента:
ul li:nth-child(1) {...}
Так и выражение, которое задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2 и т.д.
:nth-child(3n+2) или :nth-child(-n+3)
Также доступны значении odd и even, которые определяют четные и нечетные элементы.
Псевдокласс :nth-last-child делает все тоже самое, только с конца списка элементов.
Примеры использования у списка <ul>:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
...
<li>30</li>
</ul>1
Нечётные
Все нечётные номера элементов: 1, 3, 5, 7…
ul li:nth-child(odd) {
background: skyblue;
}
/* или */
ul li:nth-child(2n+1) {
background: skyblue;
}2
Чётные
Чётные номера элементов: 2, 3, 6, 8…
ul li:nth-child(even) {
background: skyblue;
}
/* или */
ul li:nth-child(2n) {
background: skyblue;
}3
Определенные номера
Пример группировки псевдоклассов и выбор элементов 2, 4, 6, 9.
ul li:nth-child(2), ul li:nth-child(4), ul li:nth-child(6), ul li:nth-child(9) {
background: skyblue;
}4
Каждый третий элемент
Элементы 3, 6, 9, 12…
ul li:nth-child(3n) {
background: skyblue;
}5
Один через три
Элементы 1, 5, 9, 13…
ul li:nth-child(4n+1) {
background: skyblue;
}6
Два через два
Элементы 1, 2, 5, 6, 9, 10…
ul > li:nth-child(4n+1), ul li:nth-child(4n+2) {
background: skyblue;
}7
Два через три
Элементы 1, 2, 6, 7, 11, 12…
ul > li:nth-child(5n+1), ul li:nth-child(5n+2) {
background: skyblue;
}8
Три через три
Элементы 1, 2, 3, 7, 8, 9…
ul > li:nth-child(6n+1), ul li:nth-child(6n+2), ul li:nth-child(6n+3) {
background: skyblue;
}9
Первые десять
ul li:nth-child(-n+10) {
background: skyblue;
}10
Диапазон
C третьего по пятнадцатый:
ul li:nth-child(n+3):nth-child(-n+15) {
background: skyblue;
}11
Все, после десятого
ul li:nth-child(n+11) {
background: skyblue;
}12
Все, кроме последнего
ul li:nth-last-child(n+2) {
background: skyblue;
}13
Последний элемент
ul li:nth-last-child(1) {
background: skyblue;
}14
Последние три
ul li:nth-last-child(-n+3) {
background: skyblue;
}Псевдо-класс :nth-last-child(n) | CSS селектор
Поддержка браузерами
| 12.0+ | 9.0+ | 3.5+ | 4.0+ | 9.6+ | 3.2+ |
Описание
Псевдо-класс :nth-last-child(n) применяет заданный стиль к элементу, который является «n» дочерним элементом, заданного типа, считая от последнего элемента(независимо от его типа) своего родителя.
n — может быть числом, ключевым словом или формулой.
Пример формулы (an + b):
p:nth-last-child(3n+0) { color:red; }a — представляет собой цикл, n — счетчик (начинается с 0) и b — это значение смещения, указывающее с какого элемента, отсчитывая от последнего, начнется цикл.
Ключевые слова odd(нечетные) и even(четные), могут быть использованы в соответствии с дочерними элементами, индекс которых составляет четное или нечетное значение (индекс последнего дочернего элемента начинается с 1):
p:nth-last-child(odd) { color:#ff0000; }Пример:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
p:nth-last-child(2) {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<p>Первый абзац.</p>
<p>Второй абзац.</p>
<p>Третий абзац.</p>
<div><p>Первый абзац.</p><p>Второй абзац.</p></div>
</body>
</html>
Результат данного примера:
Первый абзац.
Второй абзац.
Третий абзац.
Первый абзац.
Второй абзац.
: последний ребенок | CSS-уловки
Селектор : last-child позволяет выбрать последний элемент непосредственно внутри содержащего его элемента. Он определен в спецификации CSS Selectors Level 3 как «структурный псевдокласс», что означает, что он используется для стилизации контента на основе его отношений с родительским и родственным контентом.
Предположим, у нас есть статья и мы хотим уменьшить последний абзац, чтобы он служил завершением содержания (например, примечание редактора):
<статья>
Lorem ipsum...
Долор сиди амет ...
Consectetur adipisicing ...
Последний абзац ...
Вместо использования класса (например, .last ) мы можем использовать : last-child , чтобы выбрать его:
p: last-child {
размер шрифта: 0,75em;
} Использование : last-child очень похоже на : last-of-type , но с одним критическим отличием : он менее специфичен.: last-child будет пытаться сопоставить только самый последний дочерний элемент родительского элемента, в то время как last-of-type будет соответствовать последнему вхождению указанного элемента, даже если он не является последним в HTML . В приведенном выше примере результат будет таким же, только потому, что последний дочерний элемент article также оказывается последним элементом p . Это раскрывает мощь : last-child : он может идентифицировать элемент по отношению ко всем его братьям и сестрам, , а не только братьям и сестрам того же типа .
Более полный пример ниже демонстрирует использование : last-child и связанного селектора псевдокласса : first-child .
Другие ресурсы
Поддержка браузера
| Хром | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Любая | 3.2+ | Любая | 9.5+ | 9+ | Любая | Любая |
: last-child был представлен в модуле CSS Selectors Module 3, что означает, что старые версии браузеров не поддерживают его. Однако поддержка современных браузеров безупречна, а новые псевдоселекторы широко используются в производственных средах. Если вам нужна более старая поддержка браузера, используйте polyfill для IE или используйте эти селекторы некритическими способами, например, с прогрессивным улучшением, что рекомендуется.
CSS Выбрать первый / последний элемент, имеющий специальный класс
Часто в наших веб-проектах мы сталкиваемся с необходимостью выбрать конкретный или первый или последний элемент группы элементов, имеющих один и тот же класс.Мы проиллюстрируем это на примере создания простой шкалы прогресса веб-разработки.
Мы разделим весь процесс разработки на следующие пять этапов: 1) Планирование , 2) Проектирование , 3) Разработка , 4) Контроль качества / тестирование и 5) Запуск .
Разметка устроена следующим образом. Тексты вехи заключены в элементы , которые являются братьями и сестрами, и все они имеют общий класс вехи .
Планирование
Проектирование
Разработка
QA / Тестирование
Запуск
Элементы перемещаются влево, а индикатор выполнения вехи устанавливается горизонтально. Придаем цвет фонам вех ().Вот CSS.
.milestone-wrapper {
высота: 30 пикселей;
маржа: 15px 0;
выравнивание текста: слева;
ширина: 100%;
}
.milestone-wrapper .milestone {
цвет фона: # 1abc9c;
граница справа: сплошная 3px #fff;
цвет: #fff;
плыть налево;
семейство шрифтов: моноширинный;
размер шрифта: 12 пикселей;
маржа: 0;
отступ: 10 пикселей 0;
выравнивание текста: центр;
ширина: 19%;
}
Теперь предположим, что нам нужно округлить границы левой и правой стороны первой и последней вех или установить отдельный цвет для текущей вехи, тогда нам нужно сделать выбор.Первый элемент с этапом класса можно выбрать с помощью селектора: first-of-type, а последний элемент класса с этапом можно выбрать с помощью: last-of -тип селектор.
Мы используем два вышеуказанных селектора, чтобы округлить границы первой и последней контрольных точек. Мы добавляем еще два правила CSS следующим образом.
.milestone-wrapper .milestone: first-of-type {
радиус границы: 15 пикселей 0 0 15 пикселей;
}
.milestone-wrapper .milestone: last-of-type {
радиус границы: 0 15px 15px 0;
}
Вы также можете использовать вместо них селекторы nth-of-type (1) и nth-last-of-type (1) , и они дадут тот же эффект.
.milestone-wrapper .milestone: nth-of-type (1) {
радиус границы: 15 пикселей 0 0 15 пикселей;
}
.milestone-wrapper .milestone: nth-last-of-type (1) {
радиус границы: 0 15px 15px 0;
}
Теперь предположим, что вы хотите выбрать текущую веху и выделить ее фон другим цветом.Это, конечно, может быть любой из пяти. Чтобы выбрать элемент n th с этапом класса , мы выбираем селектор nth-of-type () . Предположим, что текущая веха - Развитие , тогда ее можно выбрать с помощью селектора nth-of-type (3) .
.milestone-wrapper .milestone: nth-of-type (3) {
цвет фона: # f9ca24;
}
CSS: селектор последнего дочернего элемента
В этом руководстве по CSS объясняется, как использовать селектор CSS под названием : last-child с синтаксисом и примерами.
Описание
Селектор CSS: last-child позволяет выбрать элемент, который является последним дочерним элементом в пределах своего родителя.
Синтаксис
Синтаксис CSS-селектора: active:
элемент: last-child {style_properties} Параметры или аргументы
- элемент
- Последний элемент этого типа в родительском элементе.
- style_properties
- Стили CSS, применяемые к последнему дочернему элементу.
Совместимость с браузером
Селектор CSS: last-child имеет базовую поддержку в следующих браузерах:
- Хром
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer 7+ (IE 7+)
- IE Телефон 7+
- Opera 9.5+
- Opera Mobile 10+
- Safari (WebKit)
- Safari Mobile
Пример
Мы обсудим селектор: last-child ниже, исследуя примеры того, как использовать этот селектор в CSS для применения стиля к последнему элементу.
С тегом
Давайте посмотрим на пример CSS: last-child, в котором мы применяем селектор: last-child к тегу .
CSS будет выглядеть так:
span: last-child {цвет: красный; font-weight: жирный; } HTML будет выглядеть так:
Вот 2 сайта: techonthenet.com и checkyourmath.com .
Результат будет выглядеть следующим образом (селектор: last-child будет стилизовать теги следующим образом):
В этом примере CSS: last-child текст "checkyourmath.com ", который находится в последнем теге , будет отображаться как красный жирный текст. Текст в первом теге не будет стилизован селектором: last-child.
С тегом
Давайте посмотрим на пример CSS: last-child, в котором мы применяем селектор: last-child к тегу
.
CSS будет выглядеть так:
p: last-child {цвет: синий; } HTML будет выглядеть так:
Это первый абзац, написанный techonthenet.com.
Это последний абзац, написанный techonthenet.com.
Результат будет выглядеть следующим образом (селектор: last-child будет стилизовать теги
следующим образом):
В этом примере CSS: last-child цвет текста в последнем теге
будет синим. Первый тег
не будет стилизован селектором: last-child.
С тегом
Давайте посмотрим на пример CSS: last-child, в котором мы применяем селектор: last-child к тегу
CSS будет выглядеть так:
tr: last-child {background: yellow; } HTML будет выглядеть так:
<таблица>
Заголовок столбца 1
Заголовок столбца 2
techonthenet.com
Технический справочный сайт
checkyourmath.com
Сайт математических вычислений
bigactivities.com
Детский сайт
Результат будет выглядеть следующим образом (селектор: last-child будет стилизовать теги
В этом примере CSS: last-child последняя строка (т.е. последний тег
CSS | : not (: last-child): after Selector - GeeksforGeeks
< html >
< > голова < style >
div {
width: 100px;
высота: 100 пикселей;
контур: сплошной 1 пиксель;
поле: 10 пикселей;
box-shadow: 0 0 5px черный;
фон: зеленый;
font-family: 'Segoe UI', без засечек;
дисплей: гибкий;
flex-direction: столбец;
justify-content: space-around;
align-items: center;
}
.внутреннее деление {
ширина: 90%;
высота: 45%;
фон: белый;
маржа: 0 авто;
padding-left: 2px;
}
.div .inner-div: not (: last-child): после {
content: 'not in the bottom div';
}
стиль >
головка >
0003
< div класс = "div" >
< div класс / "внутренний " дел >
< дел класс = "внутреннее деление" > дел > 000 000 div >
< div класс = «div» >
< div класс = "внутренний div" > div >
< div класс "inner-div" > div >
div >
< div class class class " >
< div класс = " внутренний div " > div >
класс = "внутренний div" > div > div > 9000 5 body >
html >
Расширенные селекторы CSS для общих сценариев
CSS странный.Он не похож на любой другой язык, который используют веб-разработчики, но он важен для визуального представления веб-сайта - той части, с которой взаимодействуют пользователи. В своей основной форме CSS прост. Например, background-color: red означает, что фон будет красного цвета. Тем не менее, как скажет вам любой, кто работал с большой базой кода CSS, она может быстро стать очень сложной и запутанной.
CSS Grid, BEM, Dart Sass, всегда есть что узнать о CSS. Это потрясающе! Вместо того чтобы смотреть на то, что нового, давайте сосредоточимся на фундаментальном строительном блоке CSS - селекторе.Благодаря лучшему пониманию селектора и того, как его использовать более продвинутыми способами, вы можете решать распространенные сценарии с меньшим количеством кода и более чистым CSS.
Что такое селектор?
Давайте удостоверимся, что мы на одной странице. Селектор CSS - это то, как вы можете указать браузеру, к какому элементу применить свойства. Они могут быть общими и применяться к большой группе элементов или быть более конкретными и применяться только к одному элементу HTML. Есть пять типов селекторов:
- Простые селекторы для выбора фрагментов HTML, например
div , #id или .класс - Селекторы комбинатора, основанные на кодовых отношениях, таких как «дочерний»
p> div или «смежный родственник» div + div - Селекторы псевдокласса для выбора определенного состояния элемента, такого как
: hover , : first-child или : nth-of-type - Селекторы псевдоэлементов для выбора определенных частей элемента, такого как
:: после , :: выбор или :: первая буква .Обратите внимание, как они всегда используют нотацию с двойным двоеточием :: по сравнению с селекторами псевдоклассов, которые используют одно двоеточие - Селекторы атрибутов для выбора элементов с определенными атрибутами, такими как (
[class | = "class-name"] , [type = "text"] или [target]
Если два отдельных селектора используются для объявления стиля для одного и того же элемента, более конкретный селектор победит вне зависимости от их порядка в вашем файле CSS. Например, селектор класса .имя класса является более конкретным, чем общий селектор элементов HTML, например span . Если вам нужно вспомнить, как браузеры решают, какие стили CSS применять, также известный как каскад CSS, попробуйте этот тест.
Теперь, когда мы понимаем, что такое селекторы, давайте рассмотрим, как их эффективно использовать. Вы можете воспользоваться преимуществами менее известных селекторов и даже комбинировать их, чтобы уменьшить количество необходимого кода! Вот еще несколько продвинутых селекторов, которые я использую в своем CSS.
: n-й-последний-ребенок (-n + 2)
Существует множество селекторов псевдокласса CSS, которые можно использовать для выбора элемента из группы связанных элементов или дочерних элементов родительского элемента.
<родитель>
<ребенок>
<ребенок>
Здесь : первый ребенок , : nth-ребенок , : nth-of-type , и этот список можно продолжить. Эти селекторы становятся еще более мощными, если они превращаются в выражения с использованием чисел, счетчика n , нечетных или четных . Вы можете выполнять математические вычисления, чтобы выбрать практически любое количество элементов в группе. Например, n - это способ создания алгебраических выражений.Таким образом, (2n + 4) приравнивается к (2 * n) +4 , который выберет все остальные элементы, начиная с четвертого:
(2 * 0) +4 = 4
(2 * 1) +4 = 6
(2 * 2) +4 = 8
(2 * 4) +4 = 10
Это полезно во многих сценариях. Например, вам когда-нибудь нужно было стилизовать только два последних элемента в списке? Вы можете добавить класс к этим двум элементам, что приведет к увеличению количества HTML и CSS, или вы можете использовать один селектор CSS, например:
.item: nth-last-child (-n + 2)
Вы можете прочитать этот селектор как «выберите два последних дочерних элемента .товар ». Глядя на то, как это работает, -n + 2 равняется (-0 + 2) = 2 или предпоследнему элементу, тогда (-1 + 2) = 1 или последнему элементу, затем ( -2 + 2) = 0 , который ничего не выбирает, затем (-3 + 2 = -1) , который, опять же, ничего не выбирает, и так далее для общего количества дочерних элементов. Выбраны только два элемента из-за отрицательного знака перед n , который вызывает обратный отсчет. Если вы хотите выбрать последние три элемента, -n + 3 сделает именно это.Это позволяет нам выбирать эти элементы, ничего не добавляя в HTML!
См. Демонстрацию селектора Pen
-: nth-last-child (-n + 2) Эндрю Спенсера (@iam_aspencer)
на CodePen.
: not (: last-child)
Чтобы продолжить последний пример, вы можете объединить : last-child с селектором : not . Это может помочь в сценариях, где последний элемент в группе имеет другой стиль. На веб-сайтах часто требуется список элементов с небольшим промежутком между ними.Распространенной проблемой этих сценариев является необходимость удалить интервал под последним элементом в группе.
Часто с помощью CSS кажется естественным сначала стилизовать наиболее распространенный сценарий, а затем , а затем учитывать любые отдаленные сценарии с более конкретным селектором. Затем стили более конкретного селектора переопределят стили более общего селектора. Что в нашем примере может привести к примерно такому результату: .image {
нижнее поле: 2 бэр;
&:последний ребенок {
нижнее поле: 0;
}
} Или вы могли бы добавить в HTML совершенно новый класс, используя структуру BEM CSS.Что даст вам это:
.image {
нижнее поле: 2 бэр;
}
.image - last {
нижнее поле: 0;
} Оба пути приводят к семи строкам кода и переопределяющему свойству. Не страшно, но если вы думаете о своем CSS как о языке программирования и «программируете» логику прямо в селекторе, вы можете уменьшить CSS до этого:
.image: not (: last-child) {
нижнее поле: 2 бэр;
} Читая селектор выше, он говорит: «выберите изображение, которое не является последним дочерним элементом.«Три строки кода и никаких замещающих стилей - неплохо!
См. Демонстрацию селектора Pen
-: nth-last-child (-n + 2) Эндрю Спенсера (@iam_aspencer)
на CodePen.
элемент: hover + смежный брат
Давайте посмотрим на другой сценарий - состояния наведения. Иногда вам нужно настроить элемент, отличный от элемента, на который наведен курсор. В JavasScript это довольно просто, поскольку JavaScript упрощает поиск определенного элемента, что также называется обходом DOM.Однако часто при правильной структуре HTML вам нужен только CSS.
С помощью CSS вы можете использовать селекторы комбинаторов, такие как .parent> .child или .element + .general-sibling , для нацеливания на различные элементы. Единственное, чего не может сделать CSS, - это настроить таргетинг на элемент, являющийся родителем элемента, на который наведен курсор. Вот диаграмма того, на что может ориентироваться CSS:
Элемент, который завис
Это дочерний элемент, CSS может стилизовать его
Это родственник, CSS может стилизовать его
"Родительский" не может быть стилизован с помощью CSS, когда наведен
Как вы могли бы использовать мощный селектор братьев и сестер? Если у вас есть два элемента-близнеца и вам нужно стилизовать состояние зависания второго элемента, вы можете сделать это следующим образом:
См. Демонстрацию переключателя Pen
-: hover + sibling от Эндрю Спенсера (@iam_aspencer)
на CodePen.
Родственный селектор также можно использовать для полей формы. С селектором label: hover + input , взаимодействие с элементом можно использовать для выделения , который является родственником после .
См. Демонстрацию переключателя Pen
-: hover + sibling, автор Эндрю Спенсер (@iam_aspencer)
на CodePen.
Ваша очередь
В следующий раз, когда вы решите, что CSS - это неполноценный язык, подумайте еще раз.Это просто ... другое. И это может расстраивать или вознаграждать, в зависимости от вашей точки зрения. Прежде чем отказываться от CSS и прибегать к добавлению HTML или взорвать все с помощью JavaScript, взгляните на селекторы и свойства CSS, которые вы можете использовать. Скорее всего, есть тот, который вы можете использовать в соответствии со своими потребностями.
Ваш интерфейс загружает процессор ваших пользователей?
По мере того, как веб-интерфейсы становятся все более сложными, ресурсоемкие функции требуют все большего и большего от браузера.Если вы заинтересованы в мониторинге и отслеживании использования ЦП на стороне клиента, использования памяти и многого другого для всех ваших пользователей в производственной среде, попробуйте LogRocket. Https://logrocket.com/signup/ LogRocket похож на DVR для веб-приложений , записывая все, что происходит в вашем веб-приложении или на сайте. Вместо того, чтобы гадать, почему возникают проблемы, вы можете агрегировать и составлять отчеты по ключевым показателям производительности внешнего интерфейса, воспроизводить пользовательские сеансы вместе с состоянием приложения, регистрировать сетевые запросы и автоматически обнаруживать все ошибки.
Модернизируйте отладку веб-приложений - начните мониторинг бесплатно.
Динамически удалить нижнее поле последнего дочернего элемента
Используя flexbox в CSS, я динамически выровнял содержимое правого столбца с изображением слева. Вероятно, как и ваш CSS, мои заголовки и абзацы по умолчанию имеют нижние поля. Поэтому, если у последнего абзаца моего текста есть нижнее поле, весь правый столбец будет выглядеть немного смещенным по отношению к изображению левого столбца, потому что поле нижнего абзаца сдвигается вниз.
Вместо того, чтобы пытаться создавать собственные классы CSS для каждой ситуации или полагаться на мои редакторы контента при редактировании исходного кода HTML, я создал этот супер простой класс CSS, который я применяю почти ко всем своим шаблонам.
.mb-lc-0>: last-child {
нижняя маржа: 0! важно;
}
Я следовал соглашению об именах Bootstrap для margin-bottom . Итак, мой класс - это в основном сокращение для «margin-bottom-last-child-0 ».Этот бит CSS при применении к родительскому элементу находит последнего дочернего элемента непосредственных дочерних элементов и делает нижнее поле равным 0 пикселей.
Чтобы использовать этот код, просто скопируйте его в свой файл CSS. Затем добавьте класс .mb-lc-0 к любому родительскому элементу, где вы хотите, чтобы последний элемент не имел нижнего поля. Вы можете использовать его следующим образом:
<раздел>
О нас
Сядьте, портретист, eget dolor morbi non arcu risus.Sem integer vitae justo eget. Маурис сижу, амет масса витэ тортор приправы. Blandit turpis cursus in hac. Volutpat odio facilisis mauris сидят амет масса витэ тортор. Amet nisl purus в mollis nunc sed id. Сядьте, амет волутпат, конскват маурис нунк конге ниси. Aenean pharetra magna ac placerat. Netus et malesuada fames ac turpis egestas sed. Euismod lacinia at quis risus sed vulputate.
Arcu dictum varius duis и Conctetur Lorem donec massa sapien. Egestas erat imperdiet sed euismod.Augue ut lectus arcu bibendum at varius vel. Sem et toror conquat id porta nibh venenatis cras sed. Neque volutpat ac tincidunt vitae semper quis lectus. Энеан и мучитель в рисе виверра, адиписинг в.
В этом примере последний абзац с кнопкой Learn More будет нацелен, и нижнее поле будет равно 0. Вы будете удивлены тем, как часто вы можете использовать это, потому что это может применяться к почти бесчисленному количеству дизайнов элементов пользовательского интерфейса, таких как герои. , призыв к действию, биографии сотрудников, навигация, сообщения в блогах - практически все.
CSS: псевдо-класс последнего типа - изучение CSS
CSS: псевдо-класс последнего типа - изучение CSS | W3Docs Псевдокласс CSS: last-of-type выбирает элемент, который является последним элементом своего типа в списке дочерних элементов своего родителя.
Псевдокласс: last-of-type совпадает с псевдоклассом: nth-last-of-type.
Версия¶
CSS2 Universal Selector
CSS2 Universal Selector
Syntax
: last-of-type {
объявления css;
}
Пример селектора: last-of-type: ¶
Название документа
<стиль>
p: last-of-type {
фон: # 8ebf42;
стиль шрифта: курсив;
цвет: #eeeeee;
}
: пример селектора последнего типа
Пункт 1
Пункт 2
Пункт 3
Попробуйте сами » Вложенные элементы¶
Вложенные элементы также могут быть нацелены.
Селектор * задействуется, когда не написан простой селектор. Пример целевых вложенных элементов: ¶
Название документа
<стиль>
article: last-of-type {
цвет фона: # 8ebf42;
}
<статья>
Этот "div" первый.
Этот вложенный "промежуток" последний !
Эта вложенная "em" первая , но эта вложенная "em" последняя !
Эта буква "b" соответствует требованиям!
Это последний "div"!
Попробуйте сами » Селекторы: last-child и: last-of-type имеют сходство, но между ними есть одно различие.: Last-child очень специфичен и соответствует только самому последнему дочернему элементу родительского элемента, тогда как: last-of-type соответствует последнему вхождению указанного элемента.
Пример селекторов CSS: last-of-type и: last-child: ¶
Название документа
<стиль>
p: last-of-type {
фон: # 8ebf42;
стиль шрифта: курсив;
цвет: #eee;
}
охватывать {
дисплей: блок;
}
span: last-child {
фон: # 8ebf42;
стиль шрифта: курсив;
font-weight: жирный;
цвет: #eee;
отступ: 10 пикселей;
}
: пример селекторов last-of-type и: last-child
Пункт 1
Пункт 2
Пункт 3
Немного текста
Немного текста
Немного текста
Попробуйте сами »
Практикуйте свои знания
Спасибо за ваш отзыв!
Считаете ли вы это полезным? Да Нет
Статьи по теме
Мы используем файлы cookie для улучшения взаимодействия с пользователем и анализа посещаемости веб-сайта.
