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

Предыдущая статья Составные селекторы. Комбинаторы.

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

• Выполняемая задача — выбор заданных потомков определенных элементов.
• Обозначение — цепочка: простой селектор родителя, комбинатор «пробел», простой селектор потомка.
• Пример использования:

зададим цвет текста для тех элементов span, которые находятся внутри элементов p.

p span {
	color: #333;
}

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

Ключевой момент — этот селектор выбирает всех потомков не зависимо от их уровня вложенности. Например, применим вышестоящий CSS к такому коду:

<p>Черный текст <span>серый текст</span> черный текст </p>
<span>Черный текст</span>
<p>Черный текст <a href="#">Черный текст <span>серый текст</span></a> черный текст</p>

Как ясно из листинга, на span, который находится внутри ссылки (строка 3) тоже будут распространятся заданные стили. Глубина вложения роли не играет.

Еще один существенный момент — цепочка селекторов потомка (как и любых других составных селекторов) не ограничена двумя селекторами. Такую цепочку можно написать и более длинную. Например, зададим цвет всем элементам span, среди предков которых есть элемент a, который в свою очередь вложен в элемент div:

div a span {
	color: #333;
}

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

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

.mainMenu li {
	float: left;
}

Эти стили применяются для всех li внутри контейнера с классом mainMenu. Мы обезопасили все остальные теги li на странице от случайного применения к ним «левых» для них стилей.

Еще вариант: подключаем разные картинки, в зависимости от языка страницы (на использование английского языка будет указывать, например, id="en" у тега body).

logo {
	background: url(img/logo.png) no-repeat;
}
#en logo {
	background: url(img/en/logo.png) no-repeat;
}

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

.content .toBasketButton{
	background: url(img/to-basket.png) no-repeat;
	width:150px;
	height: 36px;
}
.sideBar .toBasketButton{
	background: url(img/to-basket-small.png) no-repeat;
	width:64px;
	height: 20px;
}

Конечно, приведенными примерами область применения не ограничивается. Селектор потомков помогает писать очень гибкий CSS.

Плохой пример

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

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

.header .headerMenu{
	float:left;
}

Скорее всего headerMenu будет расположено исключительно в шапке. Остальные меню названы по-другому (например, sideBarMenu, mainMenu, footerMenu). При такой системе имен затруднять себя (и браузер) лишней цепочкой не стоит. Сокращаем:

.headerMenu{
	float:left;
}

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

.sideBar .infoBox .popup .title{
	/* стили */
}

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

.sideBar .title{
	/* стили */
}
/* или такого: */
.infoBox .title{
	/* стили */
}
/* или вообще такого: */
.title{
	/* стили */
}

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

Следующая статья — Селектор дочернего элемента.