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

html	css
<p class=​”main”​>В этом параграфе <strong><a href=“#”>​эта ссылка​</a></strong> ​будет размером 18px и красного цвета, <a ​href​=​”#”​>​а эта будет обычной​</a>. </p>	.main ​strong ​a ​{ font­size: ​18px​; color: ​red; }

 

В этом примере можно увидеть параграф с классом main. В параграф вложена ссылка. Этой ссылке задаем определенный стиль. Обратимся к этой ссылке при помощи контекстного селектора. Для этого в качестве селектора сначала указывается тег параграфа с классом main, затем ставится пробел и следующим указывается тег strong, после этого обращаемся к тегу нужной нам ссылки. Таким образом, заданный стиль будет применяться ТОЛЬКО к первой ссылке в параграфе с классом main.

 

html	css
<p class=​”main”​>В этом параграфе <strong><a href=“#”>​эта ссылка​</a></strong> ​будет размером 18px и красного цвета, <a ​href​=​”#”​>​а эта будет обычной​</a>. </p>	.main a ​{ font­size: ​18px​; color: ​red; }

 

Теперь из контекстного селектора убираем тег strong. В этом случае обе ссылки из параграфа с классом main приобретут заданный стиль, т.е. станут красного цвета с размером шрифта в 18 px. Запись данного контекстного селектора означает, что нужно применить стиль ко всем тегам ссылки, которые находятся внутри параграфов с классом main.

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

html	css
<p class=​”main”​> <a href=“#”>​ссылка 1​</a> </p> <p class=​”main”​> <i><a href=“#”>​ссылка 2​</a></i> </p>	.main ​>​ ​a ​{ font­size: ​18px​; color: ​red; }

 

При помощи дочерних селекторов можно выбрать только те теги, которые являются прямыми потомками определенного элемента. В этом примере в первом параграфе ссылка является дочерним элементом для этого параграфа, т.к. вложена только в параграф. А во втором параграфе ссылка для параграфа не будет являться дочерним элементом, т.к. она вложена в тег i, и, соответственно, будет являться дочерним элементом для тега i. А тег i для этой ссылки будет родительским элементом. В разделе CSS кода после обращения к селектору параграфа р с классом main ставится знак больше, а затем тег а, это означает, что необходимо обратиться к дочернему тегу ссылки параграфа с классом main. В этом примере такому запросу соответствует ссылка в первом параграфе, и ТОЛЬКО данной ссылке будет применен заданный стиль.

 

    

Соседние селекторы

html	css
<p class=​”main”​> <a href=“#”>​ссылка 1​</a> </p> <p class=​”main”​> <i>​Соседний элемент​</i> <a href=“#”>​ссылка 2​</a> </p>	.main ​i +​ ​a ​{ font­size: ​18px​; color: ​red; }

 

Для демонстрации работы соседних селекторов изменим предыдущий пример. Ссылка 2 теперь будет не вложена в тег i, а находиться рядом, т.е. будет являться для тега i соседним элементом. Для того, чтобы обратиться к этой ссылке и задать ей определенный стиль, в разделе CSS кода после тега i надо поставить знак плюс, а затем указать тег ссылки. В этом случает ТОЛЬКО ссылка 2 приобретет заданный стиль.

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

Наследование ­ это перенос стилей от элемента к вложенным в него тегам.

html		css
<p>​В этом параграфе весь текст​ <b>​будет<​/b>​красного цвета и шрифтом​ <b><i>​ размером 18 px ​</i><b> </p>	p ​{ }	font­size: ​18px​; color: ​red;

 

В данном примере в тег <p> вложены теги два тега <b>, в один из которых также вложен тег <i>. В этом случае весь текст в этом параграфе будет заданного стиля. То есть, все теги, вложенные в параграф, унаследовали заданный стиль. Но не все свойства CSS наследуются.

 

html		css
<p>​В этом параграфе весь текст​ <b>​будет<​/b>​красного цвета и шрифтом​ <b><i>​ размером 18 px ​</i></b>, ​только <a href=“#”> ​эта ссылка ​</a> ​не будет красной </p>	p ​{ }	font­size: ​18px​; color: ​red;

 

Если добавить в этот пример еще и ссылку, то эта ссылка унаследует только свойство font­size, но свойство color не унаследует. Узнать, наследуется ли определенное свойство CSS или нет, можно узнать только из справочников. В данном примере, чтобы применить к ссылке свойство color также как у всех остальных элементов, можно для этой ссылки задать значение inherit для свойства color. inherit означает, что элементу необходимо наследовать данное свойство от родителя.

Группировка свойств

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

	html (без группировки свойств)	html (правильный вариант)
h1 ​{ } h3 ​{ } p ​{ }	text­align: ​center; color: ​blue; font­family: ​Verdana; text­align: center;​ color: ​blue; font­family: ​Arial; text­align: ​center; color: ​blue; font­size: ​12px;	h1, h3, p } h1 ​{ } h3 ​{ } p ​{ }	​{ text­align: ​center; color: ​blue; font­family: ​Verdana; font­family: ​Arial; font­size: ​12px;

 

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

 

Приоритеты стилей в css

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

 

h1 { color​:​ black; } h1 { color​:​ green; }

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