Css selector child: Child combinator — CSS: Cascading Style Sheets

Справочник по селекторам CSS

❮ Предыдущий Далее ❯


В CSS селекторы — это шаблоны, используемые для выбора элементов, для которых требуется стиль.

Воспользуйтесь нашим тестером селекторов CSS, чтобы продемонстрировать различные селекторы.

Селектор Пример Пример описания
. класс .intro Выбирает все элементы с
.класс1.класс2 .имя1.имя2 Выбирает все элементы с набором name1 и name2 в своем атрибуте класса
.класс1 .класс2 .имя1 .имя2 Выбирает все элементы с name2 , которые являются потомками элемент с именем 1
# идентификатор #имя Выбирает элемент с
* * Выбирает все элементы
элемент р Выбирает все элементы

элемент. класс стр. вступление Выбирает все элементы

с

элемент,элемент дел, стр Выбирает все элементы
и все элементы

элемент элемент раздел стр Выбирает все элементы

внутри элементов

элемент > элемент дел > р Выбирает все элементы

, родительским элементом которых является элемент

элемент + элемент дел + р Выбирает первый элемент

, который помещается сразу после элементов

Элемент1 ~ Элемент2
р ~ ул
Выбирает каждый элемент
    , которому предшествует элемент

[ атрибут ] [цель] Выбирает все элементы с целевым атрибутом
[ атрибут = значение ] [цель=_пусто] Выбирает все элементы с target=»_blank» 9=»https»] Выбирает каждый элемент , значение атрибута href которого начинается с «https»
[ атрибут $= значение ] а[href$=». pdf»] Выбирает каждый элемент , значение атрибута href которого заканчивается на «.pdf»
[ атрибут *= значение ] а[href*=»w3schools»] Выбирает каждый элемент , значение атрибута href которого содержит подстроку «w3schools»
:активный а:активный Выбирает активную ссылку
::после р::после Вставьте что-нибудь после содержимого каждого элемента

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

: проверено ввод:проверено Выбирает каждый проверенный элемент
: по умолчанию ввод: по умолчанию Выбирает элемент по умолчанию
: отключено ввод: отключен Выбирает каждый отключенный элемент
:пусто р:пусто Выбирает каждый элемент

, у которого нет дочерних элементов (включая текстовые узлы)

:включено ввод: включен Выбирает каждый включенный элемент
:первый ребенок p: первый ребенок Выбирает каждый элемент

, который является первым дочерним элементом своего родителя.

:: первая буква p:: первая буква Выбирает первую букву каждого элемента

:: первая линия p::первая строка Выбирает первую строку каждого элемента

: первый в своем роде p: первый в своем роде Выбирает каждый элемент

, который является первым элементом

своего родителя.

:фокус ввод:фокус Выбирает элемент ввода, который имеет фокус
: полноэкранный режим :полноэкранный Выбирает элемент, находящийся в полноэкранном режиме
:наведение а: наведите курсор на Выбирает ссылки при наведении мыши
:в диапазоне ввод: в диапазоне Выбирает элементы ввода со значением в указанном диапазоне
:неопределенный ввод: неопределенный Выбирает элементы ввода, которые находятся в неопределенном состоянии
: неверный ввод: неверный Выбирает все элементы ввода с недопустимым значением
:язык( язык ) p:язык(ит) Выбирает каждый элемент

с атрибутом lang, равным «it» (итальянский)

:последний ребенок p:последний ребенок Выбирает каждый элемент

, который является последним дочерним элементом своего родителя.

:последний тип p:последний тип Выбирает каждый элемент

, который является последним элементом

своего родителя

:ссылка а: ссылка Выбирает все непросмотренные ссылки
:: маркер :: маркер Выбирает маркеры элементов списка
:нет( селектор ) :не(р) Выбирает каждый элемент, который не является элементом

:n-й ребенок( n ) p:n-й ребенок(2) Выбирает каждый элемент

, который является вторым дочерним элементом своего родителя

:n-последний-потомок( n ) p:n-последний-потомок(2) Выбирает каждый элемент

