Товаров: 0 (0р.)

Css last child: :last-child — CSS | MDN

Содержание

:first-child и :last-child | WebReference

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

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

<ul>
  <li>Uno</li>
  <li>Dos</li>
  <li>Tres</li>
</ul>

Все элементы <li> здесь равны между собой и имеют общего родителя <ul>. Таким образом, :first-child выберет первый пункт списка с текстом «Uno».

Селектор :first-child выбирает все первые элементы в каждой группе веб-страницы, что обычно не требуется. Для сокращения охвата к :first-child нужно добавить селектор элемента — p:first-child. Эту запись следует читать справа налево — сперва выбирается первый элемент, затем проверяется что это элемент <p>. Если первым элементом будет <p>, то к нему применяются стилевые правила; если первым оказывается другой элемент (не <p>), то стиль к нему не применяется.

Сложности с пониманием работы :first-child обычно возникают при чередовании разных элементов, как показано ниже.

<section>
  <p>Один</p>
  <div>Uno</div>
  <p>Два</p>
  <div>Dos</div>
  <p>Три</p>
  <div>Tres</div>
</section>

Следующий стиль сделает текст первого элемента внутри <section> зелёным («Один»). При этом мы не указываем какой это элемент, так что простая перестановка строк в HTML будет делать любую первую строку зелёной.

section > :first-child { color: green; }

Добавление div к селектору не даёт никакого результата — ни одна из строк не станет зелёной. Здесь берётся первый элемент и сравнивается, является ли он <div>. Поскольку первым элементом внутри <section> у нас идёт <p>, то стиль применяться не будет.

section > div:first-child { color: green; }

Заменив div на p получим первую строку зелёной, поскольку первым элементом у нас идёт именно <p>.

section > p:first-child { color: green; }

Аналогично :first-child работает и :last-child, только он определяет последний элемент в группе. К примеру, следующий стиль сделает зелёной строку с текстом «Tres», поскольку элемент <div> идёт последним.

section > div:last-child { color: green; }

Псевдоклассы :first-child и :last-child обычно применяются в списках и таблицах, где последовательно идут одни и те же элементы. В примере 1 между пунктами горизонтального списка добавляется вертикальная линия через свойство border-left. Чтобы убрать линию у первого пункта используем псевдокласс :first-child.

