CSS tips CSS примеры

В каждом CSS стиле вам необходимо указывать селектор и правило, которое будет применимо к селектору. Но что вы можете указать в качестве селектора?

/* CSS style */ selector { property-1: value-1; property-2: value-2; ... property-N: value-N }

Обратите внимание, ставить точку с запятой после последнего правила совсем не обязательно, этот символ служит лишь для разделения правил между собой.

Если необходимо применить один и тот же стиль к нескольким элементам, просто перечислите их через запятую.

/* comma separated selectors */ selector1, selector2, ..., selectorN { ... }

Комбинирование таким способом работает по правилу логического ИЛИ.

Используйте '#' для выборки по id и '.' для выборки по классу среди всех элементов документа.

/* '#' & '.' */ element-tag, #identifier, .class-name { ... }

Если вам необходимо выбрать элементы, которые соответствуют одновременно нескольким селекторам, укажите их друг за другом.

/* selectors intersection */ selector1 selector2 ... selectorN { ... }

Например, если вам необходимо указать стиль для элемента с тегом 'span' и классами 'picked' и 'raw', то это можно сделать так:

span .picked .raw { ... }

Или, опуская необязательные пробелы, так:

span.picked.raw { ... }

Комбинирование таким способом работает по правилу логического И.

Пример наследования. Если элемент 'child', стиль которого вы хотите настроить, является прямым потомком элемента 'parent', то можно привязать стиль к потомку через родителя:

/* elements inheritance */ parent > child { ... }

Стиль, описанный таким способом будет работать на элементе 'child' тогда и только тогда, когда он является прямым потомком элемента 'parent'.

Вы также можете настраивать стили для элементов со специфичными свойствами. Просто укажите пары 'атрибут=значение' в квадратных скобках после селектора.

/* selecting by attributes */ selector[attr1 = val1][attr2 = val2] { ... }

Важно: пробелы между селектором и квадратными скобками ставить нельзя. Иначе всё правило не сработает.

CSS подсказки по селекторам