belarusweb.net
© Петр Романовский Минск, 2016-2018.



belarusweb.net

Основы создания сайтов...
CSS >>>

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

Назначение селекторов

Как было сказано немного выше, селекторы предназначены для нахождения (выборки) элементов, к которым браузеру следует применять данный стиль. Если одно и тоже правило используется для нескольких селекторов, то они отделяются друг от друга запятой. Селекторы играют важную роль и в JavaScript, где они используются для поиска нужных html-элементов. При этом существует достаточное количество типов селекторов, которые в полной мере и довольно просто позволяют отыскать нужные элементы. Перечислим их.

Универсальный селектор

Универсальный селектор выбирает все элементы на странице, а сам селектор имеет вид звездочки, например, * {блок объявлений} (см. пример 1.4);

/* Универсальный селектор выбирает все элементы */

*{
color: red;			 
font-weight: bold;	 
}

Пример 1.4. Использование универсального селектора

Селекторы элементов

Селекторы элементов выбирают все элементы указанного вида, а если их несколько, то виды элементов перечисляются через запятую, например, span {блок объявлений} или сразу для нескольких видов элементов span, div, p {блок объявлений} (см. пример 1.5);

/* Селектор элементов выбирает все */
/* указанные через запятую элементы */

/* задаем шрифт указанных элементов*/
span, div, p{
color: red;			 
font-weight: bold;	 
}

/* а для этих дополнительно еще и фон */
div, p{
background-color: grey;	 
}

Пример 1.5. Использование селектора элементов

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

Селекторы классов выбирают все элементы, у которых в качестве значения атрибута class указано имя селектора; сам селектор классов начинается с точки, после которой следует имя селектора (класса), например, .my_class {блок объявлений} (см. пример 1.6);

/* Селектор классов выбирает элементы   */
/* с соответствующим значением атрибута class, */
/* как, например, 

абзац

*/ .my_class{ color: red; font-weight: bold; }

Пример 1.6. Использование селектора классов

Селекторы идентификаторов

Селекторы идентификаторов выбирают элемент с соответствующим значением атрибута id; сам селектор начинается со знака решетки ' # ', после которого следует идентификатор (т.е. значение атрибута id), например, #my_id {блок объявлений} (см. пример 1.7);

	/* Селектор идентификаторов выбирает элемент   */
	/* с соответствующим значением атрибута id, */
	/* как, например, 

абзац

*/ #my_id{ color: red; font-weight: bold; } /* Его отличие от селектора классов в том, что он */ /* применяется только к одному элементу на странице. */

Пример 1.7. Использование селектора идентификаторов

Селекторы атрибутов

Селекторы атрибутов выбирают элементы по значению атрибутов, а сам селектор берется в квадратные скобки; если селектор применяется к конкретному виду элементов, например, абзацам, то он пишется сразу же после имени элемента без пробела; данный тип селекторов обладает мощным инструментом поиска по шаблону, например:

/* Селектор атрибутов выбирает элементы   */
/* в соответствии с заданным шаблоном */
	
/* Этот стиль будет применен ко всем html-элементам, */	
/* у которых задан атрибут title, например, */	
/* к абзацу 

абзац

или */ /* к абзацу

абзац

*/ [title]{ color: red; font-weight: bold; } /* Стиль будет применен ко всем html-элементам, */ /* у которых атрибут title="Очень большое животное", */ /* например, к абзацу */ /*

абзац

*/ [title="Очень большое животное"]{ color: red; font-weight: bold; } /* А этот стиль будет применен ко всем html-элементам, */ /* у которых атрибут title начинается на подстроку */ /* "Очень бол", например, к абзацу */ /*

абзац

*/ [title^="Очень бол"]{ color: red; font-weight: bold; }

Пример 1.8. Использование селектора атрибутов

/* Селектор атрибутов выбирает элементы   */
/* в соответствии с заданным шаблоном */
	
/* Этот стиль будет применен ко всем html-элементам, */	
/* у которых атрибут title заканчинается на подстроку */	
/* "тное.",  например, к абзацу  */
/*  

абзац

*/ [title$="тное."]{ color: red; font-weight: bold; } /* Стиль будет применен ко всем html-элементам, */ /* у которых атрибут title содержит подстроку */ /* "большое", отделенную пробелами от остального */ /* содержимого, например, к абзацу */ /*

абзац

*/ [title~="большое"]{ color: red; font-weight: bold; } /* А этот стиль будет применен ко всем html-элементам, */ /* у которых атрибут title содержит подстроку */ /* "ивотн", например, к абзацу */ /*

абзац

*/ [title*="ивотн"]{ color: red; font-weight: bold; }

Пример 1.9. Еще один вариант использования селектора атрибутов

Контекстные селекторы

Контекстные селекторы выбирают все элементы требуемого вида, которые находятся внутри указанных в селекторе элементов-родителей (в селекторе вложенный элемент пишется через пробел после элемента-родителя), например, если задано правило div p span {блок объявлений}, то стиль будет применен ко всем элементам 'span', которые находятся внутри абзацев, в свою очередь находящихся внутри элемента 'div' (см. пример 1.10);

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Контекстный селектор</title>
	<style>
		/* Контекстный селектор выбирает элементы, */
		/* вложенные в элементы-родители */
			
		div p span{
		color: red;			 
		font-weight: bold;	 
		}
	</style>
</head>
<body>
	<!-- Здесь span  вложен в абзац, а тот в элемент 'div' -->
	<div>
		<p>
			<span>Мой текст имеет красный цвет и 
			полужирное начертание</span>.
		</p>
	</div>		
		
	<span>
		Ко мне это правило не относится, ведь я же  
		вложен только в тело документа.
	</span>
</body>
</html>

Пример 1.10. Использование контекстного селектора

Селекторы дочерних элементов

Селекторы дочерних элементов выбирают элементы требуемого вида, которые являются дочерними по отношению к указанному в селекторе элементу, например, p>span {блок объявлений} (см. пример 1.11);

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Селектор дочерних элементов</title>
	<style>
		p>span{
		color: orange;			 
		font-weight: bold;	 
		}
	</style>
</head>
<body>
	<p>
		<!-- Здесь 'span'  является дочерним, т.к. находится -->
		<!-- непосредственно внутри элемента 'p'. -->
		<span>Мой текст имеет оранжевый цвет и 
		полужирное начертание</span>. <br>
	
		<em>
			<span>Ко мне это правило не относится, 
			т.к. мой родитель элемент 'em'.</span><br>
		</em>
		
		<!-- Здесь 'span' тоже является дочерним. -->	
		<span>Зато я &ndash; тоже дочерний для 'p'.</span>
	</p>	
</body>
</html>

Пример 1.11. Использование селектора дочерних элементов

Селекторы соседних элементов

Селекторы соседних элементов выбирают элементы требуемого вида, которые идут после указанного в селекторе элемента, например, p+span {блок объявлений}, здесь будут выбраны все элементы 'span', которые идут после элементов 'p' (см. пример 1.12).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Селектор соседних элементов</title>
	<style>
		br+em{
		color: orange;			 
		}
	</style>
</head>
<body>
	<span>Текст...</span> <br>
<!-- Элемент 'em' расположен после элемента 'br' -->
	<em>Курсив оранжевого цвета.</em>
</body>
</html>

Пример 1.12. Использование селектора соседних элементов

Селекторы псевдоклассов

Селекторы псевдоклассов напоминает селектор классов, но в отличие от классов, псевдоклассы в разметке html-документа не указываются и отделяются от указанного в селекторе элемента двоеточием ' : '; выбираются элементы необходимого вида, которые соответствуют требованиям указанного в селекторе псевдокласса:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Селектор псевдоклассов</title>
	<style>
		span:active{
		color: orange;			 
		}
		
		a:link{
		color: violet;			 
		}
		
		a:visited{
		color: red;			 
		}
	</style>
</head>
<body>
	<span>Надо мною нажата кнопка мыши, поэтому текст оранжевый. <br> 
	Отпусти, и я опять стану прежним.</span><br> <br>
	
<a href="http://belarusweb.net">Если я красная, то меня уже посещали.</a>
</body>
</html>

Пример 1.13. Использование селектора псевдоклассов (пример №1)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Селектор псевдоклассов</title>
	<style>
		a:hover{
		color: green;			 
		}
		
		span:focus{
		color: red;			 
		}
		
		span:target{
		color: orange;			 
		}
	</style>
</head>
<body>
	<span id="span_1">Мой текст становится оранжевым, когда 
	ко мне был совершен переход по первой ссылке.</span><br><br> 
	
	<span id="span_2">Мой текст становится оранжевым, когда 
	ко мне был совершен переход по второй ссылке.</span><br><br> 
	
	<a href="#span_1">Я первая ссылка. Я становлюсь зеленой 
	при наведении на меня курсора мыши.</a><br><br>
	
	<a href="#span_2">Я вторая ссылка и тоже становлюсь зеленой 
	при наведении на меня курсора мыши.</a><br><br>
	
	<br><span contenteditable>Когда я в фокусе, мой текст имеет 
	красный цвет.</span>
</body>
</html>

Пример 1.14. Использование селектора псевдоклассов (пример №2)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Селектор псевдоклассов</title>
	<style>
		button:enabled{
		color: green;			 
		}
		
		button:disabled{
		color: red;			 
		}
		
		/* Выбранное окошко выделим оранжевой рамкой */
		input:checked{
		outline: 3px;
		outline-color: orange;
		outline-style: solid;	
		}
	</style>
</head>
<body>
	<form action="http://localhost/test/php/script_1.php" method="POST">
		
		<label for="first">1 вариант</label>
		<input type="checkbox" checked name="first" value="1" id="first"> 
		
		&nbsp;<label for="second">2 вариант</label>
		<input type="checkbox" name="second" value="2" id="second">
		
		&nbsp;<label for="third">3 вариант</label>
		<input type="checkbox" name="third" value="3" id="third"><br><br>
		
<!-- Цвет надписи будет красным, т.к. присутствует атрибут 'disabled' -->
		<button type="reset" disabled>Сброс</button> &nbsp; 
		
<!-- Цвет надписи будет зеленым, т.к. атрибут 'disabled' отсутствует -->		
		<button type="submit">Отправить</button>
	</form>
</body>
</html>

Пример 1.15. Использование селектора псевдоклассов (пример №3)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Селектор псевдоклассов</title>
	<style>
		p:lang(en){
		color: green;			 
		}
		
		p:lang(ru){
		color: red;			 
		}
					
		span:empty{
		padding-left: 5px;   /* Отступ слева */
		background-color: orange;	
		}
	</style>
</head>
<body>
	<p lang="en">
		I am english text.<span></span>
	</p>	
	
	<p lang="ru">
		Я русский текст.<span></span>
	</p>		
</body>
</html>

Пример 1.16. Использование селектора псевдоклассов (пример №4)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Селектор псевдоклассов</title>
	
	<!-- Выбираем дочерние по отношению к своему родителю (в данном --> 
	<!-- случае к элементу 'body') элементы 'span' с порядковыми  -->
	<!-- номерами считая с конца 3*0+1=1, 3*1+1=4, 3*2+1=7 и т.д., -->	
	<!--  что соответствует номерам 10, 7, 4, 1 начиная с начала -->
	<style>
		span:nth-last-child(3n+1){
		color: red;			 
		}
		
		/* Стиль применяется к 3-му дочернему элементу 'span' */ 
		/* с конца, т.е. к 8-му с начала */
		span:nth-last-child(3){
		color: blue;			 
		}
	</style>
</head>
<body>
	<!-- Не забываем, что 'br' тоже является элементом -->
		<span>1 дочерний элемент.</span> 
		<span>2 дочерний элемент.</span>	
		<br><span>4 дочерний элемент.</span>
		<span>5 дочерний элемент.</span><br>	
		<span>7 дочерний элемент. </span>
		<span>8 дочерний элемент.</span><br>	
		<span>10 дочерний элемент.</span>
</body>
</html>

Пример 1.19. Использование селектора псевдоклассов (пример №7)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Селектор псевдоклассов</title>
		
	<style>
		span:first-child{
		color: orange;			 
		}
		
		span:last-child{
		color: blue;			 
		}
		
		span:only-child{
		color: red;			 
		}
	</style>
