CSS — Подклассы или селекторы

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

CSS — Подклассы или селекторы

HTML — Часть

Фактически подклассы или селекторы в CSS достаточно просты для понимания. Они позволяют наследовать свойства родительского компонента и иметь свои собственные, которые будут использовать или переписывать значения от родителя. Соответственно это пригодится в случаях, когда у вас два компонента имеют одно описание стилей. Давайте разберем подобную ситуацию на примере.

Небольшое лирическое отступление: мне не нравится название селекторы, потому что для понимания селекторы мозгом воспринимаются как нечто, которое выбирается, без связки с каким-то стилями. Называть селекторы подклассами проще. Потому что подкласс обуславливает связь с родительским элементом. Но правильно называть подобные элементы СЕЛЕКТОРАМИ.

Например у вас есть подобный div:

И есть div, который предназначен для информации с примечанием, но тоже относящийся к классу «bodytext»:

Вас до нынешнего момента устраивало оформление, но вдруг вы поняли, что пришло время перемен. При этом вы не хотите писать отдельный класс, вас устроил бы вариант, в котором содержатся все стили текущего класса bodytext, но именно для блока с примечаниями, хотите дописать свои стили. Тогда все, что вам необходимо сделать, это дописать в строке с классом селектор для конкретного блока:

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

CSS — Часть

Наш текущий класс содержит стандартный цвет текста, размер 12 пикселей, рамочку вокруг текста, фон за текстом и отступы от рамок примерно по 5 пикселей с каждой стороны, и фиксированную ширину блока с текстом:

Выглядит это так:

Но мы хотим, чтобы примечание, было например зеленым! Таким образом мы например под основным текстом укажем какую-то подсказку. Для этого в наш css файл добавляем строки, которые будут переписывать и дорисовывать стили класса bodytext и при этом обладать своими собственными:

В свою очередь блоки преобразятся в такой вид:

Новое!