Селекторы CSS
http://belarusweb.net
Основы создания сайтов

Селекторы 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. Использование селектора идентификаторов

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

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

  • [атрибут] – выбираются все элементы, у которых присутствует такой атрибут вне зависимости от его значения, например, [title] {блок объявлений} (см. пример 1.8);
  • [атрибут="значение"] – выбираются все элементы, у которых данный атрибут имеет указанное в селекторе значение (здесь и далее учитывается также и регистр символов!), например,
    [title="Очень большое животное."] {блок объявлений};
  • [атрибут^="значение"] – выбираются все элементы, у которых значение данного атрибута начинается на подстроку (фрагмент строки), указанную в селекторе, например,
    [title^="Очень бол"] {блок объявлений};
/* Селектор атрибутов выбирает элементы   */
/* в соответствии с заданным шаблоном */
	
/* Этот стиль будет применен ко всем 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. Использование селектора атрибутов

  • [атрибут$="значение"] – выбираются все элементы, у которых значение данного атрибута заканчинается на подстроку, указанную в селекторе, например, [title$="тное."] {блок объявлений} (см. пример 1.9);
  • [атрибут~="значение"] – выбираются все элементы, у которых значение данного атрибута содержит подстроку, отделенную пробелами от остальной части, или отдельное слово и указанную в селекторе, например, [title~="большое"] {блок объявлений};
  • [атрибут*="значение"] – выбираются все элементы, у которых значение данного атрибута содержит подстроку, указанную в селекторе, например, [title*="ивотн"] {блок объявлений};
/* Селектор атрибутов выбирает элементы   */
/* в соответствии с заданным шаблоном */
	
