CSS селекторы: специфичность

CSS селекторы: специфичность

От автора: представьте специфичность в виде оценки или степени, которая решает, какие стили применить к элементу. Универсальный селектор (*) имеет низкую специфичность. Селектор id – высокую. Родительские селекторы типа p img и дочерние селекторы типа .panel > h2 имеют более высокую специфичность, чем типовые селекторы p, img и h1.

По началу, кажется, сложно вычислить точное значение специфичности. В спецификации Selectors Level 3 говорится, что для этого вам необходимо:

подсчитать количество id селекторов в селекторе (=А);

подсчитать количество классов, селекторов атрибутов и псевдоклассов в селекторе (=В);

подсчитать количество типовых селекторов и псевдоэлементов в селекторе (=С);

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

проигнорировать универсальный селектор.

Значения А, В и С вместе дают конечное значение специфичности. ID селектор типа #foo имеет специфичность 1,0,0. Селекторы атрибутов типа [type=email] и классы типа .chart имеют специфичность 0,1,0. Если добавить псевдокласс типа :first-child (например, .chart:first-child), специфичность станет 0,2,0. А простые типовые или элементные селекторы типа h1 и p дают всего лишь 0,0,1.

Заметка: вычисление специфичности

Выучить и вычислить специфичность селектора можно с помощью ресурсов Specificity Calculator от Keegan Street и CSS Explain от Joshua Peek.

Сложные селекторы и комбинаторы дают, естественно, большую специфичность. Разберем пример CSS:

ul#story-list > .book-review {
 color: #0c0;
}

#story-list > .book-review {
 color: #f60;
}

Эти правила похожи, но не одинаковы. В первом селекторе ul#story-list > .bookreview находится типовой селектор (ul), ID селектор (#story-list) и класс (.bookreview). Специфичность равна 1,1,1. Во втором селекторе #story-list > .book-review хранятся только ID и класс. Специфичность равна 1,1,0. Несмотря на то, что #story-list > .book-review объявлен ниже ul#story-list > .bookreview, высокая специфичность последнего заставить элементы с классом .book-review окраситься в зеленый, а не оранжевый цвет.

Псевдоклассы :link и :invalid имеют ту же специфичность, что и классы. У a:link и a.external будет одна специфичность, равная 0,1,1. Точно так же псевдоэлементы типа ::before и ::after имеют одинаковую специфичность с типовыми и элементными селекторами. Если два селектора имеют одинаковую специфичность, в дело вступает каскадирование. Пример:

a:link {
 color: #369;
}
a.external {
 color: #f60;
}

Если применить CSS код выше, то все ссылки станут синевато-серыми кроме тех, у которых есть class=»external». Такие ссылки будут иметь оранжевый цвет.

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

В главе 2 мы обсудим, как поддерживать низкую специфичность.

Заключение

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

как использовать селекторы и применять стили к конкретным элементам, псевдоэлементам и псевдоклассам;

понимать различия между псевдоэлементами и псевдоклассами;

использовать новые псевдоклассы, представленные в спецификациях Selectors Level 3 и 4;

вычислять специфичность.

В следующей главе мы расскажем про золотые правила написания обслуживаемого и масштабируемого CSS кода.

Автор: Tiffany Brown

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree