html.okpython.net
HTML и CSS для начинающих

CSS :: Селекторы

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

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

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

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

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Универсальный селектор</title>

	<style>
		/* Универсальный селектор выбирает все элементы */
		p *{
		color: green;			 
		font-weight: bold;	 
		}
	</style>
	
</head>
<body>
			
	<pre>
Любой вложенный в абзац элемент будет иметь 
зеленый цвет и полужирное начертание, т.к. 
был использован	универсальный селектор.
	</pre>		

	<p>
		<span>Зеленый цвет и полужирное начертание.</span><br>
		<em>Зеленый цвет и полужирное начертание.</em><br>		
		<b>Зеленый цвет и полужирное начертание.</b>		
	</p>
	
</body>
</html>

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

Селектор по типу

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

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Селектор по типу</title>

	<style>
		
		/* Селектор по типу выбирает все */
		/* указанные через запятую типы элементов */
		 
		/* Задаем шрифт указанных типов элементов */
		div, p, pre{
		color: blue;      
		font-weight: bold;   
		}
		 
		/* А для этого дополнительно еще и фон */
		pre{
		background-color: violet;  
		}
		
	</style>
	
</head>
<body>

	<p>
		color: blue;<br>      
		font-weight: bold;				
	</p>

	<div>
		color: blue;<br>      
		font-weight: bold;				
	</div>	
			
	<pre>
color: blue;      
font-weight: bold;
background-color: violet;		
	</pre>		
	
</body>
</html>

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

Селектор по классу

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

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Селектор по классу</title>

	<style>
		
		/* Селектор по классу выбирает элементы */
		/* с соответствующим значением атрибута class, */
		/* как, например, <p class="my_class">абзац</p> */

		.my_class{
		color: blue;			 
		font-weight: bold;	 
		}
		
	</style>
	
</head>
<body>

	<p class="my_class">
		color: blue;<br>      
		font-weight: bold;				
	</p>

	<div>
		Для этого элемента наш класс my_class не применяется.
	</div>	
			
	<pre class="my_class">
color: blue;      
font-weight: bold;
	</pre>		
	
</body>
</html>

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

Селектор по идентификатору

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

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Селектор по идентификатору</title>

	<style>
		
		/* Селектор по идентификатору выбирает элементы */
		/* с соответствующим значением атрибута id, */
		/* как, например, <p class="my_id">абзац</p> */

		p#my_id{
		color: blue;			 
		font-weight: bold;	 
		}
		
	</style>
	
</head>
<body>

	<p id="my_id">
		color: blue;<br>      
		font-weight: bold;				
	</p>

	<p>
		Для этого абзаца наш селектор не применяется.
	</p>	
	
</body>
</html>

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

Селектор по атрибуту

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

  • [атрибут] – выбираются все элементы, у которых присутствует такой атрибут вне зависимости от его значения, например, [title] {блок объявлений};
  • [атрибут="значение"] – выбираются все элементы, у которых данный атрибут имеет указанное в селекторе значение (здесь и далее учитывается также и регистр символов!), например, [title="Оранжевый цвет текста"] {блок объявлений};
  • [атрибут^="значение"] – выбираются все элементы, у которых значение данного атрибута начинается на подстроку (фрагмент строки), указанную в селекторе, например, [title^="Красный цв"] {блок объявлений};
  • [атрибут$="значение"] – выбираются все элементы, у которых значение данного атрибута заканчинается на подстроку, указанную в селекторе, например, [title$="кста!"] {блок объявлений};
  • [атрибут~="значение"] – выбираются все элементы, у которых значение данного атрибута содержит подстроку, отделенную пробелами от остальной части, или отдельное слово и указанную в селекторе, например, [title~="синий"] {блок объявлений};
  • [атрибут*="значение"] – выбираются все элементы, у которых значение данного атрибута содержит подстроку, указанную в селекторе, например, [title*="олетов"] {блок объявлений}.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Селектор по атрибуту</title>

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

	/* Этот стиль будет применен ко всем элементам, у которых */	
	/* атрибут title заканчинается на подстроку "кста!" */	
	[title$="кста!"]{
	color: green;			 
	}
	
	/* Стиль будет применен ко всем элементам, у которых */	
	/* атрибут title содержит подстроку "синий", */	
	/* отделенную пробелами от остального содержимого */
	[title~="синий"]{
	color: blue;			 
	}
	
	/* А этот стиль будет применен ко всем элементам, у */	
	/* которых атрибут title содержит подстроку "олетов" */	
	[title*="олетов"]{
	color: violet;			 
	}	
		
	</style>
	
