Виды селекторов CSS

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

Примечание: знание принципов использования селекторов CSS есть обязательным для дальнейшего изучения каскадных таблиц стилей, так как они являются основой CSS кода.

Давайте же ознакомимся с основными селекторами CSS.

Селекторы элементов (тегов)

Это самые простые и элементарные селекторы. При этом, селектором является определенный элемент или тег HTML страницы. Давайте посмотрим, как это выглядит на примере:

Здесь в качестве селектора выступает заголовок первого уровня, то есть тег <h1>, а все его содержимое имеет цвет «36CFFF».

Универсальные селекторы

С помощью данного селектора можно применить стили ко всем элементам веб-страницы. Например:

Это правило делает содержимое всех элементов страницы черным цветом.

Селекторы потомков

С их помощью можно изменять стили определенного элемента, только тогда, когда он находится внутри  другого элемента. К примеру:

Таким образом, CSS применяется к тегу <em> только тогда, корда он находится внутри тега <ul>.

Селекторы классов

Они позволяют задать стили только к тем элементам, которые имеют одинаковые названия атрибута «class». Вот как это будет выглядеть html код:

А таким будет стиль:

Если же вы хотите, чтобы CSS применялся только к тегу <p>, то синтаксис будет таким:

Примечание: для одного элемента можно применять несколько классов, например: <p class="black myClass my2Class">. Еще одним важным элементом есть то, что при прописывании стиля для класса, код начинается с точки. 

Селекторы идентификаторов

Принцип использования для таких селекторов такой же самый как для селекторов классов, но атрибутом элемента выступает идентификатор. Код html:

CSS код будет следующим:

Примечание: код стиля для идентификаторов начинается с решетки «#». 

Так же, как и в случае с селекторами классов, CSS можно прописать для идентификаторов определенного элемента:

Групповые селекторы

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

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

• Синтаксис CSS
• Подключение CSS к странице
• Единицы измерения в CSS