Памятка по CSS-селекторам

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

Вот пример использования селекторов. В следующем коде aи h1являются селекторами:

a { color: black; } h1 { font-size 24px; }

Шпаргалка по общим селекторам

headвыбирает элемент с headтегом

.red выбирает все элементы с классом 'красный'

#nav выбирает элементы с идентификатором 'nav'

div.rowвыбирает все элементы с divтегом и классом 'row'

["]выбирает все элементы с aria-hiddenатрибутом со значением «истина»

  • Селектор подстановочных знаков. Выбирает все элементы DOM. См. Ниже, как использовать его с другими селекторами.

Мы можем комбинировать селекторы интересными способами

Некоторые примеры:

li aКомбинатор потомков DOM. Все aтеги, являющиеся дочерними для liтегов

div.row *выбирает все элементы, которые являются потомками (или дочерними элементами) элементов с divтегом и классом 'row'

li > aКомбинатор различий. Выбирать прямых потомков, а не всех потомков, таких как селекторы потомков

li + aСмежный комбинатор. Он выбирает элемент, которому непосредственно предшествует предыдущий элемент. В этом случае только первое aпосле каждого li.

li, aВыбирает все aэлементы и все liэлементы.

li ~ aБратский комбинатор. Выбирает aэлемент, следующий за liэлементом.

Псевдоселекторы или псевдоструктурные классы

Они также полезны для выбора структурных элементов из модели DOM.

Вот некоторые из них:

:first-child Нацельтесь на первый элемент непосредственно внутри (или дочернего) другого элемента

:last-child Нацельтесь на последний элемент непосредственно внутри (или дочернего) другого элемента

:nth-child()Нацельтесь на n-й элемент непосредственно внутри (или дочернего) другого элемента. Допускает целые числа, even, odd, или формулы

a:not(.name)Выбирает все aэлементы, не относящиеся к .nameклассу

::afterПозволяет вставлять содержимое на страницу из CSS вместо HTML. Хотя конечный результат на самом деле не находится в DOM, он отображается на странице так, как будто он есть. Этот контент загружается после HTML-элементов.

::beforeПозволяет вставлять содержимое на страницу из CSS вместо HTML. Хотя конечный результат на самом деле не находится в DOM, он отображается на странице так, как будто он есть. Это содержимое загружается перед элементами HTML.

Мы можем использовать псевдоклассы для определения особого состояния элемента DOM. Но они не указывают на элемент сами по себе.

Некоторые примеры:

:hover выбирает элемент, на который наведен указатель мыши

:focus выбирает элемент, получающий фокус с клавиатуры или программно

:active выбирает элемент, по которому щелкают указателем мыши

:link выбирает все ссылки, которые еще не были нажаты

:visited выбирает ссылку, по которой уже нажимали

Дополнительная информация о селекторе nth-child

nth-childСелектор является CSS псевдо-класс принимает шаблон , по которому будет соответствовать один или более элементов по отношению к их положению между братьями и сестрами.

Синтаксис

 a:nth-child(pattern) { /* Css goes here */ }

Шаблон

Принятые шаблоны nth-childмогут иметь форму ключевых слов или уравнения формы An + B.

Ключевые слова

Странный

Odd возвращает все нечетные элементы данного типа.

 a:nth-childe(odd) { /* CSS goes here */ }
Четный

Even возвращает все четные элементы данного типа.

 a:nth-childe(even) { /* CSS goes here */ }

An + B

Возвращает все элементы, соответствующие уравнению An + B для каждого положительного целочисленного значения n (в дополнение к 0).

Например, следующее будет соответствовать каждому третьему элементу привязки:

 a:nth-childe(3n) { /* CSS goes here */ }

Игры

CSS Diner - это веб-игра, которая учит почти всему, что нужно знать о комбинировании селекторов.

Дополнительные ссылки

Есть еще много других CSS-селекторов! Узнайте о них на CodeTuts, CSS-tricks.com или в сети разработчиков Mozilla.