Изучаем css. Селекторы потомков.

Материал Изучаем css. Селекторы потомков.

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

Черный текст серый текст черный текст

2 Черный текст 3

Черный текст Черный текст серый текст черный текст

Как ясно из листинга, на span, который находится внутри ссылки (строка 3) тоже будут распространятся заданные стили. Глубина вложения роли не играет. Еще один существенный момент — цепочка селекторов потомка (как и любых других составных селекторов) не ограничена двумя селекторами. Такую цепочку можно написать и более длинную. Например, зададим цвет всем элементам span, среди предков которых есть элемент a, который в свою очередь вложен в элемент div: CSS 1 div a span { 2 color: #333; 3 } Область применения Самая широчайшая. Из всех составных селекторов селектор потомков употребляется чаще всего. С помощью него можно разграничить область влияния стилей. То есть гарантировать, что какие-либо стили будут использоваться только на определенной странице (или в определенном месте страницы). Например: CSS 1 .mainMenu li { 2 float: left; 3 }