Селекторы CSS основы

Введение в селекторы CSS, для начинающих

Селекторы — одна из важнейших тем в языке CSS, на этом сайте, есть даже специальный раздел посвящённый им, а в этом уроке мы лишь немного ознакомимся с ними.

Селектор (от лат. selector) — выборка, сортировка.

Как вам уже известно, язык CSS назначает элементам страницы (заголовкам, абзацам и т.д.) различные свойства, но прежде чем назначить какому-либо элементу страницы CSS-свойство, его нужно сначала выбрать.

Например, если мы хотим изменить что-либо у абзаца, мы пишем его имя p и все абзацы на сайте меняются. Но что делать, если мы хотим изменить не все абзацы страницы, а только некоторые из них? Для этого нам на помощь придут селектор класса или селектор уникального идентификатора.

Основных селекторов существует три вида, это:
1. селектор тега, просто имя тега, до этого мы работали только с ним.
2. селектор класса, это когда тегу назначается атрибут class="имяКласса" и по его имени можно выбрать элемент, одно и тоже имя класса может быть назначено нескольким тегам.
3. селектор уникального идентификатора, это когда тегу назначается атрибут id="имяУникальногоИдентификатора" и по его имени можно выбрать элемент, одно и тоже имя уникального идентификатора может быть назначено только одному тегу на странице.

Селекторы в CSS-коде

Рассмотрим примеры использования различных селекторов:

<style>
 /* влияет на все абзацы */
 p { color: green; }

 /* влияет на все элементы у которых имя 
    класса menyaemFon  */
 .menyaemFon { background-color:#eeeeee; }

 /* влияет на один элемент у которого имя 
    уникального идентификатора menyaemShrift */
 #menyaemShrift { font-weight: 18px; }
</style>

<p>
 Первый абзац</p>
<p class="menyaemFon">
 Второй абзац</p>
<p class="menyaemFon" id="menyaemShrift">
 Третий абзац</p>

В CSS-коде, имя класса должно начинаться с точки ., а уникального идентификатора с решётки #.

Схема CSS-кода

Если до этого, мы схему CSS-кода записывали так:

имяТега { CSS-свойство: значение; }

То теперь, её можно записать так:

селектор { CSS-свойство: значение; }

Где в качестве селектора может выступать:
1. имя тега: h1, p и т.д.,
2. имя класса: .имяКласса и
3. имя уникального идентификатора: #имяУникальногоИдентификатора

Читать далее: Заключение

• Category: Разное