Новые селекторы (проводники)

Контекстные селекторы

Селектор может состоять из нескольких частей, разделённых пробелом, например:

p strong {... }

ul.hit {... }

.footer.menu a {... }

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

Например, селектор .menu a сработает для ссылки a только в том случае, если она расположена внутри элемента с классом .menu.

Читать их проще всего справа налево:

p strong {... } /* выбрать все теги strong внутри тегов p */

.menu a {... } /* выбрать все ссылки <a> внутри элементов с классом.menu */

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

Дочерние селекторы

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

<ul>

<li><span>...</span></li>

<li><span>...</span></li>

</ul>

По отношению к <ul> <li> являются дочерними элементами и потомками, а <span> — потомки, но не дочерние элементы.

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

Для этого существует дочерний селектор, в котором используется символ >. Например: ul > li.

CSS селекторы

.menu a Контекстный селектор. Такие селекторы называют контекстными или вложенными. Их используют для того, чтобы применить стили к элементу, только если он вложен в нужный элемент. ul > li Дочерний селектор.  Потомком называются любые элементы, расположенные внутри родительского элемента. А дочерними элементами называются ближайшие потомки. По отношению к <ul> <li> являются дочерними. Контекстные селекторы влияют на всех потомков, что не всегда удобно. Иногда необходимо задать стили только для дочерних элементов. Для этого существует дочерний селектор, в котором используется символ >. Например: ul > li.

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

Аббревиатура CSS расшифровывается как Cascading Style Sheets (каскадные таблицы стилей), где одним из ключевых слов выступает «каскад». Под каскадом в данном случае понимается одновременное применение разных стилевых правил к элементам документа — с помощью подключения нескольких стилевых файлов, наследования свойств и других методов. Чтобы в подобной ситуации браузер понимал, какое в итоге правило применять к элементу, и не возникало конфликтов в поведении разных браузеров, введены некоторые приоритеты.

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

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

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

Если у нескольких правил специфичность одинакова, то к элементу применяется последнее по порядку правило CSS.

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

Вес селекторов

Название	Вес
селектор тега	1
селектор класса или селектор атрибута	10
селектор ID	100
inline-стиль	1000
!important;	10000

Пример веса

Селектор, атрибут или стиль	!important	style =” ”	id	class	Тег	Общий вес
p	0	0	0	0	1	1
.your_class	0	0	0	1	0	10
p.your_class	0	0	0	1	1	11
#your_id	0	0	1	0	0	100
#your_id p	0	0	1	0	1	101
#your_id.your_class	0	0	1	1	0	110
p a	0	0	0	0	2	2
#your_id #my_id.your_class p a	0	0	2	1	2	212
<p style=”color:red”> … </p>	0	1	0	0	0	1000
p { color:red!important; }	1	0	0	0	0	10000

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

Наследование в CSS — механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам.

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

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

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