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


Содержание материала:

CSS :: Наследование, каскадирование и приоритетность стилей

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

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

Каскадирование стилей CSS

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

Давайте для начала рассмотрим простейший случай, показанный в примере №1.

Пример №1. Простейший случай каскадности стилей CSS

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

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

Специфичность селекторов CSS

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

Расчет специфичности селектора производится при помощи трех чисел ( a , b , c ). Происходит это следующим образом:

  • числу a присваивается количество идентификаторов в селекторе;
  • числу b присваивается суммарное количество классов, атрибутов и псевдоклассов в селекторе;
  • числу c присваивается суммарное количество элементов и псевдоэлементов.

После подсчета чисел у всех сравниваемых селекторов, селектором с большей специфичностью будет считаться тот, у которого больше число a , в независимости от величины чисел b и c . Если же у сравниваемых селекторов число a окажется одинаковым, будет сравниваться их число b , а в случае необходимости и число c (см. пример №2).

Пример №2. Сравнение специфичности селекторов

Виды и приоритет стилей CSS

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

    обладает наиболее низким приоритетом и применяется по умолчанию к элементам html -кода, к которым не применяется другое форматирование, говоря проще – к ‘голому’ html -коду. устанавливается в настройках браузера пользователем и по сути представляет собой измененный пользователем стиль браузера по умолчанию. Так что, если пользователь изменил стиль браузера, то по умолчанию станет применяться стиль пользователя. устанавливается автором страницы (программистом) и обладает еще большим приоритетом. Именно он нас и будет больше всего интересовать.

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

  • Стили, унаследованные элементами-потомками от своих родителей, обладают самым низким приоритетом.
  • Стили, заданные во внешних таблицах обладают большим приоритетом. При этом правила, которые идут в коде внешней таблицы стилей ниже (т.е. встречаются позже) имеют больший приоритет перед правилами, которые встречаются в коде этой таблицы выше (т.е. раньше). Кроме того, из нескольких внешних таблиц стилей большим приоритетом обладают таблицы, подключенные к документу при помощи элемента ‘link’ ниже в коде этого документа. Соответственно, если таблица подключена в коде документа выше, то приоритет ее стилей будет ниже.
  • Стили внутренних таблиц (расположены внутри контейнеров ‘style’) имеют приоритет перед стилями внешних таблиц, но только если они расположены в коде ниже, чем элемент ‘link’, при помощи которого была подключена внешняя таблица стилей. Опять же, правила, которые идут в коде внутренней таблицы стилей ниже имеют больший приоритет перед правилами, которые встречаются в коде этой таблицы выше. Кроме того, если в документе используется несколько внутренних таблиц стилей, т.е. имеется несколько элементов ‘style’, то большим приоритетом обладают стили тех таблиц, которые расположены в коде документа ниже.
  • Еще большим приоритетом обладают встроенные стили, которые преобладают над правилами с любой специфичностью селекторов. Действительно, куда уже конкретнее, если стиль расположен в открывающем теге элемента.

Служебный параметр !important

Отдельно следует сказать про служебный параметр !important (от англ. important – важный), который указывается в случае необходимости во внутренних и внешних таблицах стилей после значения css -свойства через пробел, например, p (см. пример №3). Свойство стиля, в котором указан данный параметр, обладает наибольшим приоритетом в независимости от расположения таблицы стилей в коде документа или же самого правила внутри таблицы стилей, но только в ситуации, когда специфичности стилей равны (при этом не следует забывать, что специфичность встроенного стиля следует считать наивысшей в любом случае!). Опять же, если свойств с таким параметром несколько, да еще и специфичности соответствующих селекторов одинаковы, то приоритет будет определяться по виду стиля, расположению таблиц стилей или же, если они окажутся в одной и той же таблице стилей, сравнению их расположения в коде этой таблицы.

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

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

Использование одинаковых свойств CSS в одном правиле

В заключение данного пункта добавим, что в одном и том же правиле иногда задают два одинаковых свойства, но с разными значениями (см. пример №4). Так обычно поступают, когда одно из значений свойства не поддерживается каким-нибудь браузером, тогда его помещают в блоке объявлений (стиле) вторым, а другое правило, которое поддерживается всеми браузерами, помещают первым. В результате, если страница открывается в браузере, в котором второе правило не имеет силы, оно будет проигнорировано, а браузер применит первое правило. Если же страница открывается в браузере, в котором имеют силу и первое и второе правила, то второе правило будет иметь больший приоритет, т.к. следует в коде позже. Таким образом, в любом случае будет реализована задумка программиста, а не применено значение свойства устанавливаемое браузером по умолчанию или наследуемое от родительского элемента.

CSS каскадирование, специфичность, наследование: что это и как правильно использовать?

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

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

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

Начнем с самой простой для понимания концепции 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: профессиональное применение web-стандартов».

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

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

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

Как это выглядит

Специфичность представляет собой группу из четырех чисел. Например, 0,0,0,0 или 0,0,1,2.

Как подсчитать специфичность

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

  • каждый присутствующий в селекторе идентификатор добавляет к специфичности 0,1,0,0;
  • каждый класс, псевдокласс или атрибут добавляет к специфичности 0,0,1,0;
  • каждый элемент или псевдоэлемент добавляет к специфичности 0,0,0,1;
  • универсальный селектор и комбинаторы не учитываются.

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

Превая строка — одинокий селектор типа. Специфичность 0,0,0,1.

