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

Автор: Александр Головко Дата публикации:

Описание селектора:

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

Установим высоту всех элементов с классом header (скорее всего — это шапка сайта) равной 200px.

.header {
	height: 200px;
}

Подробнее про селектор класса

Рассмотренный ранее селектор типа позволяет определять стили для всех одинаковых тегов. Например, всех абзацев (тег p) или всех элементов списка (тег li). Как правило, в реальных условиях, требуется назначать стили по гораздо более гибкой схеме — допустим, конкретному тегу div или отдельному элементу списка. В этом случае можно применять селектор класса или селектор идентификатора.

Селектор класса позволит применить стили ко всем элементам с определенным значением атрибута class. Конечно, предварительно нужно эти самые атрибуты расставить в HTML-коде.

Примеры

Допустим, имеем следующий код:

<ul>
	<li class="active">HTML и CSS приемы</li>
	<li>Обучение</li>
	<li>HTML справочник</li>
</ul>

Первый пункт списка я пометил как активный (задал для него атрибут class="active"). Теперь давай зададим стили для этого пункта (а точнее, для любых тегов с данным классом):

/* зададим зеленый цвет текста в любых тегах с классом active */
.active {
	color: #0f0;
}

Фактически, эта запись является сокращенной от следующей (я просто убрал универсальный селектор — это обычная практика):

/* этот код эквивалентен предыдущему */
*.active {
	color: #0f0;
}

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

<ul>
	<li class="active">Этот текст будет зеленым</li>
	<li>А этот — нет</li>
	<li class="active">А этот — зеленым</li>;
</ul>
<p class="active">Зеленый абзац</p>
<p>Не зеленый</p>

Комбинируя селектор класса и селектор типа, можно объединить их свойства. Допустим, будем «озеленять» только активные абзацы, на другие теги следующее правило не распространяется:

p.active {
	color: #0f0;
}

Регистрозависимость

Не забудь, что в отличие от названий HTML-тегов, в названиях классов различаются большие и маленькие буквы. То есть class="active" и class="Active" — это совсем разные классы. Поэтому, если твой селектор не выбрал нужный тебе элемент — прежде всего проверь чтобы класс в HTML и CSS был абсолютно идентичен.

Множественные классы

HTML позволяет задавать в качестве значения атрибута class список разделенных пробелами названий (порядок следования не имеет значения). Другими словами, один элемент может иметь сразу несколько классов:

<div class="panel hint active"></div>

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

Иногда такой подход удобен, но злоупотреблять им не стоит. Так, например, применение дополнительного класса active, зачастую бывает оправданно, ведь это позволит программеру однотипно обработать, например, выделяемые пользователем элементы — переключатели, вкладки, пункты меню. А вот, допустим, конструкция <div class="box sideBar widthNewsPanel"></div>, конечно, имеет право на жизнь, но лучше такого избегать, так как падает читаемость кода и растет вес страницы. В такой ситуации, возможно, лучше создать новый единый класс, для которого в CSS указать все необходимые стили.

Помимо объединения стилей, множественные классы дают нам еще одну интересную возможность — выбирать элементы с заданной комбинацией классов. Для этого названия классов в селекторе указываются подряд (без пробелов). Например:

/* это правило распространяется только на элементы, в списке классов которых встречаются (в любом порядке) и класс popup и класс active */
.popup.active { 
	color: #0f0;
}

Иногда, такой финт позволяет сэкономить некоторое количество строчек кода. Но только в том случае, если тебе безразлична поддержка IE6. Да-да, к сожалению, этот браузер не понимает такой записи. Он применит данный стиль к элементам, класс которых указан последним. То есть, в нашем случае, к элементам с классом active. Ослику будет безразлично, есть ли у них класс popup. Так что пользоваться селекторами множественных классов нужно осмотрительно.

Область применения селектора классов

Концепция классов, один из краеугольных камней в верстке. Поэтому селекторы класса, скорее всего, будут самыми «частовстречающимися» в твоем CSS. Например, очень правильно будет верстать страницу, используя в качестве контейнеров теги div, задавая им определенные классы (в соответствии с функциональным назначением):

<div class="header">
	<!--элементы шапки сайта-->
</div>
<div class="sideBar">
	<!--элементы панели меню-->
</div>
<div class="content">
	<!--основное содержимое-->
</div>

Следующая статья — Селектор идентификатора.

Xiper