Пример 1. :first-child для списка

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>:first-child</title> <style> ul { background: #86328c; /* Цвет фона */ padding: 0; /* Обнуляем */ } li { display: inline-block; /* Выстраиваем по горизонтали */ color: #eedfac; /* Цвет текста */ padding: 10px; /* Поля вокруг текста */ border-left: 1px solid #f190ac; /* Линия слева */ } li:first-child { /* Для первого элемента */ border-left: none; /* убираем линию */ } </style> </head> <body> <ul> <li>Uno</li><li>Dos</li><li>Tres</li> </ul> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Список с вертикальными линиями

Аналогичный результат достигается и с помощью :last-child, только вместо линии слева надо сделать её справа через свойство border-right.

Интересные линии можно получить за счёт комбинации светлых и тёмных границ. На рис. 2 показана таблица, в которой ячейки выделяются такими границами.

Рис. 2. Границы в таблице

К каждой ячейке добавляется белая линия справа и сверху, а также серая линия слева и снизу. :first-child и :last-child применяются для отмены линий у первой и последней ячеек в строке (пример 2).

Пример 2. Использование :last-child

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>:first-child</title> <style> table { background: #f7f7f7; /* Цвет фона */ width: 100%; /* Ширина таблицы */ border-spacing: 0; /* Расстояние между ячеек */ border: 1px solid #ccc; /* Параметры рамки */ } th, td { padding: 10px; /* Поля в ячейках */ } th { background: #e9e9e9; /* Цвет фона заголовка */ } th, td { border-left: 1px solid #ccc; border-right: 1px solid #fff; border-top: 1px solid #fff; border-bottom: 1px solid #ccc; } th:first-child, td:first-child { border-left: none; } th:last-child, td:last-child { border-right: none; } tr:last-child td { border-bottom: none; } </style> </head> <body> <table> <thead> <tr> <th>Значение</th> <th>Значение по умолчанию</th> <th>Описание</th> </tr> </thead> <tbody> <tr> <td>top</td> <td>Да</td> <td>Располагает заголовок по верхнему краю таблицы.</td> </tr> <tr> <td>bottom</td> <td>Нет</td> <td>Заголовок располагается под таблицей.</td> </tr> </tbody> </table> </body> </html>
Обратите внимание на селектор tr:last-child td — он позволяет обратиться к ячейкам последней строки в таблице и убрать у них линию снизу.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 12.03.2020

Редакторы: Влад Мержевич

Псевдокласс :last-child | CSS справочник

CSS селекторы

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

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

Этот псевдокласс в отличие от псевдокласса :first-child выбирает последний дочерний элемент своего родителя, а не первый.

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

CSS синтаксис:

:last-child {
блок объявлений;
}

Версия CSS

CSS3

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

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


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

Что общего у элементов, выделенных на изображении? А общее у них то, что выделенные элементы <article> и <li> являются последними дочерними элементами своих родителей, и чтобы нам их стилизовать необходимо использовать псевдокласс :last-child.

Если вы сходу сможете ответить почему ни один элемент <h3> на изображении выше нельзя стилизовать с использованием псевдокласса

:last-child, то можете сразу перейти к примеру, если нет, то внимательно изучите следующее изображение, оно поможет Вам до конца понять как работает псевдокласс :last-child:


Схема работы псевдокласса :last-child.

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :first-child</title>
<style>

 
article:last-child { /* выбираем каждый элемент <article>, который является последним дочерним элементом своего родителя */
color: blue; /* устанавливаем цвет текста */
}
li:first-child{ /* выбираем каждый элемент <li>, который является последним дочерним элементом своего родителя */
color: red; /* устанавливаем цвет текста */
font-size: 24px; /* устанавливаем размер шрифта */
}
</style>
</head>
	<body>
		<h3>Первый заголовок h3 тега body</h3>
		<ul>
			<li>один</li>
			<li>два</li>
			<li>три</li>
		</ul>
		<h3>Второй заголовок h3 тега body</h3>
		<article>
			<h3>Первый заголовок h3 тега article</h3>
			<ul>
				<li>один</li>
				<li>два</li>
				<li>три</li>
			</ul>
		</article>
	</body>
</html>

В этом примере с использованием псевдокласса :last-child мы стилизовали элементы <article> и <li>, которые являются последними дочерними элементами своих родителей.

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

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

CSS псевдокласс :last-child

Псевдокласс :last-child выбирает последний элемент своего родителя.

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

Версия¶

CSS3

Синтаксис¶

:last-child {
css declarations;
}

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p:last-child {
      background-color: #1c87c9;
      color:#fff;
      }
    </style>
  </head>
  <body>
    <h3>Пример селектора last-child</h3>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
  </body>
</html>
Попробуйте сами!

Рассмотрим другой пример:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      li:last-child {
      background: #1c87c9;
      } 
    </style>
  </head>
  <body>
    <h3>Пример селектора :last-child</h3>
    <ul>
      <li>Paris</li>
      <li>Moscow</li>
      <li>Rome</li>
    </ul>
    <ol>
      <li>Paris</li>
      <li>Moscow</li>
      <li>Rome</li>
    </ol>
  </body>
</html>
Попробуйте сами!

В следующем примере селектор p:last-child применяет стиль к последнему параграфу:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      p:last-child {
      background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h3>Пример селектора :last-child</h3>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
  </body>
</html>
Попробуйте сами!

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

:last-child CSS псевдо-класс представляет собой последний элемент среди группы родственных элементов.

p:last-child {
  color: lime;
}

Примечание . Как изначально определено, выбранный элемент должен иметь родителя. Начиная с уровня 4 селекторов, это больше не требуется.


Syntax

:last-child

Examples

Основной пример

HTML
<div>
  <p>This text isn't selected.</p>
  <p>This text is selected!</p>
</div>

<div>
  <p>This text isn't selected.</p>
  <h3>This text isn't selected: it's not a `p`.</h3>
</div>
CSS
p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
Result

Стилизация списка

HTML
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>
CSS
ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}
Result

Specifications

Совместимость с браузерами

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidХромовый AndroidFirefox для AndroidОпера АндроидSafari на IOSSamsung Интернет
:last-child

1

12

1

9

9.5

3.2

≤37

18

4

10.1

3.2

1.0

no_parent_required

57

79

52

No

44

No

57

57

52

43

No

7.0

См.также

Псевдоэлемент after и псевдокласс last-child

Вы здесь: Главная — CSS — CSS Основы — Псевдоэлемент after и псевдокласс last-child

Для верстальщика псевдоэлементы и псевдоклассы – незаменимые помощники и я вам это сейчас докажу на примере фрагмента PSD макета.

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

<li>
<a href="#">Home</a>
    <span>|</span>
</li>

В результате мы увидели бы следующую разметку в HTML-документе, как на картинке ниже.

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

Правильный способ

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

<nav>
  <ul>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">Sale</a>
  </li>
  <li>
    <a href="#">Handbags</a>
  </li>
  <li>
    <a href="#">Wallets</a>
  </li>
  <li>
    <a href="#">Accessories</a>
  </li>
  <li>
    <a href="#">Mens Store</a>
  </li>
  <li>
    <a href="#">Shoes</a>
  </li>
  <li>
    <a href="#">Vintage</a>
  </li>
  <li>
    <a href="#">Services</a>
  </li>
  <li>
    <a href="#">Contact Us</a>
  </li>
  </ul>
</nav>

Псевдоэлемент after в CSS стилях

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

nav ul li::after {
}

Символ вертикальная линия имеет следующий код — «\007C». Откуда мы узнали? Из таблицы символов Юникода.

Не забудьте убрать дефолтные стили маркеров, круглые точки!

nav ul {
    list-style: none;
}

Запишем номер в Юникоде в свойство content.

nav ul li::after {
  content: "\007C"; /* юникод вертикальная линия */
  color: #fff; /* поменять цвет */
  font-weight: bold; /* поменять жирность */
  position: relative;
  padding-left: 4px; /* выравнивание относительно текста по гориз. */
  top: -2px; /* выравнивание относительно текста по верт. */
}

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


Псевдокласс last-child

Псевдокласс last-child позволяет задать отдельные стили для последнего элемента, в нашем случае – для последнего псевдоэлемента. Мы просто указываем пустое значение у свойства content и последняя линия пропала.

nav ul li:last-child::after {
    content: "";
}

Заключение

Для использования символов Юникода, кодировка страницы должна обязательно быть UTF-8.

Как понять, в каком случае нужно верстать с псевдоэлементами? Все элементы оформления и украшательства, находящиеся до или после основных элементов. Сейчас редко какой дизайн-макет обходится без необходимости, применять в верстке псевдоэлементы и псевдоклассы.

В этогм видео-курсе «HTML5 и CSS3 с Нуля до Гуру»вы увидите на простых примерах, как верстаются сайты.

  • Создано 18.01.2019 10:35:15
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

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

    Она выглядит вот так: Как создать свой сайт

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

Псевдокласс nth-last-child — n-ный потомок родителя, отсчет с конца

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

Синтаксис

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

Значения

ЗначениеОписание
число Положительное число начиная с 1. Задает номер элемента, к которому мы хотим обратиться. Нумерация элементов начинается с 1.
oddНечетные элементы.
evenЧетные элементы.
выражение Можно составлять специальные выражения с буквой n, которая обозначает все целые числа от нуля (не от единицы!) до бесконечности. Так, 2n — значит все четные числа (начиная со второго).
Как это понять? Подставляем в n последовательно числа от 0 и так далее: если n = 0, то 2n даст 0 — такого элемента нет (нумерация элементов с 1!), если n = 1, то 2n даст 2 — второй элемент, если n = 2, 2n дает 4 — четвертый элемент. Если написать 3n — это будет каждый третий элемент (начиная с третьего!), и так далее.

Пример

В данном примере мы сделаем красного цвета тот li, который является 4-тым с конца потомком своего родителя (4-тым внутри ol):

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> li:nth-last-child(4) { color: red; }

:

Пример

Сейчас красными сделаем все четные с конца li:

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> li:nth-last-child(even) { color: red; }

:

Пример

Сейчас красными сделаем все нечетные с конца li:

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> li:nth-last-child(odd) { color: red; }

:

Пример

Сейчас красными сделаем каждую третью с конца li (начиная с третьей с конца):

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> li:nth-last-child(3n) { color: red; }

:

css — Примените css last-child к элементу, который не является непосредственным потомком в ul li

У меня есть этот HTML —

<ul>
<li>
    <div>
        <div>test</div>
    </div>
</li>
<li>
    <div>
        <div>test</div>
    </div>
</li>
<li>
    <div>
        <div>test</div>
    </div>
</li>
</ul>

И этот CSS —

.x{
    border:1px solid black;
    padding: 10px;
}
.child-1:last-child{
    border-color:red;
}

http://jsfiddle.net/BDj2h/1/

Я пытаюсь применить красную рамку только к последнему child-1 div. Но этого не происходит. Псевдокласс CSS last-child проверяет, является ли его последний элемент внутри его непосредственного родителя, а не во всей DOM (что было моим неправильным пониманием).

Есть идеи, как это сделать только с помощью css?

2

Ivin Jose 24 Окт 2013 в 18:44

3 ответа

Лучший ответ

li:last-child .child-1

Был бы такой же эффект.

JSFiddle

1

Paulie_D 24 Окт 2013 в 14:47

:last-child 1 псевдо не будет учитывать последний объявленный class, он просто отслеживает последний экземпляр элемента в отношении родитель / потомок.=»child-1″] { border-color:red; }

Или просто

.parent li:last-child div.child-1.x {
   border-color:red;
}

Демо

Примечание: last-child является несколько свободным псевдонимом, поскольку он просто игнорирует элемент, если он не является последним дочерним элементом родительского элемента, поэтому здесь last-of-type вступает в действие, где выбирает last type element независимо от его уровня DOM.

1

Mr. Alien 24 Окт 2013 в 14:53

Селектор последнего дочернего и последнего типа в SASS

SASS также называется Syntactically Awesome Stylesheet. Это язык программирования, который интерпретируется в CSS. Селектор Last Child — это селектор, который позволяет пользователю выбрать последний элемент внутри содержащего элемента. Этот селектор также известен как структурный псевдокласс, что означает, что он используется для стилизации содержимого на основе родительского и дочернего содержимого.
Последний тип селектора используется для сопоставления последнего вхождения элемента в контейнер.Оба селектора работают одинаково, но имеют небольшую разницу, т.е. последний тип менее определен, чем селектор последнего дочернего элемента.

Синтаксис:

  • Для селектора последнего дочернего элемента:
    : последний дочерний элемент
  • Для последнего типа:
    : последний из типа

Пример: Этот пример реализует: последний- дочерний селектор.

< html lang = "en" >

< > голова

< название > название >

головка >

< корпус >

< div >

< h2 > Добро пожаловать в GeeksForGeeks. h2 >

< p > Портал компьютерных наук для вундеркиндов! p >

div >

корпус >

html >

Sass Code:

салатовый

$ bkc: черный

$ pad: 5px

p: последний ребенок

цвет : $ myColor

2 background-color : $ bkc

padding : $ pad

Вывод: После компиляции исходного кода SASS вы получите этот код CSS.
Код CSS: 


 p: последний дочерний элемент {
  цвет: салатовый;
  цвет фона: черный;
  отступ: 5 пикселей;
}

Пример: last-of-type Пример примера показан ниже

9162

Код Sass:

< html >

< голова >

< заголовок >

: селектор последнего типа

заголовок >

головка >

< корпус >

< p > Первый абзац. p >

< p > Второй абзац. p >

< p > Третий абзац. p >

< p > Четвертый абзац. p >

< p > Пятый абзац. p >

< p > Шестой абзац. p >

< p > Седьмой абзац. p >

< p > Восьмой абзац. p >

< p > Девятый абзац. p >

< p >

< b > Примечание: b > Internet Explorer 8

и более ранние версии не поддерживают

селектор: nth-last-of-type ().

p >

корпус >

html >

004

$ bk: желтый

p: последний тип

цвет фона : $ bk

Выход:
Код CSS: 

 p: last-of-type {
  цвет фона: желтый;
}

Ссылки:

Поддерживаемый браузер: Браузеры, поддерживаемые селекторами: last-child и: last-of-type в SASS, перечислены ниже:

  • Google Chrome 4.0
  • Edge 9.0
  • Firefox 3.5
  • Safari 3.2
  • Opera 9.6

: последний дочерний элемент - CSS - W3cubDocs

Псевдокласс CSS : last-child представляет последний элемент в группе родственных элементов.

 / * Выбирает любой 
, который является последним элементом
   среди его братьев и сестер * /
p: last-child {
  цвет: салатовый;
}

Примечание : Как изначально определено, выбранный элемент должен иметь родителя.Начиная с уровня селекторов 4, это больше не требуется.

Синтаксис 

: last-child

Примеры

Базовый пример

HTML 
 

  
 Этот текст не выбран. 

  
 Этот текст выделен! 






  
 Этот текст не выбран. 

   
 Этот текст не выделен: это не `p`.
CSS 
 p: last-child {
  цвет: салатовый;
  цвет фона: черный;
  отступ: 5 пикселей;
}
Результат

Стилизация списка

HTML 
 
    
  
  •  Пункт 1 
    • 
  
  •  Пункт 2 
    • 
  
  •  Пункт 3
    
      
      
    •  Пункт 3.1 
      • 
      
    •  Пункт 3.2 
      • 
      
    •  Пункт 3.3 
      • 
    
    
  
    •
CSS 
 ul li {
  цвет синий;
}

ul li: last-child {
  граница: сплошной красный 1px;
  красный цвет;
}
Результат

Технические характеристики

Настольный
Хром Кромка Firefox Internet Explorer Opera Safari
: последний ребенок 1 12 1 9 9.5 3,2
Соответствует элементам без родительского элемента 57 79 52 № 44 №
мобильный
Android веб-просмотр Chrome для Android Firefox для Android Opera для Android Safari на iOS Samsung Интернет
: последний ребенок ≤37 18 4 10.1 3,2 1,0
Соответствует элементам без родительского элемента 57 57 52 43 № 7,0

См. Также

: first-child,: last-child,: nth-child и: not (: nth-child)

Селектор : nth-child одновременно мощный и простой в использовании. Это позволяет нам нацеливать определенные элементы в зависимости от их порядка по отношению друг к другу.Мы можем нацеливаться на что-то простое, например, 4-го ребенка, или что-то более сложное, например, на каждого 5-го ребенка, начиная со 2-го (2, 7, 12, 17,…). Зная основы, вы сможете писать мощный, быстрый, эффективный, расширяемый и умный CSS.

Использование селектора : nth-child часто помогает устранить необходимость в таких классах, как .item - last или .item - clear . Если вам нужно стилизовать итеративным способом, вы можете сохранить все стили, содержащиеся в вашем CSS, вместо добавления дополнительных классов в ваш HTML.

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

Вот структура селектора : nth-child : an + b

  • (a) - Целое число, которое обеспечивает контекст для итерации (n)
  • (п) - Буква «н» буквально
  • (+/-) - Может быть «+» или «-» для построения селектора.
  • (b) - Целое число, обеспечивающее контекст в начальной точке.

Вот пример реального селектора : nth-child : 3n - 2

  • а = 3
  • п = п
  • +/- = -
  • b = 2

Давайте повеселимся!

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

: первенец

Позволяет нам нацеливаться на первого брата или сестру в группе

: последний ребенок

Позволяет нам нацеливаться на последнего брата или сестру в группе

: nth-ребенок (3n)

Позволяет нам нацеливаться на каждого третьего брата или сестру в группе

: энный ребенок (п + 2)

Позволяет нам нацеливаться на всех братьев и сестер в группе, начиная со второго брата

: nth-ребенок (3n + 2)

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

: эн-ребенок (-n)

Позволяет нам настроить таргетинг на каждого брата и сестру в группе, начиная с 0-го места и работая в обратном направлении (это не нацелено на каких-либо братьев и сестер, поскольку вы не можете работать в обратном направлении с 0-го места, поскольку нет -1-го брата)

: nth-ребенок (-n + 9)

Позволяет нам нацеливаться на каждого брата или сестру в группе, начиная с 9-го места и работая в обратном направлении

: nth-ребенок (-3n + 9)

Позволяет нам нацеливаться на каждого третьего брата или сестру в группе, начиная с 9-го места и работая в обратном направлении

: not (: nth-child (4n))

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

Использование селектора : nth-child может поднять ваш CSS на новый уровень.Это помогает вам писать организованный, эффективный и расширяемый код.

Если вам нужно больше, вы можете прочитать спецификацию, узнать больше из MDN или поэкспериментировать с собственными рецептами.

: first-child и: last-child (How To) | Селекторы CSS

[NOISE] CSS псевдо-псевдо классы, чем ссылка и 0:00

псевдоклассы действий пользователя, которые мы рассмотрели ранее в основах CSS.0:05

CSS на самом деле имеет ряд других полезных псевдоклассы, 0:11

начиная со структурных псевдоклассов, эти целевые элементы в соответствии с 0:14

их положение на странице и их отношение к другим элементам. 0:18

Вот где мы действительно начнем видеть реальная сила и 0:21

гибкость за многим другим продвинутые селекторы CSS.0:24

Итак, продолжим работу с псевдоклассами. Далее посмотрим, как 0:27

целевой первый и последний дочерние элементы. 0:31

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

И как мы видим, щелкнув по кнопка предварительного просмотра, из которой состоит страница 0:38

простой список из десяти пунктов.0:42

Теперь, если мы посмотрим на индексную точку html, мы видим, что разметка для 0:45

этот список представляет собой неупорядоченный список, содержащий 10 пунктов списка. 0:51

Таким образом, мы можем сказать, что все 10 из этих LI элементы являются дочерними элементами этого родительского UL.0:56

Итак, теперь допустим, что мы хотим только настроить таргетинг и стилизуем первый элемент в нашем списке. 1:02

Итак, пункт первый. 1:09

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

Итак, вернемся к нашему рабочему месту и 1:15

мы поднимем стиль.css файл справа здесь, в каталоге CSS. 1:17

И давайте создадим этот первый дочерний селектор к 1:23

сначала нацеливание на элемент li, за которым следует первый дочерний псевдокласс. 1:25

Так что скажем: первенец. 1:31

Как я уже сказал, 1:38

этот селектор будет нацелен на элемент списка это первый дочерний элемент своего родителя.1:39

Итак, в правиле давайте продолжим и дадим его свойство фона. 1:45

И мы собираемся установить значение # 52. 1:51

BAB3 и мы установим цвет на белый все в порядке. 1:56

Итак, давайте посмотрим.2:01

Сохраним наш файл style.css и 2:02

когда мы обновляем браузер, обратите внимание, что первый элемент списка в нашем неупорядоченном 2:06

список - единственный с этим аква-зеленым цвет фона и белый цвет текста. 2:11

Так похоже на первого ребенка псевдо class, последний дочерний псевдокласс.2:16

Позволяет нам нацелить элемент, который последний ребенок своих родителей. 2:22

Итак, давайте посмотрим, как это работает. 2:27

Мы вернемся к нашей таблице стилей и 2:28

давайте изменим первый дочерний селектор на последний ребенок.2:30

Итак, теперь, когда мы вернемся к нашему списку и обновите страницу. 2:36

Теперь мы можем увидеть, как применяются стили. только до самого последнего пункта списка. 2:40

И неважно, сколько пунктов списка мы добавляем или удаляем из этого неупорядоченного списка, 2:45

у самого последнего всегда будет это цвет фона и белый цвет текста.2:50

Итак, вот почему эти первые и 2:54

последние дочерние селекторы действительно могут пригодиться удобно при стилизации списков или навигации. 2:55

Итак, я вернусь к нашей таблице стилей а также 3:01

установите этот селектор обратно на первого ребенка псевдокласс.3:03

Я собираюсь отменить это. 3:07

Итак, когда мы посмотрим на это еще раз, однажды опять таки, 3:09

этот первый элемент списка приобретает тот цвет стили. 3:11

Но теперь допустим, что мы хотим удалить вот эта ненужная граница.3:14

В последнем элементе списка 3:19

теперь мы знаем, что можем легко сделать это с последним дочерним псевдоклассом. 3:21

Нет проблем, правда? 3:25

Итак, вернемся к нашей таблице стилей и 3:26

прямо под первым дочерним селектором мы только что написал.3:28

Давайте наберем li двоеточие в последнем дефисе child. 3:32

И мы добавим свойство границы и установим значение нет. 3:39

Итак, теперь, когда мы сохраняем нашу таблицу стилей и 3:43

обновите страницу, мы увидим, что нижняя граница исчезла.3:45

Это действительно здорово, потому что вместо создание отдельного класса для 3:49

первый элемент списка, в который добавляются эти цвета. 3:53

Мы создаем отдельный класс для удаления граница здесь, в последнем элементе списка. 3:56

Мы можем сделать это более эффективно с первым и 4:01

последние дочерние псевдоклассы.4:05

На следующем уроке мы узнаем, как нацелить любую комбинацию этих детей 4:07

элементы, с более конкретными структурными псевдоклассы. 4:12

Выучить селектор последнего ребенка -

Стенограмма урока

"Выбор последнего ребенка"

[00:00:00]
>> Докладчик 1: Что еще нам осталось делать с нашим прекрасным калькулятором?
>> Динамик 2: Оранжевый.
>> Докладчик 1: Хорошо, ниши. Итак, нам осталось кое-что сделать, что это такое?
>> Спикер 2: оранжевый фон для последней колонки.
>> Докладчик 1: Нам нужен какой-то оранжевый фон для последней колонки, хорошо?

[00:00:18] Как вы могли бы предложить поступить по инерции?
>> Докладчик 2: Я мог бы создать класс и просто поместить этот класс после кнопки «вычислить».
>> Спикер 1: Угу.
>> Докладчик 2: А затем в CSS поместите оранжевый фон для этого класса.
>> Спикер 1: Замечательно, кто-нибудь не согласен с таким подходом? Это круто, молодец. Так что да, безусловно, мы могли бы поступить таким образом.

[00:00:47] Итак, что бы мы сделали здесь в нашем коде, мы просто продолжили бы и создали здесь класс с именем, как угодно. Вы могли бы назвать это чем-то вроде функциональной кнопки. И мы сделаем это оранжевым фоном. А затем мы применили бы этот класс ко всем этим кнопкам в нашем HTML, вы бы добавили его как дополнительный класс, и это полностью сработало бы.

[00:01:08] Но поскольку мне хочется пощеголять, и потому что вчера вы так повеселились с сумасшедшими селекторами, я покажу вам еще один трюк. Итак, что общего у всех этих кнопок?
>> Спикер 3: Они вместе в колонну?
>> Докладчик 1: Они находятся в столбце вместе, что означает, что они, что, в строке?

[00:01:31]
>> Докладчик 1: Это последний элемент во всех этих строках. На самом деле у нас есть селектор для этого.Как это круто? Хорошо. Таким образом, другой способ сделать это, метод класса является абсолютно допустимым, но другой способ, которым мы могли бы это сделать, - это мы могли бы просто сказать, что мы могли бы продолжить работу с кнопкой calc, а затем использовать псевдокласс с именем last child.

[00:01:57]
>> Спикер 1: Я правильно понимаю? Это последний ребенок, тот, что живет в подвале, о котором мы не говорим. Хорошо, с последним ребенком здесь мы можем сделать это так. И мы можем дать ему цвет фона, df974c, это наш потрясающий оранжевый, и цвет белого.

[00:02:25]
>> Докладчик 1: Хорошо, это псевдокласс, называемый последним потомком, угадайте, что есть еще один, называемый первым потомком.Хорошо, среднего ребенка нет, есть только последний ребенок и первый ребенок. Затем у нас есть один, называемый n-м ребенком, для всех остальных. Но последний ребенок, мы продолжим и выберем последнюю кнопку в ряду.

[00:02:45] Итак, если вы продолжите и обновите свою страницу, теперь она должна выглядеть как калькулятор [ЗВУК], возможно, нам следует настроить для них состояние наведения курсора. Так что мы можем сделать это довольно легко. Как бы выглядел мой селектор для настройки состояния наведения для этих кнопок?

[00:03:04]
>> Громкоговоритель 4: кнопка вычисления точек.
>> Громкоговоритель 1: кнопка вычисления точек.
>> Спикер 4: Двоеточие последнего ребенка.
>> Говорящий 1: Двоеточие последнего ребенка.
>> Спикер 4: Двоеточие парит?
>> Докладчик 1: Двоеточие наведите, да, вы можете просто выстроить эти псевдоклассы один за другим, вот так. Итак, кнопка dot calc, точка последнего дочернего элемента, точка наведения и цвет фона для этого - dfb07e, хорошо.

[00:03:42]
>> Спикер 1: И, я думаю, у него здесь тоже было активное состояние.Это очень хорошо. Я просто оставлю это прямо сейчас. Итак, поехали. Если вы обновите свою страницу, у вас должно появиться несколько приятных состояний наведения на ваших кнопках. И все это красиво оформлено. Последнее, что вам нужно сделать, это что?

[00:04:08] Выньте некрасивую красную обертку,
>> Докладчик 1: А теперь у вас есть красивый калькулятор. Как это круто? Вы взволнованы. Вы готовы закодировать эту штуку?
>> Спикер 4: Ага.
>> Спикер 5: Ага.
>> Докладчик 1: Итак, теперь эти кнопки, эти кнопки, которые вы действительно сможете нажимать, вы сможете видеть числа, которые появляются здесь, вы действительно сможете делать с ними математические вычисления.

css: last-child - Ссылка CodeProject

  1. Дом
  2. CSS
  3. : последний ребенок

Псевдокласс CSS : last-child представляет любой элемент, который является последним дочерним элементом своего родителя.

Пример

HTML-контент 

 
    
  
  •  Этот предмет не покрыт известью.
    • 
  
  •  И не этот. 
    • 
  
  •  Этот товар есть! :) 
    •

