отработает нормально, а объявление из строки 3 будет перебито объявлением из строки 6 (так как у него больше специфичность). Текст внутри нашего div будет зеленым, но не жирным.

Этот простейший пример показывает насколько важно уметь считать специфичности. Во первых, всегда можно составить правильный селектор, чтобы нужное мне объявление победило. Во-вторых, если какое-то объявление не отработало, ты сразу же поймешь, почему и сэкономишь массу времени на отладке.

Обрати внимание, что специфичность селектора идентификатора (0,1,0,0) всегда выше, чем селектора атрибута (0,0,1,0). Даже если этот атрибут — ! Поэтому:

Form.feedback input { color: #f00; /* Специфичность 0,0,2,2. */ } #name { color: #0f0; /* Специфичность 0,1,0,0. - победа! */ }

Встроенные стили

По идее, кто-то уже давно должен был спросить, а зачем, собственно, в специфичности самая первая цифра? Ведь мы ее до сих пор никак не использовали!

Все верно. Первая цифра зарезервирована для встроенных стилей. Считается, что их специфичность равна 1,0,0,0. Таким образом, встроенный стиль всегда перебивает стиль заданный во внешней или вложенной таблице стилей. Например:

Даже использовав селектор идентификатора, мы не перебъем встроенный стиль.

Div#box { color: #00f; /* Специфичность 0,1,0,1. - маловато */ }

Это что же получается? На встроенные стили нет никакой управы?

Не волнуйся. Конечно, есть способ перебить встроенные стили (а заодно и все остальные объявления).

Объявление!important

Если очень нужно, можно пометить какое нибудь объявление, как важное (important). Такое объявление будет считаться заведомо победившим при сравнивании специфичностей. Да, да, в том числе победившем и встроенные стили. Давай немного изменим CSS для предыдущего примера:

Div { color: #00f !important; /* важное объявление - сразу победа! */ }

Даже слабенький по специфичности (0,0,0,1) селектор типа перебил встроенный стиль, ведь его объявление теперь стало важным!

Детали применения!important хорошо описаны в нашем CSS-справочнике . Если хочешь узнать подробности — перейди по ссылке .

Теперь, вооружившись знанием о расчете специфичности можно продолжить изучение наследования в CSS.

Chris Coyier

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

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

• Whiskey


• Beer


• Cola

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

• Whiskey


• Beer


• Cola

Favorite {
color: olive;
font-weight: bold;
}

Осталось лишь посмотреть на результат работы этого кода. Но увы, мы не получили ожидаемого эффекта – текст выбранного нами напитка (Whiskey ) не будет выделен и отображается также, как и остальные элементы списка. В чем же дело?

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

ul#drinks li {
color: black;
font-weight: normal;
font-size: 13px;
}

Именно это CSS правило содержит определения, препятствующие визуальному выделению желаемого элемента списка. В используемом документе находится два различных CSS селектора, применяемых к одному элементу (.favorite и ul#drinks li ), которые предусматривают различные значения для цвета и толщины шрифта, содержащегося в нем текста. Что касается размерности шрифта, то здесь все понятно – рассматриваемый код содержит лишь одно выражение, определяющее его значение ( font-size: 13px ), поэтому именно оно и будет использоваться. Проблема, в данном случае, заключается в том, что браузер должен определить, какому из конфликтующих правил отдать предпочтение в процессе обработки документа. Как раз для этих целей и предназначены значения CSS специфичности каждого из правил.

Большинство проблем возникает у начинающих веб-разработчиков, которые не понимают, по какому принципу производится выбор рабочего правила. Они, как правило, предполагают, что приоритетом должен обладать селектор .favorite , так как он находится ниже в структуре CSS кода или потому, что определение атрибута class="favorite" в HTML разметке документа находится ближе к текстовому содержимому интересующего нас элемента страницы (

). Но все это, конечно же, заблуждения.

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

Favorite {
color: olive;
}
.favorite {
color: black;
}

В этом случае цвет шрифта выбранного элемента списка будет черным (*поскольку последнее правило переопределяет значение первого ). Но мы немного отклонились от темы.

Здесь работает несколько иной принцип. Всякий раз, когда вы формируете селектор для CSS правила, всегда делайте его настолько специфичным (конкретным), насколько это возможно и оправданно. (*Для этого необходимо применять более сложные селекторы ). При рассмотрении простейшего примера, приведенного выше, вы, вероятно, сами догадались, что использование лишь имени класса .favorite для селектора, выбирающего требуемый напиток из списка, будет недостаточным. И это не позволит извлечь из общего списка «нужный напиток» для его дальнейшего форматирования. А если это все-таки каким-то образом сработало один раз, то нет никакой гарантии, что в будущем все пройдет так же гладко. Для достижения желаемого результата необходимо использовать более конкретный селектор:

ul#drinks li.favorite {
color: olive;
font-weight: bold;
}

Это именно то, что я называю достаточно конкретизированный селектор , то есть тот, который в данном случае максимально точно указывает на требуемый элемент и в тоже время является достаточным, не содержащим лишних элементов, без которых можно обойтись. К примеру, вот этот вариант будет уже избыточным, хотя тоже рабочий:

html body div#content ul#dirnks li.favorite {
color: olive;
font-weight: bold;
}