</head>
<body>
	
	<p>
		Для этого абзаца наши селекторы не применяется.
	</p>

	<p title="Любой title">
		[title]{font-weight: bold;}
	</p>

	<p title="Оранжевый цвет текста">
		[title="Оранжевый цвет текста"]{color: orange;}
	</p>

	<p title="Красный цвет текста">
		[title^="Красный цв"]{color: red;}
	</p>

	<p title="Зеленый цвет текста!">
		[title$="кста!"]{color: green;}
	</p>

	<p title="Очень синий цвет текста">
		[title~="синий"]{color: blue;}
	</p>

	<p title="Фиолетовый цвет текста">
		[title*="олетов"]{color: violet;}
	</p>
	
</body>
</html>

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

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

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

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

HTML Результат htmlCodes 
<!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>

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

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

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

HTML Результат htmlCodes 
<!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>

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

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

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

HTML Результат htmlCodes 
<!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>

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

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

Селектор родственных элементов выбирает элементы требуемого типа, которые идут после указанного в селекторе элемента и вдобавок имеют с ним общего родителя. Например, если span~em {блок объявлений}, то будут выбраны все элементы «em», которые идут после элементов «span» и имеют с ним общего родителя (см. пример №8).

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Селектор родственных элементов</title>

	<style>
	
		span~em{
		color: orange;			 
		}
		
	</style>
	
</head>
<body>

	<p>
		<span>Я «span», который идет перед «em».</span>
		<em>Я оранжевого цвета, т.к. я расположен после «span» 
		и у нас общий родительский элемент «p».</em>
	</p>
	
</body>
</html>

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

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

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

  • :link – выбираются все непосещенные ссылки, например, a:link {блок объявлений} (см. пример №10).
  • :visited – выбираются все посещенные ссылки, например, a:visited {блок объявлений}.
  • :active – выбирается активный в данный момент элемент требуемого типа (таковым он становится в момент нажатия на него), например, span:active, a:active {блок объявлений}.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Псевдоклассы :active, :link, :visited</title>

	<style>
	
		p{
		width: 400px;			 
		cursor: pointer;			 
		}	

		p:active{
		color: orange;			 
		}
		
		a:link{
		color: violet;			 
		}
		
		a:visited{
		color: red;			 
		}
		
	</style>
	
</head>
<body id="ancor_1">

	<p id="ancor_2">
		Надо мною нажата кнопка мыши, поэтому текст 
		оранжевый. Отпусти, и я опять стану прежним.
	</p>
	
	<a href="#ancor_1">Кликни меня и я стану красной!!!</a><br><br>	
	<a href="#ancor_2">Если я красная, то меня уже посещали.</a>
	
</body>
</html>

Пример №10. Псевдоклассы :active, :link, :visited

  • :hover – выбирается элемент требуемого типа, на который наведен курсор мыши, например, span:hover {блок объявлений} (см. пример №11).
  • :focus – выбирается элемент требуемого типа, который в данный момент находится в фокусе, например, span:focus {блок объявлений}.
  • :target – выбираются все элементы требуемого типа, которые используются в качестве якорей. Стиль к ним применяется после перехода по соответствующей ссылке, например, span:target {блок объявлений}.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Псевдоклассы :hover, :focus, :target</title>
	
	<style>
		
		span:target{
		color: orange;			 
		}
			
		a:hover{
		color: green;			 
		}
		
		span:focus{
		color: red;			 
		}

	</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>

