Название

Селекторы CSS. Выбираем элементы на странице по значению их атрибутов class и id.

Еще одним способом, как можно выбрать элементы на веб-страницы и применить к ним стили CSS являются селекторы по атрибутам class и id.

Эти селекторы позволяют найти на веб-странице элементы, у которых добавлены атрибуты class или id.

Почитать об этих атрибутах можно здесь.

Давайте начнем с правил.

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

.имя_класса {стили}

Сначала ставиться знак точка ".", это значит, что выбираются элементы по имени класса, а затем следует само имя класса.

Для выбора элеменов по имени атрибута id используется следующая форма записи:

#имя_id {стили}

Знак "решетка", который ставиться перед именем атрибута id, означает то, что выборка производится по значению атрибута id.

Давайте на конкретном примере рассмотрим, как можно с помощью CSS выбирать эти элементы.

Делаем красным цветом два элемента абзацев, у которых выставлен атрибут class со значением my_class.

Исходный код HTML:

<h1>Чем отличаются атрибуты HTML id от class.</h1>
<p>Эта статья является продолжением статьи об атрибутах id и class. Если вы успели ее прочитать, то у вас наверняка мог возникнуть вопрос, чем же отличаются эти атрибуты друг от друга?</p>
<p>Бывают ситуации, что одному элементу присваиваются сразу оба атрибута:</p>
<p class="my_class">В чем же отличие?</p>
<p class="my_class">Атрибут id расшифровывается от английского слова «identificator», которое переводиться как «идентификатор» или уникальный признак объекта, позволяющий различать его от других объектов. Это, своего рода, паспорт элемента.</p>

Код CSS:

.my_class {color:red}

Как можно видеть из примера, текст двух абзацев, у которых выставлен атрибут стал красным.

Теперь рассмотрим аналогичный пример, но теперь сделаем красным цветом абзац с атрибутом id="my_id".

Исходный код HTML:

<h1>Чем отличаются атрибуты HTML id от class.</h1>
<p>Эта статья является продолжением статьи об атрибутах id и class. Если вы успели ее прочитать, то у вас наверняка мог возникнуть вопрос, чем же отличаются эти атрибуты друг от друга?</p>
<p>Бывают ситуации, что одному элементу присваиваются сразу оба атрибута:</p>
<p id="my_id">В чем же отличие?</p>
<p>Атрибут id расшифровывается от английского слова «identificator», которое переводиться как «идентификатор» или уникальный признак объекта, позволяющий различать его от других объектов. Это, своего рода, паспорт элемента.</p>

Код CSS:

#my_id {color:red;}

Таковы основные принципы работы с селекторами для элементов, у которых используются атрибуты class и id. Поэкспериментируйте с этим на практике.

Назад Далее