Такой селектор тоже допусти́м, но он слишком «захламляет» CSS код, что значительно снижает его читабельность. К тому же от такой избыточности нет никакого толку. Существует и другой способ «вычленения» требуемого элемента, путем повышения значения CSS специфичности селектора .favorite при помощи декларации ! important :

Favorite {
color: olive! important;
font-weight: bold! important;
}

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

Если использовать ключевое слово ! important не по назначению, то можно лишь усложнить себе задачу. В том случае, когда вы хорошо знакомы с определенным CSS кодом и знаете, для каких целей используется каждый, содержащийся в нем селектор, то применение декларации ! important вполне оправдано для упрощения структуры кода и повышения его читабельности. Но если же вы применяете его с целью быстрого переопределения свойств, предусмотренных другим автором, не вникая в структуру кода и принципы его работы, то это может привести к нежелательным последствиям.

Один из классических примеров, которые я использую:

Last-block {
margin-right: 0! important;
}

Я применяю данный класс в тех случаях, когда на странице имеется несколько «плавающих» блоков (*с установленным свойством float , в данном случае со значением left ), которые размещаются в один ряд. При этом, назначая это имя класса для последнего в ряду блока (самого правого), я полностью исключаю ситуацию, когда он неплотно прилегает к границе контейнера, что в моем случае недопустимо. Даже если где-то в структуре CSS кода, в рамках правила с более специфичным (конкретным) селектором определены другие значения свойства margin-right для используемых блоков, то применение класса .last-block к крайним элементам позволит обнулить их. При этом мы не используем никаких дополнительных составляющих селектора, конкретизирующих его, что упрощает представление кода.

Подсчет значения CSS специфичности.

Рассматривая предыдущий пример, мы с вами выяснили, что наша первая попытка определения цвета и жирности шрифта для элемента списка провалилась из-за того, что мы использовали селектор лишь с одним именем класса, который имеет меньшее значение CSS специфичности и был переопределен селектором, выбирающим неупорядоченный список по его идентификатору ID, который имеет большее значение специфичности. Ключевыми значениями в данном случае являются имена классов (class) и идентификаторы элементов (ID). Очень важно знать, что CSS стандарты предусматривают существенные различия в весовых значениях специфичности для селекторов классов class и идентификаторов ID. Селекторы, использующие идентификаторы элементов, имеют безупречное преимущество над теми, в которых применяются лишь имена классов. При любом количестве имен классов в селекторе, он будет переопределен другим селектором, имеющим в своем составе один идентификатор элемента.

Теперь давайте схематически рассмотрим метод определения и записи значений CSS специфичности селекторов:

Другими словами:

• Если в теге элемента предусмотрен атрибут style , то все определенные в его рамках свойства имеют максимальный приоритет (значение специфичности в этом случае получает высший разряд – 1,0,0,0 ).
• Для каждого идентификатора элемента, используемого в рамках селектора прибавляется единица в соответствующий разряд специфичности – 0,1,0,0 .
• Каждое имя класса, а также псевдокласса или селектор атрибута (* element ), присутствующий в селекторе правила добавляет единицу в следующий разряд специфичности – 0,0,1,0 .
• И последний, самый младший разряд, получает по единице за каждое, присутствующее в селекторе имя элемента – 0,0,0,1 .

Вы можете избавиться от запятых и преобразовать значения CSS специфичности в более привычную для вас форму представления значений – обычные числа: 1,0,0,0 можно представить как 1000 , что значительно больше значения 0,1,0,0 или 100 . Используемые в этом случае запятые предназначены для четкого разделения значений различных разрядов специфичности. К примеру, если в CSS селекторе используется 13 имен классов, псевдоклассов и/или селекторов атрибутов (что маловероятно), то значение специфичности в этом случае может принять вид 0,1,13,4 , что невозможно представить в десятичном виде.

Директива ! important , следующая непосредственно за определенным CSS свойством, априори придает максимальное значение его специфичности. Она отменяет действие даже тех свойств, которые указаны в inline -атрибуте "class" тега элемента. Единственный способ переопределения свойства с директивой ! important — это создание нового правила, содержащего то же свойство и декларацию ! important , которое находится ниже в CSS коде. К тому же, второе правило должно иметь равное или большое значение специфичности, чем первое (которое необходимо отменить). Другими словами, для директивы ! important можно определить еще один разряд в значении специфичности – 1,0,0,0,0 , хотя такой ее записи, конечно же, не существует.