Вторая строка — два селектора типа. Специфичность 0,0,0,2.

Теретья строка — селектор типа и класса. Специфичность 0,0,1,1.

Четвертая строка — два селектора типа, один класса и один атрибута. Специфичность 0,0,2,2.

Пятая строка — селектор идентификатора, типа и псевдокласс. Специфичность 0,1,1,1.

Кто победил?

Сравниваются специфичности очень просто. Какое число больше, то определение и выиграло.

Например:
0,0,1,4 больше, чем 0,0,1,2.
0,1,2,0 больше, чем 0,0,2,1.

Учти, что первые (те, которые левее) числа всегда возьмут верх над последующими (более правыми). Они как бы находятся в более старшем разряде.

Например, 0,1,0,0 больше, чем 0,0,8,9.

Если тебе так удобнее, можешь мысленно отбросить запятые и рассматривать предыдущий пример, как 100>89. Только не запутайся, если какой-то из разрядов специфичности будет больше девяти (что может быть при сильно навороченном селекторе). Например, если получилась специфичность 0,1,10,14, запятые отбрасывать нельзя, а то все разряды попутаются.

Специфичность и объявления

Специфичность относится как бы не ко всему правилу в целом, а к каждому конкретному объявлению. Поэтому, может получиться что правило «отработает» не полностью. Например:

Объявление из строки 2 для элемента

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

Интересно знать

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

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

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

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

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

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

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

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

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

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

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

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

Про CSS

Сколько весят селекторы?

Все CSS-селекторы имеют свой вес, который определяет как взаимодействуют одинаковые свойства, заданные в разных местах кода одному и тому же элементу.

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

Вот пример проблемы. Есть див с , внутри него некоторый текст и список ссылок.

Сначала задаём всем ссылкам внутри #container оранжевый фон:

А потом, чтобы в списке .list внутри контейнера ссылки имели зелёный фон, ниже дописываем такое:

Казалось бы, ссылки в тексте должны получить оранжевый фон, а ссылки в списке — зеленый, но нет:

Почему так? Потому, что первый селектор содержит ID и перевешивает второй, то есть:

#container A > .list A

Сколько весят селекторы?

Специфичность селектора рассчитывается по 4-м позициям:

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

Вес селекторов (по убыванию):

У стилей, заданных в атрибуте style , на первой позиции будет единица — 1,0,0,0 . Это самая высокая специфичность, которая перевешивает свойства, заданные другими способами.

Переопределить стили, заданные в style , можно дописав !important к значению свойства в таблице стилей.

Обратный вариант — универсальный селектор \* . Он не имеет веса: 0,0,0,0 .

LI 0,0,0,1 — селектор по тегу UL LI 0,0,0,2 — селектор c двумя тегами весит больше, чем с одним. .orange 0,0,1,0 — селектор с классом весит больше, чем селектор с тегом. .orange A SPAN 0,0,1,2 — селектор перевесит предыдущий, потому что помимо класса содержит два тега. #page .orange 0,1,1,0 — селектор с ID перевесит всё, кроме inline-стилей.

Теперь сравним селекторы из исходного примера:

0,1,0,1 > 0,0,1,1 — хорошо видно, что селектор с ID весит больше, чем селектор с классом, поэтому все ссылки имеют оранжевый фон, хотя ниже в коде им задан зеленый.

Варианты решений:

1. Добавить !important

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

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

2. Следующий очевидный способ — добавить #container ко второму селектору, чтобы увеличить его вес:

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

1-й и 2-й способ могут использоваться, если у вас нет доступа к разметке, а в ней нет нужных классов. Если же вы можете редактировать разметку либо классы у элементов таки есть — используйте последний способ, самый правильный:

3. Просто не используйте в стилях селекторы с ID, используйте классы.

Посмотрим на разницу между #container и с .container :

#container A 0,1,0,1 — селектор с ID перевешивает всё вне зависимости от своего расположения в коде.

Заменим в разметке страницы id на class :

.container A 0,0,1,1 — селектор с классом весит меньше, он менее специфичен.

Селектор ссылок в списке весит столько же:

Это означает, что при равном весе селекторов применятся стили, объявленные ниже в коде. То есть достаточно будет просто написать стили, следуя от общего к частному, сверху вниз.

В итоге разметка может быть такой:

А стили — такими:

И код работает так, как ожидается:

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

В качестве общих рекомендаций так же следует упомянуть, что нужно как можно меньше использовать селекторы по тегу и как можно больше — селекторы по классу. Это поможет избежать проблем при повторном использовании блоков сайта, а при использовании “умных” классов — может значительно сократить цепочки селекторов, увеличить читабельность кода и скорость отрисовки страницы.

Селекторы CSS

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

В этой статье мы рассмотрим способы определения стилей веб-страницы с помощью селекторов классов, селекторов потомков, псевдоклассов и селекторов идентификаторов.

Настройка

Для примера нам нужен только один HTML-файл и таблица стилей CSS . Создайте папку css-selectors и веб-страницу под названием selectors.html со следующей разметкой:

Теперь создадим в той же папке файл styles.css . Это все, что понадобится для изучения CSS селекторов .

Селекторы классов

Селекторы классов позволяют применять стили CSS к определенному элементу HTML . Они дают возможность различать элементы HTML одного и того же типа. Например, когда есть два элемента

  • Указанный атрибут класса в элементе HTML ;
  • Соответствующий селектор классов CSS .

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

