Главная страница   /   3.5. Селекторы CSS (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

3.5. Селекторы CSS

Обратите внимание, что селекторы в CSS для цветочного магазина различны по своей природе. Некоторые из них являются именами элементов (как h1 и input), другие начинаются с точки (такие как .dtable и .row), а остальные начинаются с решетки (#butonDiv и #oblock). Если вы очень внимательный читатель, вы заметили, что один из селекторов состоит из нескольких компонентов: .dcell > *. Каждый селектор CSS выбирает элементы в документе, а различные по своей сути селекторы говорят браузеру, каким именно образом нужно искать определенный элемент. В этом разделе я опишу различные виды селекторов, которые используются в CSS. Мы начнем с базовых селекторов (называемых также универсальными селекторами), которые собраны в таблице 3-3.

Таблица 3-3: Базовые селекторы
Селектор Описание
* выбирает все элементы
<type> выбирает элементы определенного типа
.<class> выбирает элементы определенного класса (независимо от типа элемента)
<type>.<class> выбирает элементы определенного типа, которые являются членами определенного класса
#<id> выбирает элементы с конкретным значением атрибута id

Эти селекторы очень широко используются (к примеру, они покрывают практически все стили, которые я определил в нашем примере).

Выбор по атрибуту

Несмотря на то, что базовые селекторы работают над атрибутами id и class (которые я описал в главе 2), существуют также селекторы, которые позволяют работать с любыми атрибутами. Они описаны в таблице 3-4.

Таблица 3-4: Селекторы атрибутов
Селектор Описание
[attr] выбирает элементы с атрибутом attr, независимо от значения, данного атрибуту
[attr="val"] выбирает элементы с атрибутом attr, значение этого атрибута = val
[attr^="val"] выбирает элементы с атрибутом attr, значение этого атрибута начинается со строки val
[attr$="val"] выбирает элементы с атрибутом attr, значение этого атрибута заканчивается строкой val
[attr*="val"] выбирает элементы с атрибутом attr, значение этого атрибута содержит строку val
[attr~="val"] выбирает элементы с атрибутом attr, значение этого атрибута содержит много значений, одно из которых = val
[attr|="val"] выбирает элементы с атрибутом attr, значение этого атрибута – это разделенный дефисами список значений, первое из которых = val

В листинге 3-7 показан простой документ со встроенным стилем, чей селектор основан на атрибутах.

Листинг 3-7: Использование селекторов атрибутов

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<style>
		[lang] { background-color: grey; color: white; }
		[lang="es"] { font-size: 14px; }
	</style>
</head>
<body>
	<h1 lang="en">New Delivery Service</h1>
	<h2 lang="en">Color and Beauty to Your Door</h2>
	<h2 lang="es">(Color y belleza a tu puerta)</h2>
	<p>We are pleased to announce that we are starting a home delivery service for your
		flower needs. We will deliver within a 20 mile radius of the store for free and
		$1/mile thereafter.</p>
</body>
</html>

Первый селектор соответствует любому элементу, у которого есть атрибут lang, второй селектор подойдет элементу, значение атрибута lang которого равно es. Применение этих стилей отражено на рисунке 3-6.

Рисунок 3-6: Применение стилей с использованием атрибутивных селекторов

Примечание

На этом рисунке можно отметить одну важную вещь. Стоит обратить внимание, как эти стили повлияли на внешний вид элемента h2. Первый стиль применялся ко всем элементам с атрибутом lang. Второй стиль применялся ко всем элементам с атрибутом lang, значение которого равно es. Второй элемент h2 в нашем документе соответствует обоим этим критериям и поэтому значения для свойств background-color, color, и font-size изменились. Более подробно я расскажу об этом далее в этой главе в разделе "Каскадность стилей".

Выбор по виду отношений

В главе 2 я рассказывал, что элементы (а также объекты, представляющие их в DOM) имеют иерархию, что приводит к различному виду отношений между ними. В CSS есть селекторы, которые позволяют выбрать элементы, основываясь на этих отношениях, см. таблицу 3-5.

Таблица 3-5: Селекторы по виду отношений
Селектор Описание
<selector> <selector> выбирает элементы, которые соответствуют второму селектору и которые являются потомками элементов, соответствующих первому селектору
<selector> > <selector> выбирает элементы, которые соответствуют второму селектору и которые являются дочерними элементами для элементов, соответствующих первому селектору
<selector> + <selector> выбирает элементы, которые соответствуют второму селектору и которые являются следующими сестринскими элементами для элемента, соответствующего первому селектору
<selector> ~ <selector> выбирает элементы, которые соответствуют второму селектору и которые являются сестринскими элементами для элемента (и появляются после), соответствующего первому селектору

Один из этих селекторов я использовал в примере документа цветочного магазина:


.dcell > * {vertical-align: middle}

Этот селектор соответствует всем дочерним элементам тех элементов, которые принадлежат классу dcell. А для свойства vertical-align устанавливается значение middle. В листинге 3-8 показаны некоторые другие использующиеся селекторы по виду отношений.

Листинг 3-8: Использование селекторов по виду отношений

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<style>
		h1 ~ [lang]
		{
			background-color: grey;
			color: white;
		}
		h1 + [lang]
		{
			font-size: 12px;
		}
	</style>
</head>
<body>
	<h1 lang="en">New Delivery Service</h1>
	<h2 lang="en">Color and Beauty to Your Door</h2>
	<h2 lang="es">(Color y belleza a tu puerta)</h2>
	<p>We are pleased to announce that we are starting a home delivery service for your
		flower needs. We will deliver within a 20 mile radius of the store for free and
		$1/mile thereafter.</p>
</body>
</html>

Оба селектора, которые я использовал в данном примере, являются сестринскими. Первый селектор, тот, в котором использован знак тильды (~) , соответствует любому элементу, у которого есть атрибут lang, который появляется после и является сестринским элементом для элемента h1. Для нашего примера это обозначает, что будут выбраны оба элемента h2 (поскольку у них есть нужный атрибут, они являются сестринскими и появляются после элемента h1). Второй селектор, в котором использован знак плюса, схож с первым, но соответствует только ближайшему последующему сестринскому элементу элемента h1. Это обозначает, что будет выбран только первый элемент h2. Результат можно увидеть на рисунке 3-7.

Рисунок 3-7: Использование сестринских селекторов

Выбор с использованием селекторов псевдоэлементов и псевдоклассов

CSS поддерживает целый набор селекторов псевдоэлементов и псевдоклассов. Они обеспечивают нужную функциональность, которая напрямую не соотносится с конкретным элементом или классам в документе. Эти селекторы описаны в таблице 3-6.

Таблица 3-6: Псевдоселекторы
Селектор Описание
:active выбирает элементы, которые на текущий момент активированы пользователем. Как правило, имеются ввиду те элементы, которые находятся под курсором мыши при нажатой кнопке мыши
:checked определяет выбранные элементы (чекбоксы и радиобаттоны)
:default выбирает элементы по умолчанию
:disabled выбирает элементы в отключенном состоянии
:empty выбирает элементы без дочерних элементов
:enabled выбирает элементы, когда они находятся во включенном состоянии
:first-child выбирает элементы, которые являются первыми дочерними элементами у своего родительского элемента
:first-letter выбирает первую букву блока текста
:first-line выбирает первую строку блока текста
:focus выбирает элемент, находящийся в фокусе
:hover выбирает элемент, находящийся на экране под курсором мыши (элемент с наведенной мышью)
:in-range
:out-of-range
выбирает элементы input, если их значения находятся в заданной границе либо за пределами заданной границы соответственно
:lang(<language>) выбирает элемент на основание значения атрибута lang
:last-child выбирает элемент, являющийся последним дочерним элементом у родителя
:link выбирает элементы link
:nth-child(n) выбирает определенный по счету от начала дочерний элемент определенного родительского элемента
:nth-last-child(n) выбирает определенный по счету с конца дочерний элемент определенного родительского элемента
:nth-last-of-type(n) выбирает определенный по счету с конца элемент, начиная от последнего элемента данного типа
:nth-of-type(n) выбирает определенный по счету от начала элемент этого типа
:only-child выбирает элементы, если они являются единственными дочерними элементами у родителя
:only-of-type выбирает элемент, если это элемент уникального типа внутри родительского элемента
:required
:optional
выбирает элементы input в зависимости от наличия атрибута required
:root выбирает корневой элемент документа
:target выбирает элемент, идентификатор (id) которого ссылается на фрагмент URL
:valid
:invalid
выбирает input элемент, валидный или не валидный, основываясь на валидации введенных данных в форму
:visited выбирает элементы link, посещенные пользователем

В листинге 3-9 показано использование некоторых псевдоселекторов.

Листинг 3-9: Использование псевдоселекторов.
<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<style>
		:nth-of-type(2)
		{
			background-color: grey;
			color: white;
		}
		p:first-letter
		{
			font-size: 40px;
		}
	</style>
</head>
<body>
	<h1 lang="en">New Delivery Service</h1>
	<h2 lang="en">Color and Beauty to Your Door</h2>
	<h2 lang="es">(Color y belleza a tu puerta)</h2>
	<p>We are pleased to announce that we are starting a home delivery service for your
		flower needs. We will deliver within a 20 mile radius of the store for free and
		$1/mile thereafter.</p>
</body>
</html>

Псевдоселекторы можно использовать самостоятельно или в качестве модификаций к другим селекторам. В примере я использовал оба этих варианта. Первый селектор подходит любому элементу, который является вторым элементом своего типа. Второй селектор применим к первой букве содержания любого элемента p. Применение этих стилей можно увидеть на рисунке 3-8.

Рисунок 3-8: Использование псевдоселекторов для применения стилей

Группировка селекторов и селектор отрицания

Можно сделать код более гибким, объединяя селекторы. А конкретнее, можно создавать группировки селекторов, объединяя их, а также менять порядок выборки при помощи отрицания. Оба этих метода описаны в таблице 3-7.

Таблица 3-7: Объединенные селекторы
Селектор Описание
<selector>, <selector> выбирает группу элементов, соответствующих первому селектору, и группу элементов, соответствующих второму селектору
:not(<selector>) выбирает элементы, которые не соответствуют указанному селектору

В листинге 3-10 показано, как можно создавать группировки селекторов и пользоваться селектором отрицания.

Листинг 3-10: Использование объединенных селекторов и селектора отрицания

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<style>
		h1, h2
		{
			background-color: grey;
			color: white;
		}
		:not(html):not(body):not(:first-child)
		{
			border: medium double black;
		}
	</style>
</head>
<body>
	<h1 lang="en">
		New Delivery Service</h1>
	<h2 lang="en">
		Color and Beauty to Your Door</h2>
	<p>
		We are pleased to announce that we are starting a home delivery service for your
		flower needs. We will deliver within a 20 mile radius of the store for free and
		$1/mile thereafter.</p>
</body>
</html>

Первый селектор в этом примере – это группировка селекторов h1 и h2. Как вы догадались, он относится ко всем элементам h1 и h2 в документе. Второй селектор более сложный. Я показал вам, как можно использовать псевдоселекторы для модификации других псевдоселекторов, включая селектор отрицания:


:not(html):not(body):not(:first-child) {border: medium double black;}

Этот селектор подходит любому элементу, который не является html элементом, не является body элементом и не является первым дочерним элементом у своего родителя. На рисунке 3-9 видно, каким образом были применены стили в нашем примере.

Рисунок 3-9: Создание группировки селекторов и использование селектора отрицания