Название

Селекторы CSS. Как выбрать элемент внутри другого элемента.

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

icontexto-inside-flickr

Например, имеем элемент ссылки, который находится внутри какого-либо абзаца и элемент ссылки, который находится внутри элемента div.

<p><a href="#">Ссылка 1</a></p>
<div><a href="#">Ссылка 2</a></div>

Необходимо создать стиль CSS, который бы выделил красным цветом лишь ту ссылку, которая находится внутри элемента p, а ссылка, которая находится внутри элемента div осталась бы синим цветом.

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

Возвращаясь к нашему примеру, вот стиль, который необходимо использовать:

p a {color:red;}

Смотрим, что получается в результате.

Аналогично можно выбрать какой-то элемент внутри элемента с каким либо классом или id.

<p class='link1'><a href="#">Ссылка 1</a></p>
<p><a href="#">Ссылка 1</a></p>

CSS код будет следующим:

.link1 a {color:red;}

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

Назад Далее