Теперь стилизуем абзац

в файле CSS с помощью следующего кода:

Это правило применяется только к элементам с соответствующим атрибутом класса. Обратите внимание на точку (.) — префикс перед именем класса. Это отличает соседние селекторы CSS классов от селекторов типов:

Конвенция имен классов

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

Добавление атрибута class не изменяет смысловое значение HTML-документа и служит для подключения CSS . Рекомендуется избегать имен классов, основанных на том, как они отображаются. Использование чего-то более семантического, например, .synopsis , дает больше свободы в действиях. Что позволяет настроить отображение этого абзаца.

Более полезные div

Атрибут class применяется не только к элементам

— он может быть использован для любого элемента HTML . Взяв на вооружение селекторы классов CSS , можно сделать блоки

Начнем с отдельных элементов. На этот раз мы будем использовать класс вместо CSS селектора div . Добавьте следующий код в файл styles.css :

Конечно, для этого нам нужен соответствующий атрибут класса. Измените

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

Дивы контейнеров

Попробуем создать макет фиксированной ширины с использованием метода автополей. Сначала оберните весь документ в

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

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


Без CSS селекторов атрибутов классов, которые позволяют дифференцировать элементы

Повторное использование стилей классов

Один и тот же класс может применяться к нескольким элементам в рамках одного HTML-документа . Это означает, что можно использовать произвольные объявления CSS везде. Чтобы создать еще одну кнопку, нужно добавить еще один HTML-элемент с тем же классом:

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

Изменение стилей классов

Что, если мы захотим немного изменить вторую кнопку? К счастью, можно применить несколько классов к одному и тому же HTML-элементу . Стили из каждого класса будут применены к элементу, что даст возможность повторно использовать стили .button и одновременно переопределить некоторые из них новым классом:

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

Этому элементу теперь присвоено два разных класса, и можно использовать любой из них для определения стилей. Это дает некоторые дополнительные возможности. Можно задать для второй кнопки стили класса .button и стили, относящиеся только к этой кнопке класса .call-to-action ( обязательно добавьте этот код после правила .button ):

Порядок имеет значение

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

  • Это добавление нового объявления по сравнению с исходным правилом .button — font-style ;
  • Переопределение существующего в классе .button стиля — background-color .

Переопределение дочерних селекторов в CSS происходит из-за порядка размещения правил .call-to-action и .button в таблице стилей. Когда в файле CSS есть два противоречащих друг другу свойства, всегда применяется то, которое указано последним. Если бы вы разместили .call-to-action перед .button , применялось бы это правило, и кнопка осталась бы синей.

Это означает, что порядок атрибутов класса в HTML-элементе не влияет на поведение переопределения. Несколько классов в одном элементе применяются « одинаково », а приоритет определяется исключительно порядком размещения правил в файле styles.css .

Другими словами, следующие элементы эквивалентны:

Селектор потомков

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

Чтобы изменить этот элемент , можно было бы добавить к нему еще один класс. Но это приведет к тому, что код будет не очень удобен. Мы хотим иметь правило .synopsis в качестве отдельного независимого компонента, для которого можно полностью задать стили через CSS . То есть без необходимости внесения изменений в HTML только для того, чтобы изменить какие-то стили:

Это то, для чего предназначены CSS селекторы потомков. Они позволяют настраивать только те элементы, которые находятся внутри другого элемента. Например, можно вывести этот элемент в абзаце .synopsis со следующими стилями:

Добавление этого правила в файл styles.css задаст отображение вертикальными ( римскими ) символами, тем самым определяя разницу с курсивным шрифтом, которым отображается весь абзац

. При этом остальных элементов , размещенных на странице это изменение не коснется:

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

Не переусердствуйте

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

Эти стили нельзя будет повторно использовать, поскольку они соответствуют только следующей структуре HTML :

Если захотите применить эти стили к заголовку

, который не был обернут в тег

Псевдоклассы для ссылок

До сих пор все селекторы CSS , которые мы рассматривали, были связаны непосредственно с фрагментами HTML-разметки . Тем не менее, на отображаемой веб-странице происходит больше, чем задает HTML-контент . Существует « стандартный » перечень действий, которые может предпринять пользователь.

Основные стили ссылок

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

  • :link — ссылка, по которой пользователь еще не переходил;
  • :visited — ссылка, по которой пользователь переходил раньше;
  • :hover — ссылка, на которую пользователь навел курсор мыши;
  • :active — ссылка, нажатая мышью (или пальцем).

Рассмотрим эти псевдоклассы, добавив следующие правила в CSS ( также обратите внимание на то, что мы используем для обозначения цветов ключевые слова , а не шестнадцатеричные коды ):

Состояние visited hover

Приведенный выше фрагмент кода отлично подходит для большинства сайтов, но давайте более внимательно рассмотрим поведение a:visited , когда мы изменим атрибут href на URL-адрес , который раньше посещали. Стиль a:hover применяется как к ранее посещенным ссылкам, так и к тем, по которым мы еще не переходили. Можно еще больше модифицировать ссылки, объединив псевдоклассы.

Добавьте это правило ниже предыдущего фрагмента кода:

