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

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

Описание

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

Синтаксис

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

element: first-child {style_properties}

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

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

Заметка

• Селектор: first-child - это псевдокласс, который позволяет вам выбрать элемент, который является первым дочерним элементом в его родительском элементе.
• Смотрите также :последний ребенок , : П-й ребенок , : П-й last_child , а также :только ребенок селекторы.
• В IE8 стиль: first-child не применяется до тех пор, пока ссылка не потеряет фокус, если элемент будет вставлен динамически при нажатии на ссылку.

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

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

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

пример

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

С тегом <span>

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

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

span: first-child {font-weight: bold; красный цвет; }

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

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

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

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

С тегом <p>

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

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

р: первый ребенок {цвет: синий; }

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

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

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

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

С тегом <tr>

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

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

tr: первый ребенок {фон: желтый; }

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>

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

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

Похожие

Комментарии