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> следующим образом):

В этом примере 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> следующим образом):

В этом примере 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> следующим образом):

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

Похожие

Комментарии