Данный код создает специальный стиль для состояния при наведении курсора мыши на посещенные ранее ссылки. Наведя курсор на не посещенную ранее ссылку, мы увидим, что она « перекрашивается » в аквамариновый цвет. А при наведении курсора на посещенную ссылку она становится оранжевой. Фантастика! Но это ломает наш стиль a:active из-за некоторых внутренних аспектов CSS , о которых вы никогда не захотите читать. Когда вы нажмете на ссылку, она больше не будет становиться красной.

Состояние visited active

Можно исправить это с помощью CSS псевдоселектора a:visited:active . Добавьте следующий код в конец таблицы стилей. Обратите внимание, что, как и в случае с классом .call-to-action , порядок, в котором правила определяются в файле styles.css , имеет значение:

Эти два последних раздела позволят задавать стили посещенных ссылок полностью отдельно от не посещенных.

Псевдоклассы для кнопок

Псевдоклассы предназначены не только для определения стилей ссылок. Вместо указания стилей для класса a:link и потомков изменим с помощью псевдоклассов класс .button . Это позволит создавать кнопки, которые ведут куда-то.

Элемент ссылки, а не элемент div

Сначала нужно изменить кнопки, чтобы они стали элементами , а не просто элементами

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

Нам нужно снова сделать этот элемент блочным и удалить часть стилей ссылок по умолчанию.

Стили кнопок

Начнем с :link и :visited . Мы используем аналогичный подход, что и в предыдущем разделе о CSS селекторах родителя. Но поскольку это кнопки, то мы сохраним одинаковые цвета для состояний посещенная и не посещенная. Измените существующие правила .button следующим образом:

Обратите внимание на новые псевдоклассы :link и :visited в селекторе. Без них стиль браузера по умолчанию для a:link не изменился бы. Теперь оформим состояние при наведении курсора.

Обе наши кнопки при наведении курсора будут окрашиваться в более светлый голубой цвет. Сделаем так, чтобы кнопки становились темнее, когда пользователь нажимает на них с помощью псевдокласса :active :

Стили, которые мы только что определили, готовы к повторному использованию. Назначьте класс .button любому HTML-элементу , и вы превратите его в интерактивную кнопку.

Другая кнопка

Займемся второй кнопкой. Предполагается, что она имеет желтый фон, но мы изменили это кодом из предыдущего раздела. Наш селектор .button:link более « специфичен », чем текущее правило .call-to-action , поэтому он имеет приоритет.

Исправим такое положение вещей, применив к нашему правилу .call-to-action несколько псевдоклассов. Замените существующее правило следующим ( убедитесь, что это определено после новых стилей .button из предыдущего раздела о дочерних селекторах в CSS ):

Мы назначили класс .call-to-action только для второй кнопки, поэтому только она станет желтой. Конечно, нам по-прежнему нужно, чтобы класс .button был назначен для обоих элементов , поскольку он определяет общие стили, такие как отступы, радиус границы и размер шрифта.

Псевдоклассы для структуры

Состояния ссылок – это лишь один аспект псевдоклассов. Существует также множество других псевдоклассов , которые предоставляют дополнительную информацию о контексте элемента. Например, псевдокласс last-of-type выбирает последний элемент определенного типа в родительском элементе. Это является альтернативой селекторам классов.

Например, мы могли бы использовать :last-of-type , чтобы добавить в наш пример определенное пространство после последнего абзаца страницы:

Это позволяет не затрагивать первые два элемента

на странице, не добавляя для последнего абзаца новый атрибут класса:

Можно даже использовать псевдокласс :first-of-type вместо класса .synopsis . Заменив существующее правило .synopsis следующим фрагментом кода, мы получим тот же результат:

Использование этого метода вместо устаревших классов имеет свои преимущества и недостатки. Например, это работает только в том случае, если наш синопсис является элементом

. Если бы мы захотели создать синтаксис с несколькими параграфами, объединив много элементов

Предостережения

Но псевдоклассы немного сложнее. Контекстные селекторы CSS first-of-type и last-of-type действуют только внутри своего родительского элемента. Другими словами, p:first-of-type выбирает первый элемент

в каждом элементе контейнера.

У нас есть один общий

Это иллюстрирует сложность применения псевдоклассов для структуры. Первый элемент

здесь также будет соответствовать p:first-of-type , потому что область применения псевдокласса ограничена родительским элементом.

Если вы не хотите затрагивать абзацы в боковой панели, и выбрать только первый

Различные разработчики придерживаются разных « школ ». Некоторым нравится семантическая природа псевдоклассов, в то время как другие доводят до крайности применение различных подробных атрибутов класса для каждого HTML-элемента .

Селекторы идентификаторов

CSS селекторы идентификаторов – альтернатива селекторам классов. Они работают почти так же, но на странице может размещаться только один элемент с определенным идентификатором. Это означает, что вы не сможете повторно использовать стили.

Вместо атрибута class для любого элемента HTML , используется атрибут id . Попробуйте добавить идентификатор ко второй кнопке:

