Вложенный или контекстный селектор в CSS

Тип обращений который представляет собой комбинацию двух селекторов, разделенных пробелом. Такие селекторы известны как вложенные или контекстные и интерпретируются справа налево. Важно отметить, что эти ссылки могут находиться как непосредственно внутри тегов с указанным классом, так и внутри вложенных тегов на любом уровне глубины.

.nav__list a { ‹ Обращение к тегу a внутри класса .nav__list    
  font-size: 16px;
}

С помощью пробела можно комбинировать любые типы селекторов. В данном примере селектор выбирает все элементы с классом "warning", которые находятся внутри элементов с классом "text".

.text .warning { ‹ Обращение к селектору 'warning' внутри селектора 'text'     
  color: red;
}

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

Псевдоэлементы и псевдоклассы в CSS

Селекторы можно расширять с помощью так называемых псевдоклассов, которые бывают разными.

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

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

Кроме того, существуют специальные псевдоклассы, которые позволяют реагировать на состояние элементов форм. Например, можно выбрать все обязательные или, наоборот, необязательные поля формы.

Вот небольшие отличия в синтаксисе пcевдоэлементов и псевдоклассов.

Псевдоэлементы пишутся с двумя двоеточиями ::

Например ::before и ::after

Псевдоклассы пишутся с одним двоеточием :

Например :hover