Введение в веб-разработку с HTML, CSS, JavaScript - стр. 14
И существует три разных типов селекторов: элемент, класс и идентификатор.
Первый тип селектора – элемент – это просто указание имени элемента. Например, в этом случае селектор p говорит о том, что текст каждого абзаца в нашем HTML-документе должен быть синего цвета.
И это объявление никак не влияет на другие элементы, содержащие текст. Например, у нас может быть элемент div, содержащий текст, но на этот текст не повлияет наше правило CSS для абзаца.
Далее идет селектор класса, который указывается точкой и именем класса. В этом случае мы создаем класс blue CSS, который будет окрашивать синим цветом.
И селектор класса требует изменения вашего HTML-документа, так как каждый элемент, к которому вы хотите применить этот класс, должен иметь атрибут класса с именем этого класса.
В этом случае у нас есть p, тег абзаца и тег div, и оба имеют атрибут class="blue" и, следовательно, их текстовое содержимое будет окрашено в синий цвет.
Обратите внимание, что это совершенно не влияет на другой абзац, не помеченный атрибутом class="blue".
И обратите внимание на разницу между тем, как вы определяете класс, и тем, как вы используете класс. Вы всегда определяете класс с точкой перед именем. И между точкой и именем класса не должно быть пробела. Однако, когда вы используете класс, вы не используете точку в его имени, вы просто используете его имя.
И последний тип селектора – это селектор id.
Вы указываете селектор идентификатора с помощью значения идентификатора элемента в вашем HTML-документе, которому предшествует знак решетки.
Так, например, если у вас есть элемент div с id="name", а затем вы указываете правило CSS с помощью селектора #name, объявления CSS будут применяться к содержимому элемента div с его значением id name.
Селектор идентификатора определяется знаком решетки, за которым следует значение идентификатора в вашем HTML-документе. И опять же, у вас не может быть никакого промежутка между ними.
Теперь, чтобы писать более эффективные правила, CSS позволяет нам сгруппировать несколько селекторов в одно правило CSS.
Здесь у нас есть два селектора, сгруппированные вместе, div и также селектор класса blue, так как они оба используют одно и то же объявление CSS.
Помимо группировки селекторов существует объединение или комбинирование селекторов. И объединение селекторов – это очень мощная техника, позволяющая более точно выделять элементы документа.
Первый способ комбинирования селекторов – это селектор элемента с селектором класса.
Здесь у нас есть селектор элемента p, за которым сразу без пробелов следует точка, которая является селектором класса. И это говорит о том, что мы хотим выделить каждый элемент p, который имеет атрибут класса со значением big.