</head>
<body>
	<p>
		<span>Первый дочерний элемент.</span><br>
		<span>3 дочерний элемент.</span><br>	
		<span>Последний дочерний элемент.</span>
	</p>
	
	<p>
		<span>Единственный дочерний элемент.</span>
	</p>	
</body>
</html>

Пример 1.20. Использование селектора псевдоклассов (пример №8)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Селектор псевдоклассов</title>
	<!-- Выбираем дочерние по отношению к своему родителю (в данном --> 
	<!-- случае к элементу 'p') элементы 'span' с нечетными  -->
	<!-- порядковыми номерами 1, 3, 5 и т.д., но при этом  -->		
	<!-- !!! не считаем остальные дочерние элементы !!!  -->
	<style>
		span:nth-of-type(2n+1){
		color: orange;			 
		}
	</style>
	<style>
		/* Применяем к первому дочернему 'em' с конца */
		/* !!! не считаем остальные дочерние элементы !!! */
		em:nth-last-of-type(1){
		color: blue;			 
		}
	</style>
</head>
<body>
	<p>
		<!-- !!! Элементы 'br' и 'b' не считаем !!!  -->
		<span>1 дочерний элемент 'span'.</span><br>
		<b>Меня не считаем, т.к. я не 'span'!</b><br>
		<span>2 дочерний элемент 'span'.</span><br>	
		<span>3 дочерний элемент 'span'.</span>
	</p>
	<p>
		<em>1 дочерний элемент 'em'.</em><br>
		<em>2 дочерний элемент 'em'.</em><br>
		<b>Я &ndash; элемент 'b'.</b><br>
	</p>	
</body>
</html>

Пример 1.21. Использование селектора псевдоклассов (пример №9)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Селектор псевдоклассов</title>
	<!-- Выбираем первые и последние дочерние элементы 'span'.--> 
	<!--  При этом не считаем остальные дочерние элементы.  -->
	<style>
		span:first-of-type{
		color: red;			 
		}
		span:last-of-type{
		color: blue;			 
		}
	</style>
	<!-- Применяем только, если 'em' единственный дочерний  --> 
	<!-- элемент данного вида. При этом могут присутствовать --> 
	<!-- дочерние элементы других видов. -->
	<style>
		em:only-of-type{
		color: orange;			 
		}
	</style>
</head>
<body>
	<p>
		<!-- !!! Элементы 'br' и 'b' не считаем !!!  -->
		<span>1 дочерний элемент 'span'.</span><br>
		<b>Меня не считаем, т.к. я не 'span'!</b><br>
		<span>2 дочерний элемент 'span'.</span><br>	
		<span>3 дочерний элемент 'span'.</span>
	</p>
	<p>
		<em>Единственный дочерний элемент 'em'.</em><br>
		<b>Я &ndash; элемент 'b'.</b><br>
	</p>	
</body>
</html>

Пример 1.22. Использование селектора псевдоклассов (пример №10)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Селектор псевдоклассов</title>
	<!-- Выбираем все элементы 'span', у которых --> 
	<!-- не задан атрибут 'contenteditable'.  -->
	<style>
		span:not([contenteditable]){
		color: red;			 
		}
	</style>
</head>
<body>
	<span>Нередактируемый элемент 'span'.</span><br>
	<span contenteditable>Редактируемый элемент 'span'.</span><br>	
	<span>Опять нередактируемый элемент 'span'.</span>
</body>
</html>

Пример 1.23. Использование селектора псевдоклассов (пример №11)

Селекторы псевдоэлементов

Селекторы псевдоэлементов выбирают элементы требуемого вида, явно не указанные в дереве элементов html-документа и соответствующие требованиям указанного в селекторе псевдоэлемента, который отделяется от элемента двумя двоеточиями ' :: '; применяются следующие псевдоэлементы:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Селектор псевдоэлементов</title>
	<style>
		div::first-letter{
		color: red;			 
		}
		
		p::first-line{
		color: blue;			 
		}
	</style>
