CSS: выбор последнего ребенка

  1. Описание
  2. Синтаксис
  3. Параметры или Аргументы
  4. Совместимость браузера
  5. пример
  6. С тегом <span>
  7. С тегом <p>
  8. С тегом <tr>

Этот урок CSS объясняет, как использовать селектор CSS с названием : last-child с синтаксисом и примеры.

Описание

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

Синтаксис

Синтаксис для: активного селектора CSS:

element: last-child {style_properties}

Параметры или Аргументы

element Последний из этого типа элемента в его родительском. style_properties Стили CSS, применяемые к последнему дочернему элементу.

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

Селектор CSS: last-child имеет базовую поддержку со следующими браузерами:

  • Хром
  • Android
  • Firefox (Геккон)
  • Firefox Mobile (Gecko)
  • Internet Explorer 7+ (IE 7+)
  • IE Phone 7+
  • Опера 9.5+
  • Opera Mobile 10+
  • Safari (WebKit)
  • Safari Mobile

пример

Мы обсудим селектор: last-child ниже, и рассмотрим примеры использования этого селектора в CSS для применения стиля к последнему элементу.

С тегом <span>

Давайте посмотрим на пример CSS: last-child, где мы применяем селектор: last-child к тег <span> ,

CSS будет выглядеть так:

span: last-child {color: red; вес шрифта: полужирный; }

HTML будет выглядеть так:

<div> <p> Вот 2 сайта: <span> techonthenet.com </ span> и <span> checkyourmath.com </ span>. </ p> </ div>

Результат будет выглядеть следующим образом (селектор: last-child будет стилизовать теги <span> следующим образом):

Результат будет выглядеть следующим образом (селектор: last-child будет стилизовать теги <span> следующим образом):

В этом примере CSS: last-child текст "checkyourmath.com", который находится в последнем теге <span>, будет отображаться как красный, жирный текст. Текст в первом теге <span> не будет стилизован селектором: last-child.

С тегом <p>

Давайте посмотрим на пример CSS: last-child, где мы применяем селектор: last-child к тег <p> ,

CSS будет выглядеть так:

p: last-child {цвет: синий; }

HTML будет выглядеть так:

<div> <p> Это первый абзац, написанный techonthenet.com. </ p> <p> Это последний абзац, написанный techonthenet.com. </ p> </ div>

Результат будет выглядеть следующим образом (селектор: last-child будет стилизовать теги <p> следующим образом):

Результат будет выглядеть следующим образом (селектор: last-child будет стилизовать теги <p> следующим образом):

В этом примере CSS: last-child цвет текста в последнем теге <p> будет отображаться синим цветом. Первый тег <p> не будет стилизован селектором: last-child.

С тегом <tr>

Давайте посмотрим на пример CSS: last-child, где мы применяем селектор: last-child к тег <tr> ,

CSS будет выглядеть так:

tr: last-child {background: yellow; }

HTML будет выглядеть так:

<table> <tr> <th> Заголовок столбца 1 </ th> <th> Заголовок столбца 2 </ th> </ tr> <tr> <td> techonthenet.com </ td> <td> Технический справочный сайт < / td> </ tr> <tr> <td> checkyourmath.com </ td> <td> сайт математических расчетов </ td> </ tr> <tr> <td> bigactivities.com </ td> <td> Детский игровой сайт </ td> </ tr> </ table>

Результат будет выглядеть следующим образом (селектор: last-child будет стилизовать теги <tr> следующим образом):

Результат будет выглядеть следующим образом (селектор: last-child будет стилизовать теги <tr> следующим образом):

В этом примере CSS: last-child последняя строка (т.е. последний тег <tr>) будет иметь желтый цвет фона. Все остальные строки в таблице не будут обрабатываться селектором: last-child.