Пример №11. Псевдоклассы :hover, :focus, :target

  • :focus-within – выбирается элемент требуемого типа, когда он сам или его потомки получают фокус, например, form:focus-within {блок объявлений}. Псевдокласс может быть полезен для подсветки формы или ее частей, когда пользователь вводит данные в поля формы (см. пример №12).
  • :enabled – выбираются все элементы формы требуемого типа, у которых атрибут disabled отсутствует (элемент доступен), например, button:enabled {блок объявлений}.
  • :disabled – выбираются все элементы формы требуемого типа, у которых атрибут disabled присутствует (элемент заблокирован), например, button:disabled {блок объявлений}.
  • :checked – выбираются все элементы требуемого типа, которые выбраны пользователем или выбраны по умолчанию при помощи атрибута checked, например, input:checked {блок объявлений}.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Псевдоклассы :focus-within, :enabled, :disabled, :checked</title>
	
	<style>

		/* Оформим немного отступы и границу формы */
		form{
		margin: 1em;
		padding: 0.5em;
		border: 1px solid #DDD;
		border-radius: 0.3em;
		}
				
		/* Подсветим всю форму во время работы с ней */
		form:focus-within{
		border: 1px solid black;
		}
				
		/* Выбранное окошко выделим оранжевой рамкой */
		input:checked{
		outline: 3px;
		outline-color: orange;
		outline-style: solid;	
		}
			
		button:enabled{
		color: green;			 
		}
		
		button:disabled{
		color: red;			 
		}

	</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">Сброс</button> &nbsp; 
		
		<!--  Цвет надписи будет красным, т.к. присутствует атрибут disabled  -->
		<button type="submit" disabled>Отправить</button>
		
	</form>
	
</body>
</html>

Пример №12. Псевдоклассы :focus-within, :enabled, :disabled, :checked

  • :required – выбираются все обязательные для заполнения поля формы <input> (у них присутствует атрибут required), например, input:required {блок объявлений} (см. пример №13).
  • :optional – выбираются все необязательные для заполнения поля формы <input> (у них отсутствует атрибут required), например, input:optional {блок объявлений}.
  • :default – выбираются все элементы формы требуемого типа, используемые по умолчанию в группе похожих элементов, например, button:default {блок объявлений}. Отметим, что данный псевдокласс имеет смысл использовать для следующих элементов с множественным выбором: <button>, <input type="checkbox">, <input type="radio"> и <option> .
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Псевдоклассы :required, :optional, :default</title>

	<style>
		
		/* Обязательное поле выделим красной рамкой */
		input:required{
		outline: 3px;
		outline-color: red;
		outline-style: solid;	
		}
					
		/* Необязательное поле выделим оранжевой рамкой */
		input:optional{
		outline: 3px;
		outline-color: orange;
		outline-style: solid;	
		}

		button:default{
		color: green;
		border: 1px solid blue;				 
		}

	</style>
	
</head>
<body>

	<form action="http://localhost/test/php/script_1.php" method="POST">
		
		<label for="first_name">Имя: </label> &nbsp; 
		<input type="text" name="first_name" id="first_name" required><br><br> 
		
		<label for="second_name">Фамилия: </label> &nbsp; 
		<input type="text" name="second_name" id="second_name"><br><br>
		
		<button type="reset">Сброс</button> &nbsp; 
		
		<!-- Цвет надписи будет зеленым, а граница синей, т.к. -->
		<!-- из двух кнопок данная используется по умолчанию -->		
		<button type="submit" disabled>Отправить</button>
		
	</form>
	
</body>
</html>

Пример №13. Псевдоклассы :required, :optional, :default

  • :in-range – выбираются все элементы требуемого типа, у которых введённое пользователем значение находится в заранее заданном диапазоне (устанавливается при помощи атрибутов min и max), например, input:in-range {блок объявлений} (см. пример №14).
  • :out-of-range – выбираются все элементы требуемого типа, у которых введённое пользователем значение находится вне допустимого диапазона (устанавливается при помощи атрибутов min и max), например, input:out-of-range {блок объявлений}.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Псевдоклассы :in-range, :out-of-range</title>

	<style>
		
		/* При попадании в диапазон выделим поле зеленой рамкой */
		input:in-range{
		outline: 3px;
		outline-color: green;
		outline-style: solid;	
		}
		
		/* При выходе за диапазон выделим поле красной рамкой */
		input:out-of-range{
		outline: 3px;
		outline-color: red;
		outline-style: solid;	
		}
			
	</style>
	
</head>
<body>

	<form action="http://localhost/test/php/script_1.php" method="POST">
		
		<label for="number_field">Введите число от 1 до 10: </label> &nbsp; 
		<input type="number" min="1" max="10" id="number_field" value="1"><br><br> 
		
		<button type="reset">Сброс</button> &nbsp; 
						
		<button type="submit" disabled>Отправить</button>
		
	</form>
	
</body>
</html>