Соответствующий селектор CSS должен начинаться с символа хэша ( # ). Добавление следующего кода в файл styles.css изменит цвет текста желтой кнопки:

Проблема в том, что если мы захотим задать этот стиль и для другой кнопки, то нужно присвоить ей еще один уникальный атрибут id . Довольно скоро наш CSS начнет выглядеть довольно « грязно »:

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

Фрагменты URL-адресов

Атрибуты id должны быть уникальными, поскольку на них указывают « фрагменты URL-адресов ». Фрагменты — это элементы, с помощью которых можно указать пользователям на определенную часть веб-страницы. Они выглядят как селекторы идентификаторов, расположенные в конце URL-адреса :

Например, если мы хотим указать пользователю на вторую кнопку, можно использовать следующий код. Обратите внимание, что можно полностью опустить URL-адрес , если он указывает на другой раздел той же веб-страницы:

Если вы добавите первый вариант ссылки в разметку страницы selectors.html и кликните по ней, то увидите, что данный URL-адрес значится в адресной строке браузера. Чтобы увидеть, как осуществляется переход ко второй кнопке, нужно добавить на страницу немного произвольного контента или сделать высоту окна маленькой:

Этот пересекающийся функционал является веской причиной для того, чтобы избегать использования идентификаторов. Они создают зависимость между URL-адресами сайта и стилями CSS . Представьте, что вы используете в заголовках кучу атрибутов id в качестве как фрагментов URL-адресов , так и идентификаторов. Если вы забудете обновить таблицу стилей, когда отредактируете URL-адрес , то сломаете свой сайт.

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

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

Но не все селекторы CSS равнозначны. « Специфичность CSS » — это значимость, установленная для различных категорий селекторов. Это означает, что некоторые селекторы всегда будут переопределять другие независимо от того, какую позицию они занимают в таблице стилей.

Если вы добавите следующий код после существующих правил .call-to-action , он переопределит заданный ранее цвет фона. Если вы разместите его в верхней части файла, он сам будет переопределен, и наша кнопка не станет красной. Это ожидаемое поведение:

Теперь посмотрите, что происходит, когда мы пытаемся сделать то же самое с помощью селектора идентификатора. Во-первых, обязательно удалите предыдущий фрагмент кода, а затем попробуйте добавить приведенный ниже код до существующих правил .call-to-action :

CSS селекторы идентификаторов имеют более высокую специфичность, чем селекторы классов, поэтому вторая кнопка будет красной, даже если мы зададим фоновый цвет с помощью .call-to-action:link ниже. Концепция « порядок имеет значение » работает только тогда, когда все правила имеют одинаковую специфичность:

Специфичность селекторов, которые мы рассматривали в этой статье, показана ниже: от максимальной до минимальной:

Иногда это приводит к путанице. Это настолько серьезная проблема, что была разработана целая методология под названием « BEM ». Суть BEM заключается в попытке обеспечить то, чтобы правила CSS были многоразовыми, сделав все селекторами классов. Это исключает возможность возникновения проблем.

Заключение

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

Данная публикация представляет собой перевод статьи « css selectors » , подготовленной дружной командой проекта Интернет-технологии.ру

Приоритет в CSS

Элемент HTML может быть целью нескольких правил CSS. Давайте воспользуемся простым абзацем в качестве примера:

Мы можем изменить этот абзац просто используя имя тега:

Или же можем воспользоваться именем класса:

Или можем использовать идентификатор:

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

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

Порядок правил CSS

Если в вашем CSS есть одинаковые селекторы, то последний из них будет иметь приоритет.

Вычисление 100

Есть один быстрый способ выяснить, насколько правило CSS «сильное», путём вычисления специфичности селекторов:

  • идентификаторы стоят 100;
  • классы стоят 10;
  • селекторы тега стоят 1.

Селектор с наивысшим «счётом» будет преобладать, независимо от порядка, в котором появляются правила CSS.

Правило #introduction < color: red; >является более специфичным, чем другие, потому что идентификаторы должны быть уникальными по всей веб-странице, таким образом, может быть только один целевой элемент.

.message < color: green; >будет нацелен на любой HTML-элемент с атрибутом и, следовательно, менее специфичен. То же самое относится и к p < color: blue; >, который может предназначаться для любого абзаца.

Как избежать конфликтов

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

Чтобы избежать этого:

  • применяйте только классы: используйте .introduction вместо #introduction , даже если этот элемент появляется на вашей веб-странице только один раз;
  • избегайте применять несколько классов к одному элементу HTML: пишите не

, который является семантически более описательным;
не используйте встроенные стили, такие как

CSS селекторы 4-го уровня

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

Селекторы это основная часть CSS. Они дают вам возможность делать такие вещи, как например, выборка всех элементов определенного типа:

Или вы можете выбрать элемент, который является замыкающим дочерним элементом своего родителя:

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

По факту, есть куда больше одного способа сделать это и куда более запутанные и сложные.

Для примера, сравним этот:

ul li это примеры селекторов первого уровня.

last-child и nth-last-child это примеры селекторов 3-го уровня.

Вы можете рассматривать уровни, как версии спецификаций CSS селекторов, в которых каждый уровень добавляет селекторы “помощнее”.

В этой статье я предоставлю вам обзор последнего поколения селекторов, а именно 4 уровня, в соответствии со спецификацией Editors’s Draft на январь 2020 года, по следующим категориям:

Псевдоклассы форм ввода

Во время написания, спецификация для селекторов 4 уровня находится в драфте. Ситуация может измениться, если они достигнут статуса официальной рекомендации и к своему сожалению, вы в итоге обнаружите, что многие селекторы либо не поддерживаются некоторыми браузерами или им нужен префикс с :-moz- или :-webkit- .

Для каждого селектора я дам ссылку на его Can I Use страничку, так что вы увидите какие браузеры его поддерживают (если это возможно), также дам краткое описание, пример и ссылку на Codepen, так что вы сможете попробовать его в действии (даже если он сейчас не работает, всё равно это может измениться в будущем).

Учитывая всё вышесказанное, давайте начнем с селекторов из категории логических комбинац

Этот блог бесплатный, в нём нет рекламы и ограничений paywall.
Вы можете его поддержать через Яндекс.Деньги. Спасибо.

Логические комбинации

Эта категория включает в себя селекторы, которые комбинируют другие селекторы.

:not(selector1, selector2, …)

Этот селектор выделяет все элементы, кроме тех, которые не подходят по селекторам из списка, который представлен в виде аргумента. К примеру:

Сделает все p элементы у которых нет классов beginning и middle красного цвета.

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

:is(selector1, selector2, …)

Он выбирает элементы, которые подходят по выборке селекторов из списка аргументов. Для примера:

Сделает все элементы p у которых есть классы beginning и middle синим цветом.

Одним из самых примечательных изменений с последнего рабочего драфта является то, что селектор :matches() был переименован в :is() и убран из Safari (который был единственным браузером с его полной поддержкой), так что теперь он куда более совместимый со своей противоположностью, такой как :not() .

:matches можно применять как алиас для :is() , если нужно для обратной совместимости. Хотя, :matches() ранее назывался :any() , так что многие браузеры поддерживают этот псевдокласс с префиксом:

:where(selector1, selector2, …)

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

У него такой же синтаксис и функционал, как и у :is() , но ни сам селектор и ни какой из его аргументов влияют на его специфичность, которая всегда равна нулю.

Специфичность это “вес” CSS правила. Если два селектора применены к одному и тому же элементу, то выигрывает тот у которого наивысшая специфичность. Всё понятно. А если у нескольких правил одинаковая специфичность, то последнее правило в CSS будет применено к элементу.

Этот селектор можно использовать как фильтр или для перезаписи стилей связанных с элементом.

В спецификации приводится следующий пример:

:has(relativeSelector1, relativeSelector2, …)

Поддержка браузерами. На время написания, этот селектор не поддерживался ни одним браузером.

Этот селектор берет список родственных селекторов как список аргументов. Он выделяет элемент, если любой из его родственных селекторов (в его области видимости) подходит по критерию. Для примера:

Тут всем элементам p, в которых есть или теги, выставится красный свет.

Селекторы атрибутов

Эта категория включает в себя селекторы, которые работают с селекторами атрибутов.

[foo=”bar” i]


Этот селектор выберет тот элемент, чьё значение атрибута foo равно bar , вне зависимости от регистра.

Сделает зеленым всем элементы p, чей атрибут class имеет значения text, TEXT, text или другую комбинацию.

[foo=“bar” s]

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

Выбирает элемент, чью имя атрибута foo, точно соответствует bar , в соответствии с регистром.

Сделает зеленым все элементы p , у которых атрибут class имеет значение text (и не Text или тп).

Лингвистические псевдоклассы

Эта категория включает в себя селекторы, которые работают с лингвистическими установками, основанными на тонкостях каждого языка или правописания.

:dir(ltr)

Выбирает элементы написанные слева направо, там где указана направленность написания. И напротив, :dir(rtl) выбирает элементы, которые написаны справа налево.

Тут фоновый цвет выставится на красный всем элементам p, написанным слева направо.

:lang(zh, “*-hant”)

Поддержка браузерами. На время написания, версия 4-го уровня для этого селектора не поддерживалась ни одним браузером.

Выбирает элемент, отмеченный как китайский (или другой язык, просто поменяйте zh на нужный) или написанный традиционными китайскими символами (или любой другой системой символов, просто поменяйте *-hant на любой другой код символов)

На самом деле, этот селектор можно использовать с CSS2, однако, структуризация поиска по языку и разделение запятой в аргументах, являются нововведениями в селекторах 4-го уровня.

Этот селектор может принимать список из одного языка или диапазон языков, как аргумент. Если диапазон языков содержит звездочки, то они должны быть либо экранированы (:lang(es-\*)) , либо указаны как строка (:lang(«es-*»)) .

Выставит фоновый цвет красным, всем элементам p , в которых есть текст, написанный на одном из языков Швейцарии ( CH указывает Швейцарию).

Псевдоклассы положения

Эта категория включает в себя селекторы, относящиеся к ссылкам.

:any-link

Пока что нет странички на Can I Use, но он поддерживается большинством основных браузеров.

Этот селектор выделяет все элементы, у которых есть атрибут href (такие как или
). Другими словами, все элементы, которые подходят псевдоклассам :link и :visited .

Выдаст всем элементам a c атрибутом href, красный цвет.

:local-link

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

Этот элемент выбирает элементы, которые ссылаются на эту же страницу. Если ссылка включает в себя фрагмент настоящей ссылки, то она тоже подпадает под селектор. Если же нет, то фрагмент части ссылки настоящего URL не рассматривается.

Этот селектор сделает все ссылки с атрибутом href , которые ссылаются на эту же страницу, без подчеркнутыми.

Пользовательские псевдоклассы (или user-action псевдоклассы)

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

:focus-within

Выбирает элементы, который либо подходят под псевдокласс :focus (когда элемент в фокусе), либо когда у них есть потомки, которые подходят под :focus .

Для примера, рассмотрим следующую форму:

Она добавит рамку вокруг поля ввода при фокусе.

:focus-visible

Выбирает элемент, если он в фокусе (как псевдокласс :focus ) и браузер определяет, что фокус сделан прямо явным образом, обычно это делается с помощью кольца фокусировки (в браузерах такая штука в настройках есть).

Однако, разница с :focus довольно тонкая, но всё же есть.

Если :focus-visible что-то выбирает, то :focus делает это тоже, но на самом деле это не всегда так и зависит от браузера (включена ли у него отрисовка кольца фокуса) и того, как элемент попал в фокус (мышкой или клавиатурой).

У Firefox есть свой такой селектор, как псевдокласс :-moz-focusring .

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

Применится только к элементу, если на нем сфокусировались через клавиатурную навигацию ( tabbing navigation).

Псевдоклассы форм ввода

Эта категория включает в себя селекторы, которые применяются к элементам имеющем отношение к формам ввода.

:read-write и :read-only

:read-write выбирает элементы, чьё значение можно изменить, такие каr без атрибута readonly .

:read-only выбирает элементы, которые в свою очередь уже нельзя изменить, например тот же , но с атрибутом readonly .

Однако, эти селекторы не просто выбирают элементы или

, они выбирают любой элемент, который может быть отредактирован пользователем, например как

с атрибутом contenteditable со значением true .

Тут фоновый цвет измениться для всех элементов, которые можно изменить и которые нельзя. На lightyellow и lightgrey , соответственно.

:placeholder-shown

Этот селектор выбирает элемент ввода, который в данный момент показывает текст плейсхолдера.

Выставит красный текст плейсхолдеру элемента (только для самого плейсхолдера).

:default

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

Задаст зеленую тень дефолтному элементу и зеленый цвет его лейблу.

:indeterminate

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

Этот пример выдаст лейблам радио элементов в группе, красный цвет, в том случае, если в этой группе нет выбранных элементов.

:val >Поддержка браузерами

Они выделят элементы, чьё содержимое или значение, соответственно, валидное или наоборот, в соответствии с семантикой их валидности. Если семантика не определена (или не может быть определена), то элемент и не :valid , и не :invalid .

Пример для элемента ввода типа email:

:in-range and :out-of-range

Эти селекторы применяются только к элементам, которые имеют диапазон ограничений, для примера, если у них может быть указанные минимум и максимум. Если же нигде нет таких ограничений, то элемент не является и не :in-range , и не :out-of-range .

К примеру, для элемента с минимальным значением 1 и максимальным 5 :

В некоторых случаях, эти селекторы будут иметь тот же эффект, что и :valid и :invalid .

:required and :optional

Эти селекторы применяются к элементам формы, которые соответственно, required или optional, перед отправкой формы. Элементы, которые не являются элементами форм, являются ни чем иным, как ни тем и не другим.

Даст элементам с required красный цвет и опциональным элементам выдаст серый цвет.

Древовидные псевдоклассы

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

Поддержка браузерами (на момент написания, версия 4 уровня для этого селектора ничем не поддерживается).

:nth-child выбирает каждый элемент, который является N-ным дочерним элементом своего родителя. :nth-last-child делает то же самое, но ведёт счет с конца. Вы можете поиграться с :nth тестером, чтобы понять разницу и узнать больше об An+B обозначениях.

В самом начале этой статьи, я показал вам пример :nth-last-child и сказал, что это был селектор 3-го уровня. Однако, для 4-го уровня, этот селектор принимает опциональный of селектор, который отфильтровывает потомков по признаку, который подходит под этот селектор.

Вообще тут могут быть различия в том, как объявлен селектор. Для примера:

Выберет первые два элемента li , но только если у них есть класс item .

Это не то же самое, что:

Тут выберутся первые два
элемента, которые имеют класс item , даже если они не первые два потомка в списке.

Попробуйте (в браузере, который поддерживает этот селектор, таком как Safari):

Табличные селекторы

Эта категория включает селекторы, которые работают с колонками таблицы.

F | | E

На время написания, этот селектор вообще никем и ничем не поддерживался.

Селектор комбинирования колонок ( || ), выбирает элемент типа E, который представляет ячейку в таблице и принадлежит колонке, представленной элементом с типом F.

Для примера, рассмотрим следующую таблицу:

Выдаст ярко-желтый цвет ячейкам (

элементам), которые относятся к selected колонке ( price
).

:nth-col(An+B) and :nth-last-col(An+B)

На время написания, этот селектор не поддерживается никем и ничем.

Вы можете рассматривать эти селекторы, как колоночную версию :nth-child и :nth-last-child .

:nth-col(An+B) выбирает элемент в гриде или таблице, который представляет собой ячейку колонки, у которой An+B-1 колонок перед ней, с любым положительным целым числом или нулевым значением n.

:nth-last-col(An+B) выберет элемент сетки или таблицы, который представляет собой ячейку колонки, у которой An+B-1 колонок после неё, с любым положительным или нулевым значением n.

Выдаст первой колонке таблицы светло-желтый фон, а также последней колонке выдаст светло-зеленый фон.

Заключение

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

Мы сейчас покрыли большинство селекторов указанных в Editor’s Draft спецификации на январь 2020 года, однако, я оставил в покое некоторые селекторы, которые скорее всего исчезнут или изменятся, ну или если по ним вообще нет никакой информации, в том числе и о поддержки другими браузерами:

Но вам определенно нужно за ними следить, так же как и за другими селекторами 4-го уровня.

Понимание CSS селектора приоритет/специфичность

Я хотел бы понять, как селектора CSS работают со свойствами коллизий, как свойство выбрано вместо другого?

Для кого-то это может быть очевидно, но не для меня!

Есть ли какое-нибудь руководство или ссылка, где я могу наконец понять, как работает приоритет выбора?

Я просто брошу ссылку на саму спецификацию CSS 2.1 и как браузеры должны вычислять специфичность:

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

  • count 1, если объявление является атрибутом ‘style’, а не правилом с селектором, 0 в противном случае (= a) (В HTML значения атрибута стиля «style» являются правилами таблицы стилей. нет селекторов, поэтому a = 1, b = 0, c = 0 и d = 0.)
  • подсчитать количество атрибутов идентификатора в селекторе (= b)
  • подсчитать количество других атрибутов и псевдоклассов в селекторе (= c)
  • подсчитать количество имен элементов и псевдоэлементов в селекторе (= d)
  • Специфика основана только на форме селектора. В частности, селектор формы «[ в исходном документе DTD.

Объединение четырех чисел a-b-c-d (в числовой системе с большой базой) дает специфичность.

Если значения одинаковы, то вступает в игру CSS 2.1 Раздел 6.4.1:

  1. Наконец, выполните сортировку по указанному порядку: если два объявления имеют одинаковый вес, происхождение и специфичность, последний указывает выигрыши. Объявления в импортированных таблицах стилей считаются перед любыми объявлениями в самой таблице стилей.

Обратите внимание, что это говорит о том, когда стиль определен, а не когда он используется. Если классы .a и .b имеют одинаковую специфичность, в зависимости от того, что определено последним в победах стилей (ов).

будут обозначаться одинаково на основе порядка определения .a и .b .

CSS каскадирование, специфичность, наследование: что это и как правильно использовать?

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

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

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

Начнем с самой простой для понимания концепции 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: профессиональное применение web-стандартов».

Каскадность CSS. Приоритеты стилей

В данной главе подробно объясняется, почему каскадные таблицы стилей (Cascading Style Sheets, CSS) называются каскадными. Для начала давайте вспомним, какими способами можно добавить стиль на веб-страницу:

  • подключить внешнюю таблицу стилей;
  • добавить внутреннюю таблицу стилей в HTML-документ через тег . В итоге цвет тегов

Это – один из способов управлять значимостью стилей. Еще один способ повысить приоритет – специально увеличить вес селектора, например, добавив к нему ID или класс.

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

Если вы столкнулись с экстренным случаем и вам необходимо повысить значимость какого-либо свойства, можно добавить к нему объявление !important :

Также !important перекрывает inline-стили. Слишком частое применение !important не приветствуется многими разработчиками. В основном, данное объявление принято использовать лишь тогда, когда конфликт стилей нельзя победить иными способами.

Сброс стилей с помощью reset.css

В предыдущей главе мы уже упоминали о том, что у каждого браузера есть свои встроенные стили HTML-документов, созданные для улучшения читабельности. Вы наверняка уже видели, как выглядит «голая» веб-страница в браузере: синие подчеркнутые ссылки, черный шрифт, полужирное начертание заголовков и т. д.

Каждый браузер имеет свои отличия во встроенных стилях: например, в IE нет отступа от верхнего края окна, а в Firefox есть. Таких отличий существует много. Чтобы они не создавали помех для кроссбраузерности при написании собственного стиля CSS, можно воспользоваться методом сброса встроенных стилей.

Инструмент для сброса стилей – это, по сути, та же самая таблица CSS, где описаны правила, которые сбрасывают встроенные стили браузеров, устанавливая базовые значения свойств. Называется такая таблица reset.css и служит для того, чтобы вы могли начать создавать стиль «с нуля». Вот пример стандартной таблицы сброса:

Этот вариант таблицы Reset.css разработал известный опытный специалист по стандартам HTML и CSS Эрик Мейер. Он работает в области веб-технологий с 1993 года и является автором многих книг по CSS.

Конечно же, существуют и другие вариации Reset CSS, например, более популярный сейчас Normalize.css, который, в отличие от Reset CSS, сохраняет много полезных стилей по умолчанию, а не стирает их начисто. Это удобно, поскольку избавляет от необходимости вновь объявлять стили для многих стандартных элементов.
Если требуется, вы и сами можете создать свой файл сброса стилей, исходя из ваших потребностей.

А сейчас вкратце о том, что делает вышеприведенная таблица сброса стилей:

  • в первом селекторе собраны наиболее популярные теги, для которых удаляются все отступы, рамки и поля, а также назначается размер шрифта 100%;
  • второй групповой селектор предназначен для правильного отображения тегов HTML5 в старых браузерах;
  • с помощью свойства line-height селектора body устанавливается одинаковый интерлиньяж (межстрочный интервал) для текста;
  • для списков ol , ul убраны маркеры;
  • отменены кавычки и другой контент перед и после содержимого тегов blockquote , q ;
  • упрощено добавление рамок для ячеек таблиц.

Файл сброса стилей необходимо подключать раньше, чем собственные стили. Если вы внимательно читали абзац о приоритетах, то уже поняли, почему reset.css должен находиться перед другими стилями: потому что правила, указанные ниже в коде, перезаписывают правила, объявленные ранее.

Итоги

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

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

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

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

Топ-пост этого месяца:  Библиотека Lodash.js. Урок 2. Работа с коллекциями
Добавить комментарий