Содержимое CSS 

 li: last-child {
  цвет фона: салатовый;
}

Синтаксис 

: last-child { свойства стиля }

Описание

Псевдокласс CSS : last-child представляет любой элемент, который является последним дочерним элементом своего родителя.

Совместимость с браузером

Элемент Хром Firefox (Gecko) Internet Explorer Opera Safari
Базовая опора 1,0 1.0 (1.7 или более ранняя) 9,0 9,5 3,2
Элемент Android Firefox Mobile (Gecko) IE мобильный Opera Mobile Safari Mobile
Базовая опора 2.1 1,0 (1) 9,0 10,0 3,2

См. Также

Характеристики

Лицензия

Css: пример последнего ребенка | Newbedev

Псевдокласс CSS : last-child представляет последний элемент в группе родственных элементов.

p: last-child {
  цвет: салатовый;
}

Примечание : Как изначально определено, выбранный элемент должен иметь родителя.Начиная с уровня селекторов 4, это больше не требуется.

Синтаксис 

: последний ребенок

Примеры

Базовый пример

HTML 
 

  
 Этот текст не выбран. 

  
 Этот текст выделен! 






  
 Этот текст не выбран. 

   
 Этот текст не выделен: это не `p`.
CSS 
 p: last-child {
  цвет: салатовый;
  цвет фона: черный;
  отступ: 5 пикселей;
}
Результат

Стилизация списка

HTML 
 
    
  
  •  Пункт 1 
    • 
  
  •  Пункт 2 
    • 
  
  •  Пункт 3
    
      
      
    •  Пункт 3.1 
      • 
      
    •  Пункт 3.2 
      • 
      
    •  Пункт 3.3 
      • 
    
    
  
    •
CSS 
 ul li {
  цвет синий;
}

ul li: last-child {
  граница: сплошной красный 1px;
  красный цвет;
}
Результат

Характеристики

Совместимость с браузером

Настольный мобильный
Хром Кромка Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox для Android Opera Android Safari на iOS Samsung Интернет
: последний ребенок

1

12

1

9

9.5

3,2

≤37

18

4

10,1

3,2

1,0

no_parent_required

57

79

52

№

44

№

57

57

52

43

№

7.

No related posts.

alexxlab

Как часто можно делать клизму грудничку: рекомендации педиатров

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Как успокоить плачущего ребенка: 10 эффективных способов

Что нужно новорожденному на первое время: полный список необходимых вещей

Пеленки для новорожденных: виды, размеры и способы использования

Детская кроватка для новорожденного: как правильно выбрать

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

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

Primelens.ru © 2019