Пример №14. Псевдоклассы :in-range, :out-of-range

  • :valid – выбираются все поля формы, у которых введённое пользователем значение соответствует указанному типу, например, input:valid {блок объявлений} (см. пример №15).
  • :invalid – выбираются все поля формы, у которых введённое пользователем значение не соответствует указанному типу, например, input:invalid {блок объявлений}.
  • :indeterminate – выбираются группы элементов формы требуемого типа, находящиеся в неопределенном состоянии, например, input:indeterminate {блок объявлений}. Отметим, что данный псевдокласс имеет смысл использовать для следующих элементов: <input type="checkbox"> (при чем свойство indeterminate должно быть установлено в true через JavaScript), <input type="radio"> и <progress>.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Псевдоклассы :valid, :invalid, :indeterminate</title>

	<style>
		
		/* При вводе числового значения выделим поле зеленой рамкой */
		input[type="number"]:valid{
		outline: 2px;
		outline-color: green;
		outline-style: solid;	
		}
				
		/* При вводе запрещенного типа значения выделим поле красной рамкой */
		input[type="number"]:invalid{
		outline: 2px;
		outline-color: red;
		outline-style: solid;	
		}
				
		/* Выделим метки неопределенных переключателей */
		input:indeterminate + label{
		color: green;
		}
		
	</style>
	
</head>
<body>

	<form action="http://localhost/test/php/script_1.php" method="POST">
		
		<!-- Если вводить не числа, поле подсветится красным цветом -->
		<label for="number_field">Введите число от 1 до 10: </label> &nbsp; 
		<input type="number" id="number_field" value="1"><br><br> 
		
		<!-- Для радиокнопок JavaScript не нужен -->
		Укажите его четность: &nbsp; 
		<input type="radio" name="even_odd" id="even" value="even">
		<label for="even"> четное</label> &nbsp; &nbsp;
		<input type="radio" name="even_odd" id="odd" value="odd">
		<label for="odd"> нечетное</label><br><br> 

		<!-- Для чекбокосв нужен JavaScript -->		
		Укажите его кратность: &nbsp; 
		<input type="checkbox" name="two" id="two" value="1">
		<label for="two"> кратно 2</label> &nbsp; &nbsp;
		<input type="checkbox" name="three" id="three" value="0">
		<label for="three"> кратно 3</label><br><br>
		
		<button type="reset">Сброс</button> &nbsp; 
		<button type="submit" disabled>Отправить</button>
		
	</form>
	
	<script>
		
		//Переведем все чекбоксы в неопределенное состояние		
		for(var i=0; i<2;i++){
			document.querySelectorAll('[type="checkbox"]')[i].indeterminate = true;
		}

	</script>	
  
</body>
</html>

Пример №15. Псевдоклассы :valid, :invalid, :indeterminate

  • :lang(язык) – выбираются все элементы требуемого типа, у которых атрибут lang имеет значение языка, указанного в селекторе, например, p:lang(en) {блок объявлений} (см. пример №16).
  • :empty – выбираются все пустые элементы требуемого типа, например, span:empty {блок объявлений}.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Псевдоклассы :empty, :lang</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>

Пример №16. Псевдоклассы :empty, :lang

  • :root – выбирает корневой элемент, которым в html-документе является элемент «html», например, :root {блок объявлений}.
  • :nth-child(значение) – выбираются дочерние элементы требуемого типа, у которых порядковый номер следования внутри родительского элемента соответствует значению, указанному в селекторе. В скобках могут быть указаны значения:
    • odd – выбираются дочерние элементы требуемого типа с нечетными порядковыми номерами относительно своего родителя. Например, если задано правило span:nth-child(odd) {блок объявлений}, то в документе будут выбраны все дочерние элементы «span», которые имеют нечетные порядковые номера (1, 3, 5 и т.д.) относительно своего родительского элемента (см. пример №17).
    • even – выбираются дочерние элементы требуемого типа с четными порядковыми номерами относительно своего родителя. Например, если задано правило span:nth-child(even) {блок объявлений}, то в документе будут выбраны все дочерние элементы «span», которые имеют четные порядковые номера (2, 4, 6 и т.д.) относительно своего родительского элемента.
    HTML Результат htmlCodes 
    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Псевдокласс :nth-child()</title>

	<style>
	
		/* Выбираем дочерние по отношению к своему родителю (в данном */ 
		/* случае к элементу «p») элементы «span» с нечетными */
		/* порядковыми номерами: 1, 3, 5 и т.д. */	
		span:nth-child(odd){
		color: red;			 
		}

		/* А здесь с четными порядковыми номерами: 2, 4, 6 и т.д. */
		span:nth-child(even){
		color: blue;			 
		}
		
	</style>
	
