CSS-селекторы

CSS-селектор — это та часть CSS-правила, из которой браузер узнаёт, к какому элементу нужно его применить.

.search-row {border:1px solid #bdbdbd;padding:4px 8px;}

В выше приведённом коде .search-row является селектором, а то что в фигурных скобках — правилом. Приведу несколько примеров селекторов:

b {color:#2f84ea;} /* только лишь тег b */
p .danger {color:#f10f37;} /* класс danger, вложенный в p */
div.segment p span.alert {color:#f16f0f;} /* Сложный селектор: span с классом alert, вложенный в параграф, который находится в теге div с классом segment */
#login {font-size:18px;} /* Идентификатор login */

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

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

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

<div id="story" class="segment segment_border_dotted"> <!-- Применено 2 класса, segment и segment_border_dotted -->
	<div class="inner">
		<p class="segment_border_dotted">Какой-то текст.</p>
	</div>
</div>

Чтобы указать селектор, обладающий двумя и более классами, эти классы просто перечисляют подряд без пробела. Применим правила к блоку с классами segment и segment_border_dotted.

.segment.segment_border_dotted {border-bottom:1px dotted #eee;}

А что если к этому же <div> применить несколько противоречащих друг другу правила? Одно к идентификатору, одно к классу, а одно к тегу.

Каскадирование. Приоритеты селекторов

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

Каждый селектор имеет вес, характеризуемый восемью числами. Числа слева, весомее чисел справа. Например, 1,0,0,0,0,0,0,0 «тяжелее», чем 0,5,0,0,0,0,0,0.

Каждый тег— это единичка самого «лёгкого» разряда.

p // - это 0,0,0,0,0,0,0,1
div p // - это 0,0,0,0,0,0,0,2

Классы и псевдоклассы на разряд весомее, чем просто теги.

.logo /* - это 0,0,0,0,0,0,1,0 */
.header .logo /* - это 0,0,0,0,0,0,2,0 */
.logo.big /* тоже 0,0,0,0,0,0,2,0 */
div p:first-child /* - «весит» 0,0,0,0,0,0,2,1 */

Третий разряд отведён идентификаторам.

#header /* - это 0,0,0,0,0,1,0,0 */
#header #logo /* - это 0,0,0,0,0,2,0,0 */
#header #logo a /* - это 0,0,0,0,0,2,0,1 */
#header span:first-child /* - «весит» 0,0,0,0,0,1,1,1 */

Четвёртый разряд это инлайн стили, или CSS-правила, написанные в атрибуте style внутри тега. Селекторы в инлайн стилях указывать нельзя, только правила. Напомню:

<a class="alert-link" style="color:red;" href="#">текст ссылки</a>
<!-- правило color:red; имеет вес 0,0,0,0,1,0,0,0 -->

Оставшиеся 4 разряда, это правила (не селекторы!) с атрибутом !important. Этот атрибут указывается прямо в CSS-правиле и применяется при расчёте веса отдельного правила.

#header #logo {display:block;padding:20px !important;} /* - правило padding имеет вес 0,1,0,0,0,2,0,0 */
#header #logo {display:block;padding:20px;} /* а здесь padding весит только  0,0,0,0,0,2,0,0 */

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