</head>
<body>
	<div>
		Первая буква блока будет красной.<br>
		Весь остальной текст будет обычным.
	</div>
	
	<p>
		А у меня будет синей вся первая строка.<br>
		А я не синяя, т.к. вторая.
	</p>
</body>
</html>

Пример 1.24. Использование селектора псевдоэлементов (пример №1)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Селектор псевдоэлементов</title>
	<style>
	/* Вставим перед элементами красные звездочки. */
		div::before, p::before{
		content: "***";
		color: red;			 
		}
		
	/* Вставим после элементов синие звездочки. */	
		p::after, div::after{
		content: "***";
		color: blue;			 
		}
	</style>
</head>
<body>
	<div>
		У меня вначале стоят красные звездочки,<br>
		а в конце синие!
	</div>
	
	<p>
		Что ты говоришь?<br>
		У меня, представь, тоже)))
	</p>
</body>
</html>

Пример 1.25. Использование селектора псевдоэлементов (пример №2)

Комбинирование селекторов CSS

Очень важной особенностью перечисленных видов селекторов является возможность их комбинирования между собой практически в любых вариациях. Приведем в качестве примеров несколько комбинаций селекторов разных видов: p.my_class:hover {блок объявлений} – стиль будет применен ко всем параграфам, у которых задан атрибут class="my_class", при наведении на них курсора мыши; .list_1 a:visited {блок объявлений} – этот стиль будет применен ко всем посещенным ссылкам, которые находятся внутри элементов с атрибутом class="list_1"; p[class*="back"] > strong span[contenteditable]:focus {блок объявлений} – этот стиль будет применяться к каждому элементу span, у которого имеется атрибут contenteditable, он находится в данный момент в фокусе и является вложенным в элемент strong, который является дочерним по отношению к элементу p, имеющему атрибут class, в значении которого присутствует подстрока 'back'. Следует обязательно попрактиковаться в составлении селекторов. Для этого можно воспользоваться нашим разделом 'Задачник'.

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

Контрольные вопросы и задания

  1. Для чего нужны селекторы CSS?
  2. Перечислите шаблоны селектора атрибутов.
  3. Попробуйте перечислить псевдоклассы и псевдоэлементы соответствующих селектров.

Быстрый переход к другим страницам

Словарь новых английских слов

property ['prɔpəti] – свойство.
import [ˈɪmpɔːt] – импорт, импортировать.
selector [si'lektə] – искатель, отборщик.
visited [ˈvɪzɪtɪd] – посещенный.
active ['æktiv] – активный, действующий.
target [ˈtɑːɡɪt] – цель, мишень.
enabled [ɪˈneɪbl̩d] – разрешенный.
disabled [dɪsˈeɪbld] – заблокированный.
checked [tʃɛkt] – выбранный, проверенный.
empty [ˈɛm(p)ti] – пустой.
root [ruːt] – корень, основание.
odd [ɒd] – нечетный, непарный.
even [ˈiːvn] – четный.
child [tʃʌɪld] – дочерний элемент.
first [fəːst] – первый.
last [lɑːst] – последний.
only [ˈəʊnli] – только, единственный.
type [taɪp] – тип.
not [nɒt] – не, ни.
letter [ˈletər] – буква, литера.
line [laɪn] – линия, строка.
before [bɪˈfɔː] – впереди, перед.
after [ˈɑːftə] – потом, после, позади.
content [kənˈtɛnt] – содержимое.
hover [ˈhɒvə] – нависать.
strong [strɔːŋ] – сильный, крепкий.
important [ɪmˈpɔːt(ə)nt] – важный.
centimeter ['senti,mi:tə] – сантиметр.
inch [int∫] – дюйм (2,54 см).
point [pɔint] – пункт, точка.
pica [ˈpʌɪkə] – шрифт 'пика'.
percent [pəˈsent] – процент.
font [fɒnt] – комплект шрифта.
view [vjuː] – вид, смотреть.
hue [hjuː] – цвет, оттенок, тон.
saturation [satʃəˈreɪʃ(ə)n] – насыщенность.
lightness [ˈlʌɪtnəs] – освещенность, светлота.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2018.
Связаться с автором
Наверх