</head>
<body>

	<p>
		<!-- Не забываем, что «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>
	</p>
	
</body>
</html>

    Пример №17. Псевдокласс :nth-child()

    • n – выбираются дочерние элементы требуемого типа с указанным порядковым номером n относительно своего родителя, при чем нумерация должна начинаться с единицы. Например, если задано правило span:nth-child(3) {блок объявлений}, то в документе будут выбраны все дочерние элементы «span», которые имеют порядковый номер 3 относительно своего родительского элемента (см. пример №18).
    • an+b – выбираются дочерние элементы требуемого типа, порядковый номер которых относительно своего родителя вычисляется по формуле an+b, где a и b – целые числа, задаваемые в качестве значений, а n – счетчик, который автоматически принимает значения 0, 1, 2 и т.д. Например, если задано правило span:nth-child(3n+4) {блок объявлений}, то в документе будут выбраны все дочерние элементы «span», которые имеют порядковые номера 4, 7, 10 и т.д. относительно своего родительского элемента.
    HTML Результат htmlCodes 
    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Псевдокласс :nth-child(an+b)</title>

	<style>
	
		/* Выбираем дочерние по отношению к своему родителю (в данном */ 
		/* случае к элементу «body») элементы «span» с порядковыми */
		/* номерами 3*0+1=1, 3*1+1=4, 3*2+1=7 и т.д. */	
		span:nth-child(3n+1){
		color: red;			 
		}
		
		/* Стиль применяется к 3-му дочернему элементу «span» */ 
		span:nth-child(3){
		color: blue;			 
		}
		
	</style>
	
</head>
<body>

	<!--  Не забываем, что «br» тоже является элементом  -->
	<span>1 дочерний элемент.</span><br>
	<span>3 дочерний элемент.</span><br>	
	<span>5 дочерний элемент.</span><br>
	<span>7 дочерний элемент.</span><br>	
	<span>9 дочерний элемент.</span><br>
	<span>11 дочерний элемент.</span><br>	
	<span>13 дочерний элемент.</span><br>
	
</body>
</html>

    Пример №18. Псевдокласс :nth-child(an+b)

  • :nth-last-child(значение) – выбираются дочерние элементы требуемого типа, у которых порядковый номер следования внутри родительского элемента отсчитывается от конца родительского элемента (от закрывающего тега) и соответствует значению, указанному в селекторе. В скобках могут быть указаны те же значения, что и в случае псевдокласса :nth-child, т.е. odd, even, n или an+b. Например, если задано правило span:nth-last-child(3n+4) {блок объявлений}, то в документе будут выбраны все дочерние элементы «span», которые имеют порядковые номера 4, 7, 10 и т.д., отсчитываемые относительно конца своего родительского элемента (см. пример №19).
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Псевдокласс :nth-last-child()</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>

Пример №19. Псевдокласс :nth-last-child()

  • :first-child – выбираются первые дочерние элементы требуемого типа (порядковый номер n=1) относительно своего родительского элемента, например, если задано правило span:first-child {блок объявлений}, то в документе будут выбраны все первые дочерние элементы «span» относительно своих родительских элементов (см. пример №20).
  • :last-child – выбираются последние дочерние элементы требуемого типа относительно своего родительского элемента, например, если задано правило span:last-child {блок объявлений}, то в документе будут выбраны все последние дочерние элементы «span» относительно своих родительских элементов.
  • :only-child – выбираются дочерние элементы требуемого типа, которые являются единственными дочерними элементами для своего родительского элемента, например, если задано правило span:only-child {блок объявлений}, то в документе будут выбраны все дочерние элементы «span», которые являются единственными дочерними элементами для своего родительского элемента.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Псевдоклассы :first-child, :last-child, :only-child</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>