/* Этот стиль будет применен ко всем 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-документа не указываются и отделяются от указанного в селекторе элемента двоеточием ' : '; выбираются элементы необходимого вида, которые соответствуют требованиям указанного в селекторе псевдокласса:

  • :link – выбираются все непосещенные ссылки, например, a:link {блок объявлений} (см. пример 1.13);
  • :visited – выбираются все посещенные ссылки, например, a:visited {блок объявлений};
  • :active – выбирается активный в данный момент элемент требуемого вида (таковым он становится в момент нажатия на него), например, span:active, a:active {блок объявлений};
<!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)

  • :hover – выбирается элемент требуемого вида, на который наведен курсор мыши, например, span:hover {блок объявлений} (см. пример 1.14);
  • :focus – выбирается элемент требуемого вида, который в данный момент находится в фокусе, например, span:focus {блок объявлений};
  • :target – выбираются все элементы требуемого вида, которые используются в качестве якорей; стиль к ним применяется после перехода по соответствующей ссылке, например, span:target {блок объявлений};
<!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)

  • :enabled – выбираются все элементы формы требуемого вида, у которых атрибут disabled отсутствует (элемент доступен), например, button:enabled {блок объявлений} (см. пример 1.15);
  • :disabled – выбираются все элементы формы требуемого вида, у которых атрибут disabled присутствует (элемент заблокирован), например, button:disabled {блок объявлений};
  • :checked – выбираются все элементы требуемого вида, которые выбраны пользователем или выбраны по умолчанию при помощи атрибута checked, например, input:checked {блок объявлений};
<!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)

  • :lang(язык) – выбираются все элементы требуемого вида, у которых атрибут lang имеет значение языка, указанного в селекторе, например, p:lang(en) {блок объявлений} (см. пример 1.16);
  • :empty – выбираются все пустые элементы требуемого вида, например, span:empty {блок объявлений};
<!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)

  • :root – выбирает корневой элемент, которым в html-документе является элемент 'html', например, :root {блок объявлений};
  • :nth-child(значение) – выбираются дочерние элементы требуемого вида, у которых порядковый номер следования внутри родительского элемента соответствует значению, указанному в селекторе; в скобках могут быть указаны значения:
    • odd – выбираются дочерние элементы требуемого вида с нечетными порядковыми номерами относительно своего родителя, например, если задано правило span:nth-child(odd) {блок объявлений}, то в документе будут выбраны все дочерние элементы 'span', которые имеют нечетные порядковые номера (1, 3, 5 и т.д.) относительно своего родительского элемента (см. пример 1.17);
    • even – выбираются дочерние элементы требуемого вида с четными порядковыми номерами относительно своего родителя, например, если задано правило span:nth-child(even) {блок объявлений}, то в документе будут выбраны все дочерние элементы 'span', которые имеют четные порядковые номера (2, 4, 6 и т.д.) относительно своего родительского элемента;
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">	
    	<title>Селектор псевдоклассов</title>
    	
    	<!-- Выбираем дочерние по отношению к своему родителю (в данном --> 
    	<!-- случае к элементу 'p') элементы 'span' с нечетными  -->
    	<!-- порядковыми номерами: 1, 3, 5 и т.д. -->	
    	<style>
    		span:nth-child(odd){
    		color: red;			 
    		}
    	</style>
    	<!-- А здесь с четными порядковыми номерами: 2, 4, 6 и т.д. -->
    	<style>
    		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>
    

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

    • n – выбираются дочерние элементы требуемого вида с указанным порядковым номером n относительно своего родителя, при чем нумерация начинается с единицы, например, если задано правило span:nth-child(3) {блок объявлений}, то в документе будут выбраны все дочерние элементы 'span', которые имеют порядковый номер 3 относительно своего родительского элемента (см. пример 1.18);
    • an+b – выбираются дочерние элементы требуемого вида, порядковый номер которых относительно своего родителя вычисляется по формуле an+b, где a и b – целые числа, задаваемые в качестве значений, а n – счетчик, который автоматически принимает значения 0, 1, 2 и т.д., например, если задано правило span:nth-child(3n+4) {блок объявлений}, то в документе будут выбраны все дочерние элементы 'span', которые имеют порядковые номера 4, 7, 10 и т.д. относительно своего родительского элемента;
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">	
    	<title>Селектор псевдоклассов</title>
    	
    	<!-- Выбираем дочерние по отношению к своему родителю (в данном --> 
    	<!-- случае к элементу 'body') элементы 'span' с порядковыми  -->
    	<!-- номерами 3*0+1=1, 3*1+1=4, 3*2+1=7 и т.д. -->	
    	<style>
    		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>
    

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

  • :nth-last-child(значение) – выбираются дочерние элементы требуемого вида, у которых порядковый номер следования внутри родительского элемента отсчитывается от конца родительского элемента (от закрывающего тега) и соответствует значению, указанному в селекторе; в скобках могут быть указаны те же значения, что и в случае псевдокласса :nth-child, т.е. odd, even, n или an+b, например, если задано правило span:nth-last-child(3n+4) {блок объявлений}, то в документе будут выбраны все дочерние элементы 'span', которые имеют порядковые номера 4, 7, 10 и т.д., отсчитываемые относительно конца своего родительского элемента (см. пример 1.19);
<!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)

  • :first-child – выбираются первые дочерние элементы требуемого вида (порядковый номер n=1) относительно своего родительского элемента, например, если задано правило span:first-child {блок объявлений}, то в документе будут выбраны все первые дочерние элементы 'span' относительно своих родительских элементов (см. пример 1.20);
  • :last-child – выбираются последние дочерние элементы требуемого вида относительно своего родительского элемента, например, если задано правило span:last-child {блок объявлений}, то в документе будут выбраны все последние дочерние элементы 'span' относительно своих родительских элементов;
  • :only-child – выбираются дочерние элементы требуемого вида, которые являются единственными дочерними элементами для своего родительского элемента, например, если задано правило span:only-child {блок объявлений}, то в документе будут выбраны все дочерние элементы 'span', которые являются единственными дочерними элементами для своего родительского элемента;
<!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)

  • :nth-of-type(значение) – выбираются дочерние элементы требуемого вида без учета (подсчета) любых других дочерних элементов, у которых порядковый номер следования внутри родительского элемента соответствует значению, указанному в селекторе; в скобках могут быть указаны те же значения, что и в случае псевдокласса :nth-child, т.е. odd, even, n или an+b, например, если задано правило span:nth-of-type(3n+4) {блок объявлений}, то в документе будут выбраны все дочерние элементы 'span', которые имеют порядковые номера 4, 7, 10 и т.д., но с учетом того, что другие дочерние элементы как бы отсутствуют и в расчет не берутся (см. пример 1.21);
  • :nth-last-of-type(значение) – выбираются дочерние элементы требуемого вида без учета (подсчета) любых других дочерних элементов, у которых порядковый номер следования внутри родительского элемента отсчитывается от конца родительского элемента (от закрывающего тега) и соответствует значению, указанному в селекторе; в скобках могут быть указаны те же значения, что и в случае псевдокласса :nth-child, т.е. odd, even, n или an+b, например, если задано правило span:nth-last-of-type(3n+1) {блок объявлений}, то в документе будут выбраны все дочерние элементы 'span', которые имеют порядковые номера 1, 4, 7 и т.д., отсчитываемые относительно конца своего родительского элемента, но с учетом того, что другие дочерние элементы как бы отсутствуют и в расчет не берутся;
<!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)

  • :first-of-type – выбираются первые дочерние элементы требуемого вида (порядковый номер n=1) относительно своего родительского элемента, но без учета (подсчета) любых других видов дочерних элементов, например, если задано правило span:first-of-type {блок объявлений}, то в документе будут выбраны все первые дочерние элементы 'span' относительно своих родительских элементов, но с учетом того, что другие дочерние элементы как бы отсутствуют и в расчет не берутся (см. пример 1.22);
  • :last-of-type – выбираются последние дочерние элементы требуемого вида относительно своего родительского элемента, но без учета (подсчета) любых других видов дочерних элементов, например, если задано правило span:last-of-type {блок объявлений}, то в документе будут выбраны все последние дочерние элементы 'span' относительно своих родительских элементов, но с учетом того, что другие дочерние элементы как бы отсутствуют и в расчет не берутся;
  • :only-of-type – выбираются дочерние элементы требуемого вида, которые являются единственными дочерними элементами для своего родительского элемента данного вида (при этом дочерние элементы других видов могут присутствовать), например, если задано правило span:only-of-type {блок объявлений}, то в документе будут выбраны все дочерние элементы 'span', которые являются единственными дочерними элементами данного вида для своего родительского элемента;
<!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)

  • :not(селектор) – выбираются все элементы требуемого вида, которые не подходят под шаблон указанного в скобках селектора; при этом нельзя использовать в качестве значения в скобках сам псевдокласс и псевдоэлементы; например, если задано правило span:not([contenteditable]) {блок объявлений}, то в документе будут выбраны все элементы 'span', у которых отсутствует атрибут contenteditable (см. пример 1.23).
<!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-документа и соответствующие требованиям указанного в селекторе псевдоэлемента, который отделяется от элемента двумя двоеточиями ' :: '; применяются следующие псевдоэлементы:

  • ::first-letter – выбирается первая буква элементов требуемого вида, у которых свойство display имеет одно из значений: block, inline-block, list-item, table-cell или table-caption, при этом первая буква элементов с {display: inline-block|table-cell} не должна быть в тоже время и первой буквой родительского элемента; кроме того, к псевдоэлементу могут применяться только свойства, относящиеся к шрифтам, тексту, полям, границам, отступам, цвету и фону, хотя в зависимости от браузера могут применяться и некоторые другие свойства; например, если задано правило p::first-letter {блок объявлений}, то данный стиль будет применен ко всем первым буквам абзацев (см. пример 1.24);
  • ::first-line – выбираются первые строки блочных элементов требуемого вида, которые отсчитываются от начала текста до принудительного либо автоматического перевода текста на новую строку, при этом ширина строки может меняться в зависимости от ширины блочного элемента, но стиль первой строки будет оставаться постоянным вплоть до перевода на новую строку; к псевдоэлементу могут применяться только свойства, относящиеся к шрифтам, тексту, цвету и фону, хотя в зависимости от браузера могут применяться и некоторые другие свойства; например, если задано правило p::first-line {блок объявлений}, то данный стиль будет применен ко всем первым строкам абзацев;
<!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)

  • ::before – выбираются элементы требуемого вида, перед которыми вставляется предопределенное содержимое, указанное в качестве значения стилевого свойства content; например, p::before {блок объявлений} (см. пример 1.25);
  • ::after – выбираются элементы требуемого вида, после которых вставляется предопределенное содержимое, указанное в качестве значения стилевого свойства content; например, p::after {блок объявлений}.
<!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 и соответствующие им значения.