, который является вторым дочерним элементом своего родителя, считая от последнего дочернего элемента

:n-последний тип( n ) p:n-последний тип(2) Выбирает каждый элемент

, который является вторым элементом

своего родителя, считая от последнего дочернего элемента

:n-й тип( n ) p:n-й тип(2) Выбирает каждый элемент

, который является вторым элементом

своего родителя.

:только тип p: только тип Выбирает каждый элемент

, который является единственным элементом

своего родителя.

: единственный ребенок p: единственный ребенок Выбирает каждый элемент

, который является единственным потомком своего родителя.

: необязательный ввод: опционально Выбирает элементы ввода без обязательного атрибута
:вне диапазона ввод: вне диапазона Выбирает элементы ввода со значением вне указанного диапазона
::заполнитель ввод:: заполнитель Выбирает элементы ввода с указанным атрибутом «placeholder»
: только для чтения ввод: только для чтения Выбирает элементы ввода с указанным атрибутом «только для чтения»
: чтение-запись ввод: чтение-запись Выбирает элементы ввода с НЕ указанным атрибутом «только для чтения»
: требуется ввод: требуется Выбирает элементы ввода с указанным атрибутом «обязательный»
: корень : корень Выбирает корневой элемент документа
::выбор ::выбор Выбирает часть элемента, выбранную пользователем
: цель #новости:цель Выбирает текущий активный элемент #news (щелчок по URL-адресу, содержащему это имя привязки)
: действительный ввод: действительный Выбирает все элементы ввода с допустимым значением
:посетили а: посетил Выбирает все посещенные ссылки

❮ Предыдущий Следующий ❯


НАБОР ЦВЕТА



Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

581 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

CSS :nth-child() Селектор

❮ Предыдущий Справочник по селекторам CSS Далее ❯


Пример

Как использовать селектор :nth-child():

/* Выбирает второй элемент родственных элементов div */
div:nth-child(2) {
фон: красный;
}

/* Выбирает второй элемент li в списке */
li:nth-child(2) {
  background: lightgreen;
}

/* Выбирает каждый третий элемент среди любой группы братьев и сестер */
:n-й ребенок(3) {
фон: желтый;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.


Определение и использование

Селектор :nth-child( n ) соответствует каждому элементу, который является n -м дочерним элементом своего родителя.

n может быть числом, ключевым словом (четным или нечетным) или формулой (например, an + b ).

Совет: Посмотрите на :nth-of-type() селектор, чтобы выбрать элемент, который является n -й ребенок, того же тип (имя тега) его родителя.

Версия: CSS3

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

Селектор
:n-й ребенок() 4,0 9.0 3,5 3,2 9,6


Синтаксис CSS

:nth-child( номер ) {
  объявления css ;
} Демонстрация



Дополнительные примеры

Пример

Нечетные и четные ключевые слова, которые можно использовать для сопоставления дочерних элементов, индекс которых является нечетным или четным (индекс первого потомка равен 1).

Здесь мы указываем два разных цвета фона для нечетных и четных элементов p:

p: n-й ребенок (нечетный) {
фон: красный;
}

p:nth-child(четный) {
  фон: светло-зеленый;
}

Попробуйте сами »

Пример

Использование формулы ( an + b ). Описание: представляет собой размер цикла, n — счетчик (начинается с 0), b — счетчик. значение смещения.

Здесь мы указываем цвет фона для всех p элементов, индекс которых кратно 3 (будет выбран третий, шестой, девятый и т. д.):

p:nth-child(3n+0) {
  фон: красный;
}

Попробуйте сами »

Пример

Здесь мы указываем цвет фона для всех элементов p, индекс которых равен кратное 3. Затем вычитаем 1 (выберем второй, пятый, восьмой и т. д.):

p:nth-child(3n-1) {
  background: red;
}

Попробуйте сами »

❮ Предыдущая Справочник по селекторам CSS Следующий ❯


НАБОР ЦВЕТА



Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

28 900s Reference Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

| О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

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

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