Пример №20. Псевдоклассы :first-child, :last-child, :only-child

  • :nth-of-type(значение) – выбираются дочерние элементы требуемого типа без учета (подсчета) любых других дочерних элементов, у которых порядковый номер следования внутри родительского элемента соответствует значению, указанному в селекторе. В скобках могут быть указаны те же значения, что и в случае псевдокласса :nth-child, т.е. odd, even, n или an+b. Например, если задано правило span:nth-of-type(3n+4) {блок объявлений}, то в документе будут выбраны все дочерние элементы «span», которые имеют порядковые номера 4, 7, 10 и т.д., но с учетом того, что другие дочерние элементы как бы отсутствуют и в расчет не берутся (см. пример №21).
  • :nth-last-of-type(значение) – выбираются дочерние элементы требуемого типа без учета (подсчета) любых других дочерних элементов, у которых порядковый номер следования внутри родительского элемента отсчитывается от конца родительского элемента (от закрывающего тега) и соответствует значению, указанному в селекторе. В скобках могут быть указаны те же значения, что и в случае псевдокласса :nth-child, т.е. odd, even, n или an+b. Например, если задано правило span:nth-last-of-type(3n+1) {блок объявлений}, то в документе будут выбраны все дочерние элементы «span», которые имеют порядковые номера 1, 4, 7 и т.д., отсчитываемые относительно конца своего родительского элемента, но с учетом того, что другие дочерние элементы как бы отсутствуют и в расчет не берутся.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Псевдоклассы :nth-of-type(), :nth-last-of-type()</title>
	
	<style>
			
		/* Выбираем дочерние по отношению к своему родителю (в данном */ 
		/* случае к элементу «p») элементы «span» с нечетными */
		/* порядковыми номерами 1, 3, 5 и т.д., но при этом */		
		/* !!! не считаем остальные дочерние элементы !!! */
		span:nth-of-type(2n+1){
		color: orange;			 
		}
	
		/* Применяем к первому дочернему «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>

Пример №21. Псевдоклассы :nth-of-type(), :nth-last-of-type()

  • :first-of-type – выбираются первые дочерние элементы требуемого типа (порядковый номер n=1) относительно своего родительского элемента, но без учета (подсчета) любых других видов дочерних элементов. Например, если задано правило span:first-of-type {блок объявлений}, то в документе будут выбраны все первые дочерние элементы «span» относительно своих родительских элементов, но с учетом того, что другие дочерние элементы как бы отсутствуют и в расчет не берутся (см. пример №22).
  • :last-of-type – выбираются последние дочерние элементы требуемого типа относительно своего родительского элемента, но без учета (подсчета) любых других типов дочерних элементов. Например, если задано правило span:last-of-type {блок объявлений}, то в документе будут выбраны все последние дочерние элементы «span» относительно своих родительских элементов, но с учетом того, что другие дочерние элементы как бы отсутствуют и в расчет не берутся.
  • :only-of-type – выбираются дочерние элементы требуемого типа, которые являются единственными дочерними элементами для своего родительского элемента данного типа (при этом дочерние элементы других типов могут присутствовать). Например, если задано правило span:only-of-type {блок объявлений}, то в документе будут выбраны все дочерние элементы «span», которые являются единственными дочерними элементами данного типа для своего родительского элемента.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Псевдоклассы :first-of-type, :last-of-type, :only-of-type</title>
	
	<style>
		
		/* Выбираем первые и последние дочерние элементы «span». */ 
		/* При этом не считаем остальные дочерние элементы. */
		span:first-of-type{
		color: red;			 
		}
		
		span:last-of-type{
		color: blue;			 
		}
		
		/* Применяем только, если «em» единственный дочерний */ 
		/* элемент данного типа. При этом могут присутствовать */ 
		/* дочерние элементы других видов. */
		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>

Пример №22. Псевдоклассы :first-of-type, :last-of-type, :only-of-type

  • :not(селектор) – выбираются все элементы требуемого типа, которые не подходят под шаблон указанного в скобках селектора. При этом нельзя использовать в качестве значения в скобках сам псевдокласс и псевдоэлементы; например, если задано правило span:not([contenteditable]) {блок объявлений}, то в документе будут выбраны все элементы «span», у которых отсутствует атрибут contenteditable (см. пример №23).
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Псевдокласс :not()</title>
	
	<style>
		
		/* Выбираем все элементы «span», у которых */ 
		/* не задан атрибут contenteditable. */
		span:not([contenteditable]){
		color: red;			 
		}
		
	</style>
	
</head>
<body>

	<span>Нередактируемый элемент «span».</span><br>
	<span contenteditable>Редактируемый элемент «span».</span><br>	
	<span>Опять нередактируемый элемент «span».</span>

</body>
</html>