* Исчерпывающую информацию по декларации ! important можно прочесть .

* Примечание переводчика.

Допустим, у Вас есть несколько селекторов которые ссылаются на один и тот же элемент:

Открыв HTML страницу где элемент span находится внутри элемента div мы увидим подчеркнутый текст. А если мы пойдем дальше и с помощью плагина Firebug посмотрим стили вложенного элемента, мы увидим следующее:

Div span { text-decoration:underline; } span { text-decoration:none; }

Сразу же возникает вопрос о причине такого поведения. Ведь второй селектор должен перекрывать первый учитывая каскадность стилей. Данный пример как нельзя четко показывает что такое специфичность селекторов.

Правила специфичности

Специфичность селекторов (selector"s specificity) определяет их приоритетность в таблице стилей. Чем специфичнее селектор, тем выше его приоритет.

В спецификации по CSS 2.1 этой теме посвящен небольшой раздел. Существует 4 правила по которым вычисляется специфичность селекторов:

1. Самый высокий приоритет имеет атрибут style . Это правило перекрывает все селекторы описанные в стилях.
2. Второе место занимает присутствие ID в селекторе(#some-id).
3. Далее идут все атрибуты(в том числе и атрибут class ) и псевдоклассы(pseudo-classes) в селекторе.
4. Самый низкий приоритет у селекторов с именами элементов и псевдоэлементами(pseudo-elements).

Все 4 правила сводятся в одну систему a-b-c-d (где а - наивысший приоритет) и образуют специфичность.

Селектор	Специфичность a-b-c-d	Правило №
*	0-0-0-0	-
li	0-0-0-1	4
li:first-line	0-0-0-2	4
ul li	0-0-0-2	4
ul ol+li	0-0-0-3	4
form + *	0-0-1-1	3, 4
table tr td.second	0-0-1-3	3, 4
h2.block.title.	0-0-2-1	3, 4
#xyz	0-1-0-0	2
style=" "	1-0-0-0	1

Пример специфичности - правило №1:

content

Текст внутри элемента p будет отображаться синим цветом независимо от селектора с айди(id), где также указано свойство color со значением red . Правило номер 1 всегда перекрывает все селекторы и имеет наивысшую приоритетность.

Правило №2:

• first
• second

Несмотря на то что селектор с id указан в стилях сверху, именно он повлияет на отображение документа, так как более специфичен нежели селектор с классом second .

Правило №3:

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

Вернемся к первому примеру этой статьи - правило №4:

div span { text-decoration:underline; } span { text-decoration:none; }

Первый селектор выигрывает у второго потому что включает в себя 2 последних правила специфичности, в то время как второй - всего одно. Чтобы убрать декорирование текста в данном случае следует использовать класс или более специфичный селектор:

Div span { text-decoration:underline; } body span { text-decoration:none; }

Теперь селекторы имеют одинаковый вес(0-0-0-2 = 0-0-0-2) касательно специфичности. Второй селектор просто перекроет свойство первого так как описан ниже.

Уверен, что большинство верстальщиков точно знают 2 первых правила специфичности селекторов про id и style и эта статья не была для них чем-то новым. Но не стоит забывать о двух оставшихся, ведь это может существенно приостановить процесс создания верстки и увеличить время выявления возникшей ошибки.

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

--
Владислав Razor Чапюк, апрель 2009

Любой профессионал своего дела должен владеть терминологией. Если Вы занимаетесь версткой, можете ли без раздумий ответить на вопрос в заголовке статьи?

Возможно сейчас вы откроете для себя что-то новое. Давайте сделаем решительный шаг на пути к профессионализму:)

Наследование

Начнем с самой простой для понимания концепции CSS. Суть ее состоит в том, что стили, присвоенные некоторому элементу, наследуются всеми потомками (вложенными элементами), если они не переопределены явно. Например, размер шрифта и его цвет достаточно применить к дескриптору body чтобы все элементы внутри имели те же свойства. Но, для заголовков h1-h6 размер шрифта не будет присвоен, потому что у браузера для них есть своя таблица стилей по умолчанию, а наследованные стили имеют самый низкий приоритет. Аналогичная ситуация с цветом ссылок.

Таким образом, наследование позволяет сократить таблицу CSS. Но в то же время если стилей много, то отследить какой родительский элемент установил некоторое свойство, становится довольно сложно.

Каскадирование

Правила каскадирования позволяют разрешать ситуации, когда для одного элемента прописано несколько стилей. Каскадирование основано на присвоении некоторого приоритета каждому правилу. Авторские таблицы стилей имеют самый большой приоритет, меньший — пользовательские, самый низкий — таблицы стилей по умолчанию браузера. У пользователя есть возможность переопределить авторское правило путем добавления флага!important к своему.

Правила каскадирования определяют следующие приоритеты:

1. пользовательские стили, отмеченные!important
2. авторские стили, отмеченные!important
3. авторские стили
4. пользовательские стили
5. стили по умолчанию

После каскадирования правила упорядочиваются на основе специфичности селекторов.

Специфичность

Специфичность — это некоторое число в системе с неопределенно высоким основанием, которое является отражением приоритета какого-либо правила. Вычисляется оно на основе специфичности каждого из селекторов, входящих в правило CSS.

Специфичность селектора разбивается на 4 группы — a b c d:

• если стиль встроенный, т.е. определен как style="", то а=1
• значение b равно количеству селекторов идентификаторов
• значение c равно количеству классов, псевдоклассов и селекторов атрибутов
• значение d равно количеству селекторов типов

Пример вычисления специфичности:

Селектор	Специфичность	Специфичность в системе с основанием 10
Style=""	1,0,0,0	1000
#wrapper #content {}	0,2,0,0	200
#content .datePosted {}	0,1,1,0	110
div#content {}	0,1,0,1	101
#content {}	0,1,0,0	100
p.comment .datePosted {}	0,0,2,1	21
p.comment {}	0,0,1,1	11
div p {}	0,0,0,2	2
p {}	0,0,0,1	1

Неопределенно высокое основание системы счисления является следствием того, что неизвестно заранее, насколько большими будут числа a, b, c, d. Если они меньше 10, то удобно использовать десятичную СС.

В больших проектах при разрастании CSS файлов получается не очень радостная ситуация. Из-за большого количества правил возникает трудность с тем, чтобы определить, какие стили должны быть применены к конкретному элементу. Какие-то стили наследуется, что-то определено через целую цепочку всевозможных селекторов, где-то используется .class , где-то #id , а где-то вообще inline-style .

Чтобы изменить стили для элемента, нам приходится играться с весами селекторов. Чтобы облегчить нашу работу, мы можем следовать нескольким рекомендациям:

1. Никогда не использовать ID селекторы в CSS . У них нет никаких преимуществ по сравнению с class .
   • Все, что можно сделать с ID , можно сделать и с class .
   • ID не могут быть переиспользованны.
   • Вес ID очень большой. Перебить ID нельзя даже сотней цепных class-ов .
2. Не создавайте излишних селекторов. Если .header-nav {} прекрасно работает, то не используйте определение .header .header-nav {} . В этом случае ничего не изменится и никакой выгоды от этого не будет.
3. Не конкретизируйте селекторы, пока это действительно не понадобится. Если .nav {} работает, то не используйте ul.nav {} . Такая запись лишь сократит варианты использования данного класса .nav , а так же повысит вес селектора без очевидной пользы.
4. Заставьте себя использовать .class , потому что это идеальные селекторы.

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

Это все очень простые правила и следовать им не так-то трудно.

Уменьшение веса ID

Предположим у вас есть виджет на странице и вы хотите его стилизовать:

И, например, мы не можем изменять HTML код виджета, чтобы избавиться от ID. Поэтому мы делаем так:

#widget { ... }

В результате мы имеем определение для ID в CSS файле, что совсем нехорошо. Вместо этого мы можем сделать следующее:

{ ... }

Это селектор атрибута. В данном случае это уже определение не для ID , а для элемента. Если говорить точно, то селектор говорит: «Эй, найди мне элемент, у которого есть атрибут id со значением widget ».

Прелесть такого подхода в том, что мы снизили вес ID до веса класса. Но это хак.

Безопасное увеличение веса

Увеличить вес селектора мы можем так:

Btn.btn.btn.btn { ... }

Но я надеюсь, что никогда не придется использовать такую запись на проектах.

Здесь мы видим, что цвет, заданный в .box a {} , перетирает цвет текста кнопки. В итоге текст сливается с фоном кнопки.

Конечно, мы можем исправить это, если поставим !important (jsfiddle.net/csswizardry/3N53n/1), но нет, спасибо, избавимся от этого!

Мы можем добавить дополнительный селектор в секцию .btn {} (23 строка) jsfiddle.net/csswizardry/3N53n/2 , но это не самое лучшее решение. Что, если проблема с кнопкой будет не только в .box , а где-либо еще? Каждый раз добавлять новый селектор – плохой вариант.

Поэтому мы продублируем .btn.btn : http://jsfiddle.net/csswizardry/3N53n/3

Это так же не самое лучшее решение, но все же мы увеличили вес селектора и цвет на кнопке теперь такой, какой и должен быть.

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