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

Описание

Он обозначается в виде символа «*». С его помощью можно выделить сразу все теги на странице не делая поправок на их назначение и вложенность. Например:

*  {
   font-size: 18px;
}

С помощью этой записи мы задали всем элементам имеющим текст высоту шрифта в 18 пикселей.

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

Также стоит отметить, что использование класса, идентификатора, атрибута позволяет без какого либо вреда пропустить универсальный селектор. Например:

*.left {
   border: 1px solid #000;
}
.left {
   border:  1px solid #000;
}

Данные записи несут одинаковую смысловую нагрузку, и стиль будет применён одинаково как с использование универсального селектора, так и без.

Где его можно применить?

В основном универсальный селектор встречается на практике при обнулении стилей браузера, которые идут по умолчанию. Например, отступов, размеров шрифта и так далее.

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

Недостатки универсального селектора при сбрасывании стандартных стилей:

• некоторые из стилей сбросить не может
• для атрибута select не может обнулить отступ padding
• может «убить» стандартный вид кнопки в большинстве браузеров
• в браузере Mozila работает с небольшими багами
• существенно замедляет погрузку страницы для Mozila (однако это касается сайтов с CSS имеющим более тысячи строк, в ином случае задержка незаметна.)

По описанным выше причинам советуют сбрасывать стили конкретно для каждого элемента с использованием селектора типа. Пример подобного кода для сброса стилей приведен в конце статьи о специфичности в CSS.