Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

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

  1. Описание
  2. Синтаксис
  3. Параметры или Аргументы
  4. Заметка
  5. Совместимость браузера
  6. пример
  7. С тегом <span>
  8. С тегом <p>
  9. С тегом <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 будет стилизовать теги <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> следующим образом):

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

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

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