Пример №23. Псевдокласс :not()

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

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

  • ::first-letter – выбирается первый символ текста в элементах требуемого типа, у которых свойство display имеет одно из значений: block, inline-block, list-item, table-cell или table-caption. При этом первая буква элементов с display: inline-block или display: table-cell не должна быть в тоже время и первой буквой родительского элемента. Кроме того, к псевдоэлементу могут применяться только свойства, относящиеся к шрифтам, тексту, полям, границам, отступам, цвету и фону, хотя в зависимости от браузера могут применяться и некоторые другие свойства. Например, если задано правило p::first-letter {блок объявлений}, то данный стиль будет применен ко всем первым буквам абзацев (см. пример №24).
  • ::first-line – выбираются первые строки блочных элементов требуемого типа, которые отсчитываются от начала текста до принудительного либо автоматического перевода текста на новую строку. При этом ширина строки может меняться в зависимости от ширины блочного элемента, но стиль первой строки будет оставаться постоянным вплоть до перевода на новую строку. К псевдоэлементу могут применяться только свойства, относящиеся к шрифтам, тексту, цвету и фону, хотя в зависимости от браузера могут применяться и некоторые другие свойства. Например, если задано правило p::first-line {блок объявлений}, то данный стиль будет применен ко всем первым строкам абзацев.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Псевдоэлементы ::first-letter, ::first-line</title>

	<style>
	
		div::first-letter{
		color: red;			 
		}
		
		p::first-line{
		color: blue;			 
		}
		
	</style>
	
</head>
<body>

	<div>
		Первая буква блока будет красной.<br>
		Весь остальной текст будет обычным.
	</div>
	
	<p>
		А у меня будет синей вся первая строка.<br>
		А я не синяя, т.к. вторая.
	</p>
	
</body>
</html>

Пример №24. Псевдоэлементы ::first-letter, ::first-line

  • ::before – выбираются элементы требуемого типа, перед которыми вставляется предопределенное содержимое, указанное в качестве значения стилевого свойства content. Например, p::before {блок объявлений} (см. пример №25).
  • ::after – выбираются элементы требуемого типа, после которых вставляется предопределенное содержимое, указанное в качестве значения стилевого свойства content. Например, p::after {блок объявлений}.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Псевдоэлементы ::before, ::after</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>

Пример №25. Псевдоэлементы ::before, ::after

  • ::placeholder – позволяет задать стилевое оформление подсказки, созданной атрибутом placeholder. Например, p::placeholder {блок объявлений}. Псевдокласс может быть полезен для изменения шрифта и цвета подсказки в поле ввода (см. пример №26).
  • ::selection – позволяет задать стилевое оформление выделенного пользователем текста. Например, p::selection {блок объявлений}. При этом в правилах стилей разрешается использовать только следующие свойства: background, background-color, color, cursor, outline и text-shadow.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Псевдоэлементы ::placeholder, ::selection</title>

	<style>
		
		/* Подсказку для имени оформим зеленым цветом */
		input[placeholder="Иван"]::placeholder{
		color: green;
		}

		/* Это для Internet Explorer */
		input[placeholder="Иван"]:-ms-input-placeholder{
		color: green;
		}

		/* Это для Microsoft Edge */
		input[placeholder="Иван"]::-ms-input-placeholder{
		color: green;
		}
					
		/* Подсказку для описания оформим оранжевым цветом */
		textarea[placeholder="Кратко о себе"]::placeholder{
		color: orange;
		}
					
		/* Это для Internet Explorer */
		textarea[placeholder="Кратко о себе"]:-ms-input-placeholder{
		color: orange;
		}		
					
		/* Это для Microsoft Edge */
		textarea[placeholder="Кратко о себе"]::-ms-input-placeholder{
		color: orange;
		}
							
		/* Выделенный текст элементов подсветим желтым фоном */
		::selection{
		background-color: yellow;
		}
		
		/* Выделенный в полях текст оформим красным цветом */
		input::selection, textarea::selection{
		background-color: transparent;
		color: red;
		}
		
	</style>
	
</head>
<body>

	<form action="http://localhost/test/php/script_1.php" method="POST">
		
		<label for="first_name">Имя: </label> &nbsp; 
		<input type="text" name="first_name" placeholder="Иван"><br><br> 
				 
		<textarea name="message" placeholder="Кратко о себе"></textarea><br><br>
		
		<button type="reset">Сброс</button> &nbsp; 
		<button type="submit" disabled>Отправить</button>
		
	</form>
	
	<p>Выделенный текст абзаца подсвечивается желтым фоном.</p>
	
</body>
</html>

Пример №26. Псевдоэлементы ::placeholder, ::selection

Комбинирование селекторов 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 и соответствующие им значения.

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

▲
▼