Следующий элемент css: Селектор следующих элементов

Следующий элемент css: Селектор следующих элементов | CSS справочник

Содержание

Селектор следующих элементов | CSS справочник

CSS селекторы

Значение и применение

Использование селектора следующих элементов (элемент 1 ~ элемент 2) позволяет выбрать все элементы 2, которые следуют сразу же за элементом 1 (смежные элементы), а также все элементы 2, которые находятся на одном уровне вложенности (сестринские элементы, или другое название — соседние).

Этот селектор чаще всего называют селектором смежных элементов и элементов одного уровня, или селектором следующих элементов.

Поддержка браузерами

CSS синтаксис:

element ~ element {
блок объявлений;
}

Версия CSS

CSS3

Пример использования

Перед нами стоит задача стилизовать все абзацы (элементы <p>), которые следуют сразу за элементом <h3> и элементы <p>, которые являются сестринскими по отношению к друг другу (они выделены оранжевым цветом на изображении):

Выбор смежных и сестринских элементов в документе.

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

Для того, чтобы нам выбрать все элементы <p>, которые следуют сразу за <h3> и элементы <p>), которые являются сестринскими по отношению к друг другу, нам необходимо создать следующий селектор:

h3~p {
блок объявлений;
}

Кроме того, нам необходимо по особенному стилизовать все элементы, которые являются сестринскими для элемента <div> (элементы <h3> и <p>). Для этого нам необходимо использовать селектор следующих элементов с универсальным селектором:

div~* {
блок объявлений;
}

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор смежных элементов</title>
<style>
h3~p { /* выбираем все элементы <p> смежные и сестринские для <h3> */
background-color: lightblue; /* задаём цвет заднего фона */
color: red; /* задаём цвет текста */
}
div~* { /* выбираем все сестринские элементы <div> */
font-style: italic; /* устанавливаем курсивное начертание шрифта */
border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */
}
</style>
</head>
	<body>
		<div>
			<h3>Заголовок внутри div</h3>
			<p>Абзац один</p>
			<p>Абзац два</p>
		</div>
		<h3>Заголовок внутри body</h3>
		<p>Абзац один</p>
	</body>
</html>

В этом примере с использованием селектора следующих элементов мы стилизовали первые абзацы, которые следуют сразу после заголовков второго уровня (смежные элементы) и все сестринские абзацы. Кроме того, по особенному стилизовали все элементы, которые являются сестринскими для элемента <div>.

Результат нашего примера:

Пример использования селектора следующих элементов.CSS селекторы

Учебник CSS 3. Статья «Селекторы. Часть 1»

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

Основная функция селекторов заключается в том, чтобы контролировать дизайн веб страниц, выбирая элемент, или элементы по определенным критериям и стилизуя их с помощью CSS свойств, которые вы указываете в блоке объявлений (описаний).

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

Рис. 3а Селектор типа в CSS.

В предыдущих примерах, да и в практическом задании предыдущей статьи «Создание первой таблицы стилей» мы с Вами использовали селекторы типа, которые определяют HTML элемент, к которому будет применен стиль. Если вы хорошо знакомы с HTML тегами, то вам будет легко определять в стилях селекторы типа, так как они имеют одноимённые наименования с форматируемыми элементами, например:

p — сообщает браузеру, что необходимо отформатировать все HTML теги <p> (параграф).
table — сообщает браузеру, что необходимо отформатировать все HTML теги <table> (таблица).
li — сообщает браузеру, что необходимо отформатировать все HTML теги <li> (элемент списка).

Давайте рассмотрим пример, в котором с использованием селектора типа мы стилизуем все заголовки второго уровня (<h3>):

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор типа</title>
<style>
h3 {
font-family: Arial; /* задаем тип шрифта Arial */
color: green; /* задаем цвет текста*/
margin-top: 50px; /* добавляем отступ от верхнего края элемента */
}
</style> 
</head>
<body>
	<h3>Обычный заголовок второго уровня</h3>
	<h3>Обычный заголовок второго уровня</h3>
	<h3>Обычный заголовок второго уровня</h3>
</body>
</html>

Результат нашего примера:

Рис. 3б Пример использования селектора типа.

Как вы могли заметить, селектор типа позволяет стилизовать сразу все элементы подобного типа, но что делать если нам необходимо стилизовать какой-то однотипный элемет отлично от других? В этом случае селектор типа нам уже не подойдет и нам придется использовать селектор класса.

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

Рис. 4 Селектор класса в CSS.

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

И так, мы хотим, чтобы один из элементов выглядел не так, как другие. Для этого нам необходимо создать селектор, назначив ему имя, которое нам необходимо придумать самостоятельно:

.test { /* имя класса в таблице стилей задается через точку */
text-align: center; /* горизонтальное выравнивание текста по центру */
font-family: Courier; /* задаем тип шрифта Courier */
color: green; /* задаем цвет текста*/
margin-top: 50px; /* добавляем отступ от верхнего края элемента */
}

После того как мы создали наш класс в таблице стилей, нам необходимо применить его к интересующему нас элементу, или элементам, которые мы хотим стилизовать. Чтобы указать класс для определенного элемента, необходимо добавить к этому элементу глобальный HTML атрибут class со значением нашего класса, но без точки:

<h3 class = "test">Заголовок второго уровня</h3> /* задаем класс для элемента*/

Обратите внимание на следующие правила, которые необходимо соблюдать при работе с селекторами класса:

в отличии от селекторов типа все названия селекторов класса должны начинаться с точки (благодаря ей браузеры находят эти селекторы в таблице стилей). Точка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута class она не ставится, будьте внимательны из-за этого возникает много ошибок).
используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
название после точки всегда должно начинаться с символа (неправильно: .50cent, .-vottakvot).
Учитывайте регистр при наименовании стилевых классов, т.к. они к этому чувствительны и очень ранимы (.vottakvot и .VotTakVot разные классы).

Теперь соберем это в одном примере и посмотрим результат:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title> Селекторы класса</title>
<style>
.test {
text-align: center; /* горизонтальное выравнивание текста по центру */
font-family: Courier; /* задаем тип шрифта Courier */
color: green; /* задаем цвет текста*/
margin-top: 50px; /* добавляем отступ от верхнего края элемента */
}
</style>
</head>
<body>
	<h3>Обычный заголовок второго уровня</h3>
	<h3 class = "test">Заголовок с заданным классом</h3>
</body>
</html>

Результат нашего примера:

Рис. 5 Использование селектора класса.

Селекторы класса очень гибкий инструмент, который позволяет указать конкретный стиль даже к одному слову предложения. Для этого мы поместим это слово внутри элемента <span> и назначим этому элементу определённый класс, который опишем во внутренней таблице стилей:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример выделения одного слова</title>
<style>
.test { 
color: #0F0; /* задаём цвет текста в hex формате */
font-size: 30px; /* задаем размер шрифта*/
}
</style>
</head>
<body>
	<h3>Обычный заголовок <span class = "test">второго</span> уровня</h3>
</body> 
</html>

Результат нашего примера:

Рис. 6 Пример выделения одного слова с использованием селектора класса.

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

a.test { /* выбирает все элементы <a> с классом test */
блок объявлений;
}
p.intro { /* выбирает все элементы <p> с классом intro */
блок объявлений;
}

ID селекторы

Рис. 7 Селектор id в CSS.

Основная задача селектора id заключается в том, чтобы выбрать элемент с определённым идентификатором. Для начала необходимо создать идентификатор, назначив ему имя, которое нам необходимо придумать самостоятельно:

#test { /* имя идентификатора в таблице стилей задается через решетку */
background-color: #00FF00; /*Задаём цвет заднего фона*/
color: white; /*Задаём цвет шрифта белый*/
font-size: 30px; /*Указываем размер шрифта*/
width: 600px; /*Указываем ширину элемента*/
height: 40px; /*Указываем высоту элемента*/
text-align: center; /*Выравниваем текст по центру внутри элемента*/
}

После того как мы создали наш идентификатор в таблице стилей, нам необходимо применить его к интересующему нас элементу, который мы хотим стилизовать. Чтобы указать идентификатор для элемента, необходимо добавить к этому элементу глобальный HTML атрибут id со значением нашего идентификатора, но уже без решетки:

<h3 id = "test">Обычный заголовок второго уровня</h3> <!-- задаем идентификатор для элемента -->

Обратите внимание на следующие правила, которые необходимо соблюдать при работе с id селекторами:

значение идентификатора должно быть уникально на странице, размещение нескольких одноименных идентификаторов на странице считается ошибкой (выборка остановится на первом идентифакторе).
все названия id селекторов должны начинаться с решётки (благодаря ей браузеры находят эти селекторы в таблице стилей). Решетка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута id она не ставится, будьте внимательны из-за этого возникает много ошибок).
используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
название после решётки всегда должно начинаться с символа (неправильно: #50cent, #-vottakvot).
Учитывайте регистр при наименовании id селекторов, т.к. они к этому чувствительны (#vottakvot и #VotTakVot разные идентификаторы).

Теперь соберем это в одном примере и посмотрим результат:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>ID селекторы</title>
<style>
#test {
background-color: #0F0; /* задаём цвет заднего фона */
color: white; /* задаём цвет текста */
font-size: 30px; /* указываем размер шрифта */
height: 100px; /* указываем высоту элемента */
text-align: center; /* горизонтальное выравнивание текста по центру */
}
</style>
</head>
<body>
	<h3 id = "test">Обычный заголовок второго уровня</h3> 
</body>
</html>

Результат нашего примера:

Рис. 7а Пример использования id селектора.

В настоящее время id селекторы в основном применяются на веб страницах с целью динамического управления элементами с использованием языка программирования JavaScript.

Групповые селекторы

В CSS допускается задать единый стиль не только одному селектору, но и группе селекторов. В группу могут входить как селекторы типа, селекторы класса, так и рассмотренные нами id селекторы. При перечислении любых селекторов (даже, которые мы будем рассматривать далее в учебнике) необходимо обязательно разделять их запятой, позднее вы поймете почему.

Например:

<style>
h2, h3,.test,#test { /* выбираем заголовки первого и второго уровня, элементы с классом test и элемент с идентификатором test */
background-color: green;  /* задаем цвет заднего фона */ 
}
.test, #test { /* выбираем элементы с классом test и элемент с идентификатором test */
color: blue; /* задаем цвет текста */ 
}
</style>

Первым групповым селектором мы указываем, что заголовки <h2> и <h3>, элементы с классом test и элемент с идентификатором test получат цвет заднего фона зеленый.

Вторым групповым селектором мы указываем, что кроме заднего фона элементы с классами test и элемент с идентификатором test получат синий цвет текста.

Рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Групповые селекторы</title>
<style>
h2, h3,.test,#test { /* выбираем заголовки первого и второго уровня, элементы с классом test и элемент с идентификатором test */
color: red;  /* задаем цвет текста */ 
}
h4,h5 { /* выбираем заголовки третьего и четвертого уровня */
color: blue; /* задаем цвет текста */ 
}
h2,h3,h4,h5 { /* выбираем заголовки от первого до четвертого уровня */
font-style: italic;  /* задаем стиль шрифта - курсивное начертание */ 
}
</style>
</head>
<body>
	<h2>Заголовок первого уровня</h2>
	<h3>Заголовок второго уровня</h3>
	<p class = "test">Абзац с классом test</p>
	<h4>Заголовок третьего уровня</h4>
	<p id = "test">Абзац с идентификатором test</p>
	<h5>Заголовок четвертого уровня</h5>
	</body>
</html>

В этом примере мы использовали три групповых селектора:

Первым групповым селектором мы указываем, что заголовки <h2> и <h3>, элементы с классом test и элемент с идентификатором test получат цвет текста красный.
Вторым групповым селектором мы указываем, что заголовки <h4> и <h5> получат цвет текста синий.
Третьим групповым селектором мы указываем, что все заголовки (от <h2> до <h5>) будут иметь курсивное начертание шрифта.

Результат нашего примера:

Рис. 7б Пример использования групповых селекторов.

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

Селектор * позволяет выбрать все элементы внутри документа (универсальный селектор).

Давайте рассмотрим пример использования:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Универсальный селектор</title>
<style>
* { /* выбираем все элементы внутри документа */
color: rgb(50,100,150); /* задаем цвет текста в формате rgb */ 
font-style: italic;  /* задаем стиль шрифта - курсивное начертание */ 
}
</style>
</head>
<body>
	<h2>Заголовок первого уровня</h2>
	<h3>Заголовок второго уровня</h3>
	<p>Абзац, который не несет никакой смысловой нагрузки</p>
</body>
</html>

В этом примере с использованием универсального селектора мы указали, что все элементы на странице получат определенный цвет текста и будут иметь курсивное начертание шрифта.

Результат нашего примера:

Рис. 7в Пример использования универсального селектора.

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

.test * { /* выбирает все элементы внутри элемента c назначенным классом test */
объявление; 
} 
#test * { /* выбирает все элементы внутри элемента c назначенным идентификатором test */
объявление; 
} 
div * {  /* выбирает все элементы внутри элемента <div> */
объявление; 
}

Селекторы потомков будут подробно рассмотрены в следующей статье «Селекторы. Часть 2.».

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

Составьте следующую HTML страницу, в которой заголовки имеют шрифт Arial, а абзацы, которые относятся к статье Verdana:

Практическое задание № 2.

Подсказка: при выполнении практических заданий вы можете располагать стилевую информацию как внутри самой веб страницы, так и в отдельном файле. В практических заданиях для определения цвета элементов вы можете использовать графические редакторы — инструмент палитра (пипетка), либо установите плагин для вашего браузера (например, CollorZilla), либо использовать свои цвета, так как копирование цветов не является целью практического занятия.

После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.

Соседние селекторы | htmlbook.ru

Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Рассмотрим несколько примеров отношения элементов.

<p>Lorem ipsum <b>dolor</b> sit amet.</p>

В этом примере тег <b> является дочерним по отношению к тегу <p>, поскольку он находится внутри этого контейнера. Соответственно <p> выступает в качестве родителя <b>.

<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>

Здесь теги <var> и <b> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера <p>, никак не влияет на их отношение.

<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>

Соседними здесь являются теги <b> и <i>, а также <i> и <tt>. При этом <b> и <tt> к соседним элементам не относятся из-за того, что между ними расположен контейнер <i>.

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами. Общий синтаксис следующий.

Селектор 1 + Селектор 2 { Описание правил стиля }

Пробелы вокруг плюса не обязательны, стиль при такой записи применяется к Селектору 2, но только в том случае, если он является соседним для Селектора 1 и следует сразу после него.

В примере 11.1 показана структура взаимодействия тегов между собой.

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Соседние селекторы</title>
  <style>
   B + I {
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>
   <p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing elit.</p>
   <p>Lorem ipsum dolor sit amet, <i>consectetuer</i> adipiscing elit.</p>
 </body>
</html>

Результат примера показан на рис. 11.1.

Рис. 11.1. Выделение текста цветом при помощи соседних селекторов

В данном примере происходит изменение цвета текста для содержимого контейнера <i>, когда он располагается сразу после контейнера <b>. В первом абзаце такая ситуация реализована, поэтому слово «consectetuer» в браузере отображается красным цветом. Во втором абзаце, хотя и присутствует тег <i>, но по соседству никакого тега <b> нет, так что стиль к этому контейнеру не применяется.

Разберем более практичный пример. Часто возникает необходимость в текст статьи включать различные сноски и примечания. Обычно для этой цели создают новый стилевой класс и применяют его к абзацу, таким способом можно легко изменить вид текста. Но мы пойдем другим путём и воспользуемся соседними селекторами. Для выделения замечаний создадим новый класс, назовём его sic, и станем применять его к тегу <h3>. Первый абзац после такого заголовка выделяется цветом фона и отступом (пример 11.2). Вид остальных абзацев останется неизменным.

Пример 11.2. Изменение стиля абзаца

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изменение стиля абзаца</title>
  <style>
   h3.sic {
    font-size: 140%; /* Размер шрифта */
    color: maroon; /* Цвет текста */
    font-weight: normal; /* Нормальное начертание текста */
    margin-left: 30px; /* Отступ слева */
    margin-bottom: 0px; /* Отступ снизу */
   }
   h3.sic + P {
   background: #ddd; /* Цвет фона */
   margin-left: 30px; /* Отступ слева */
   margin-top: 0.5em; /* Отступ сверху */
   padding: 7px; /* Поля вокруг текста */
  }
  </style>
 </head>
 <body>
  <h2>Методы ловли льва в пустыне</h2>
  <h3>Метод последовательного перебора</h3>
  <p>Пусть лев имеет габаритные размеры L x W x H, где L - длина льва 
  от кончика носа до кисточки хвоста, W - ширина льва, а H - его высота. 
  После чего пустыню разбиваем на ряд элементарных прямоугольников, размер 
  которых совпадает с шириной и длиной льва. Учитывая, что лев может находиться 
  не строго на заданном участке, а одновременно на двух из них, клетку для 
  ловли следует делать повышенной площади, а именно 2L x 2W. Благодаря 
  этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина 
  льва или, что хуже, только его хвост.</p>
  <h3>Важное замечание</h3>
  <p>Для упрощения расчетов хвост в качестве погрешности измерения можно 
  отбросить и не принимать во внимание.</p>
  <p>Далее последовательно накрываем каждый из размеченных прямоугольников 
  пустыни клеткой и проверяем, пойман лев или нет. Как только лев окажется в 
  клетке, процедура поимки считается завершенной.</p>
 </body>
</html>

Результат данного примера показан на рис. 11.2.

Рис. 11.2. Изменение вида абзаца за счёт использования соседних селекторов

В данном примере текст отформатирован с применением абзацев (тег <p>), но запись h3.sic + P устанавливает стиль только для первого абзаца идущего после тега <h3>, у которого добавлен класс с именем sic.

Соседние селекторы удобно использовать для тех тегов, к которым автоматически добавляются отступы, чтобы самостоятельно регулировать величину отбивки. Например, если подряд идут теги <h2> и <h3>, то расстояние между ними легко регулировать как раз с помощью соседних селекторов. Аналогично дело обстоит и для идущих подряд тегов <h3> и <p>, а также в других подобных случаях. В примере 11.3 таким манером изменяется величина отступов между указанными тегами.

Пример 11.3. Отступы между заголовками и текстом

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Соседние селекторы</title>
  <style>
   h2 + h3 {
    margin-top: -10px; /* Смещаем заголовок 2 вверх */
   }
   h3 + P {
    margin-top: -1em; /* Смещаем первый абзац вверх к заголовку */
   }
  </style>
 </head>
 <body>
  <h2>Заголовок 1</h2>
  <h3>Заголовок 2</h3>
  <p>Абзац!</p>
 </body>
</html>

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

Вопросы для проверки

1. Какие теги в данном коде являются соседними?

<p><b>Формула серной кислоты:</b><i>H<sub><small>2</small></sub>SO<sub><small>4</small></sub></i></p>

<P> и <I>
<B> и <I>
<I> и <SUB>
<SUB> и <SMALL>
<I> и <SMALL>

2. Имеется следующий код HTML:

<p><b>Великая теорема Ферма</b></p>
<p><i>X <sup><small>n</small></sup> + Y <sup><small>n</small></sup>
= Z <sup><small>n</small></sup></i></p>
<p>где n — целое число > 2</p>

Какой текст выделится красным цветом с помощью стиля SUP + SUP { color: red; } ?

«X»
«Y»
«Z»
Вторая «n»
Вторая и третья «n».

Ответы

1. <B> и <I>

2. Вторая и третья «n».

Селекторы CSS – точечное применение свойств CSS к элементам страницы (тегам)

Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!

22.04.2013

Здравствуйте дорогие подписчики и не менее дорогие гости Site on! Надеюсь, вам были интересны предыдущие статьи раздела HTML + CSS, потому как сегодня скучать точно не придётся, ведь мы рассмотрим такое понятие как селекторы CSS и как с их помощью мы можем сократить нашу разметку HTML, сделав её чище.

Селектор CSS – это тот элемент, к которому мы собираемся применять CSS свойства. Слово «селектор» говорит само за себя, оно обозначает выбор.

p {color: red}
div span {background: green}
ul li {list-style: none}

Селекторы class и id

В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:

<div>текст в первом диве</div>
<div>текст во втором диве</div>
<div>текст в третьем диве</div>

На что стоит обратить внимание:

Классы и идентификаторы можно присваивать любым (всем) тегам.
Каждый id уникален и не может повторяться в пределах одной страницы, в отличие от классов!
Один и тот же класс может быть присвоен любым тегам и может повторяться любое количество раз на странице.
Если мы хотим задать конкретному тегу несколько классов, мы просто задаём их через пробел.
Имена классов и идентификаторов могут совпадать, при этом кроме имени, ничего общего между ними не будет.

Как обратиться к классу или id в файле стилей (CSS)?

Смотрим пример:

#first {color: red;} /* обращаемся к id с именем first */
.second {color: blue;} /* обращаемся к классу с именем second */
#first .second {color: orange;} /* обращаемся к классу с именем second, ТОЛЬКО если он находится ВНУТРИ тега с идентификатором first */
.first .third {color: grey;} /* обращаемся к классу с именем third, ТОЛЬКО если он находится ВНУТРИ тега с классом first */

В нашем случае последние две инструкции не сработают, так как у нас нет классов, вложенных внутрь тегов с заданными атрибутами. Как вы могли заметить, чтобы обозначить, что мы обращаемся именно к id, нужно перед его именем без пробелов поставить знак решётки (#), если мы обращаемся к классу, то перед именем класса должны поставить точку (.).

Использование классов и идентификаторов очень удобно, но оно увеличивает нашу HTML разметку, в идеале (которого никогда нет) мы вовсе не должны их использовать, вместо них мы будем использовать комбинации и группировки селекторов, о них и будет вся остальная часть статьи, но! Но это совсем не означает, что вы должны полностью отказаться от использования классов и идентификаторов, просто вы должны иметь ввиду, что очень часто вместо создания нового class или id можно обойтись приёмами, описанными ниже и они также могут быть вполне удобны.

В чём различие class и id?

Кроме приведённых выше различий, стоит ещё отметить, что у свойств заданных id приоритет выше, чем у свойств, заданных классу. То есть, если мы напишем:

 <style>
#first {color: red;}
.blue {color: blue;}
</style>
<div>текст в диве</div>

То цвет текста станет красным, несмотря на то, что класс находится ниже по коду и если бы у них был равный приоритет текст стал бы синим.

По синтаксису: в случаи с классом мы можем выбрать, у какого именно тега должен находиться данный класс, для этого после имени тега БЕЗ пробела мы должны обратиться к классу. Пример:

.myclass {свойства} /* применятся ко всем тегам, которые содержат класс myclass */
div.myclass {свойства} /* применятся только к тегам div, которые содержат класс myclass */

Для id это тоже будет работать, но такая запись лишена всякого смысла, так как id не может повторяться на странице, а значит достаточно просто объявлять id, без тега к которому оно относится:

<style>
#super {свойства} /* правильно */
div#super {свойства} /* Неправильно, но работать будет */
</style>
<div>текст</div>

Вроде бы осталось только одно неоговорённое отличие, и оно касается темы, которую в ближайшем будущем я не планировал затрагивать на этом блоге – Javascript. Но всё же обязан доложить вам о нём: если вы хотите обратиться к элементу с помощью Javascript, то для этой цели очень удобным будет наличие id у этого элемента. Чтобы обратиться к элементу по его классу в Javascript нет такой встроенной возможности, вам придётся использовать вспомогательные функции + это не всегда кроссбраузерно.

Итог: id и class используем, но в меру, при этом всегда спрашивая себя, а можно ли здесь обойтись без них и насколько это целесообразно.

Родственный селектор

Идём дальше. Из статьи о наследовании в CSS вы уже знаете о двух самых простых видах селекторов, это селектор по тегу (элементу) и по потомку. Давайте освежим вашу память:

 div p {color: green;} /* Селектор по потомку */
p {color: red;} /* селектор по тегу */

Но как я уже писал в предыдущей статье, в первом случае CSS свойства применятся ко всем тегам p вложенным на ЛЮБУЮ глубину тега div. А что если мы хотим применить свойства только к прямым наследникам, то есть к первому уровню вложенности:

<div>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <span>
      <p>Третий уровень</p>
    </span>
  </span>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <p>Второй уровень</p>
  </span>
  <p>Прямой наследник (первый уровень)</p>
</div>

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

div>p {color: blue;} /* только первый уровень вложенности */
div p {color: blue;} /* абсолютно все параграфы внутри div */

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

С этим разобрались, у нас на вооружении уже 3 вида селекторов, теперь хочу вам рассказать о весьма необычном селекторе, который выделяется среди всех остальных – это так называемый универсальный селектор, который обозначается звёздочкой (*):

* {margin: 0; padding: 0;}

Так у меня начинается каждый новый проект, советую вам делать также. Универсальный селектор распространяется на все элементы страницы (теги), но имеет нулевой приоритет (ниже только отсутствие приоритета вовсе). Его обычно используют, чтобы перебить CSS свойства, которые браузеры устанавливают по умолчанию для некоторых тегов. Представьте себе, и такое имеет место быть! Достаточно многим тегам браузеры по умолчанию устанавливают свои свойства, например, тегу гиперссылки <a> синий цвет текста и подчёркивание, тегу body они задают поля (padding) и тд. Нам это запоминать, знать и использовать совсем не к чему, поэтому самые банальные свойства мы сразу же убираем с помощью универсального селектора, однако я бы не советовал дописывать в него что-то ещё (или дописывать, но аккуратно), несмотря на наименьший (нулевой) приоритет универсального селектора, он в некоторых случаях всё же может перебить вам другие свойства, так что имейте это в виду.

Кстати говоря, при работе с селекторами, как и при любой работе связанной с вёрсткой макета очень удобно использовать просмотр элементов страницы. Если вы ещё не в курсе таких вещей как Opera Dragonfly, Firebug и веб-инспекторы в целом, то вам без преувеличений срочно нужно прочесть статью по ссылке выше! А кто уже использовал подобные вещи, прошу дальше за мной.

Псевдо-классы

В отличие от классов, псевдо-классы не нужно указывать в HTML разметке, они сами вычисляются браузером. У нас есть 4 статических псевдо-класса и 3 динамических псевдо-класса, без учёта CSS 3, о нём ближе к концу. К статическим относятся ( :first-child, :link, :visited, : lang() ):

<style>
p:first-child {color: green;} /* сработает, если p является первым ребёнком своего родителя */
</style>
<div>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <span>
      <p>Третий уровень</p>
    </span>
  </span>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <p>Второй уровень</p>
  </span>
  <p>Прямой наследник (первый уровень)</p>
</div>

Результат:

Естественно можно комбинировать селекторы как захотим, например:

div>span p:first-child {color: green;} /*сработает, если p является первым ребёнком своего родителя и находится внутри тега span, который является прямым потомком тега div */

Название представленного выше псевдо-класса говорит само за себя first-child — первый ребёнок.

Следующие два статических псевдо-класса применяются только к тегу гиперссылки (:link, :visited), они применяют CSS свойства в зависимости от того, посещалась данная ссылка конкретным пользователем или нет:

a:link {color: blue;} /* у не посещённых ссылок задаём синий цвет, и по умолчанию они подчёркнуты */
a:visited {color: green; text-decoration: none;} /* у посещённых ссылок текст будет зелёным, убираем подчёркивание */

Псевдо-класс :lang() используется для задания разного стиля оформления в зависимости от языка. В скобочках указывается язык, к которому нужно применить оформление. Это можно использовать, например, для задания разных стилей кавычек в цитатах:

q:lang(de) {quotes: "\201E" "\201C";} /* кавычки для немецкого языка */
q:lang(en) {quotes: "\201C" "\201D";} /* кавычки для английского языка */
q:lang(ru) {quotes: "\00AB" "\00BB";} /* кавычки для русского языка */

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

Динамические псевдо-классы

Динамические псевдо-классы – это :active, :hover, :focus. Динамические псевдо-классы срабатывают по определённому действию на странице, они работают для всех тегов, а не только для ссылок как многие думают и даже утверждают в своих блогах! Рассмотрим их применение:

p:active {background: red;} /* стиль, который применится к тегу по нажатию на него (клику мышью) */
input:focus {width: 400px;} /* стиль, который применится к элементу, на котором в данный момент фокус (работает, к примеру, для текстовых полей ввода: textarea, input). В данном случае по взятию в фокус, ширина input станет равна 400 пикселей, удобно использовать для красивого эффекта удлинения поля по клику. */
div:hover {background: green;} /* срабатывает по наведению курсора на элемент, в основном применяется для создания красивого эффекта при наведении на ссылки. */

Примените данные стили к нашему примеру выше, и вы сами всё увидите.

Смежные селекторы

Смежные селекторы – это ближайший сосед ниже по коду, не ребёнок! Очень удобный селектор:

<style>
div + p {background: green; color: white;} /* Применить свойства к тегу p, если сразу после закрывающегося тега div открывается тег p */
p + span {background: orange;} /* не сработает, так как у нас нет открывающегося тега span, сразу после закрывающегося тега p */
</style>
<div>
  <p>текст в параграфе первого div</p>
</div>
<p>текст в параграфе ВНЕ div</p>
<div>
  <p>текст в параграфе второго div</p>
</div>
<span>текст в спане</span>
<p>снова параграф вне div</p>

Результат:

Обобщённые смежные селекторы

Обобщённые смежные селекторы действуют точно также как и обычные смежные селекторы, за исключением того, что свойства применяются не только к первому соседу ниже, а ко всем заданным соседям ниже:

<style>
div~p{color: green;}
</style>

<div>текст в диве</div>

<p>параграф</p>
<p>параграф</p>
<p>параграф</p>

<span>текст в спане</span>

<p>параграф</p>
<p>параграф</p>

<div>
<p>параграф в диве</p>
<p>параграф в диве</p>
</div>

<span>текст в спане</span>
<p>параграф</p>

Результат:

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

Селекторы атрибутов позволяют нам обратиться к тегам, имеющим необходимый нам атрибут или даже конкретное его значение:

p[align] {свойства} /* применить ко всем тегам p, у которых есть атрибут align */

p[align="center"] {свойства} /* где значение атрибута align равно center */

p[align^="center"] {свойства} /* где значение атрибута align начинается на center */

p[align*="center"] {свойства} /* где значение атрибута align содержит center */

p[class~="site"] {свойства} /* где site может находиться среди других слов, отделенных пробелами (<p></p>) */

p[class|="site"] {свойства} /* где значение атрибута class состоит только из слова site или начинается им, после чего ставится дефис и пишется остальная часть значения (<p></p> или <p></p>) */

p[class$="site"] {свойства} /* где значение атрибута align заканчивается на site */

CSS 3 псевдо-классы

Вы уже ознакомились со всеми основными селекторами и вам на первых парах этого должно хватить с горкой. Однако в CSS 3 появилось множество новых псевдо-классов, теперь мы можем брать не только первого ребёнка, но и любого другого по счёту, можем идти от обратного, брать не первого, а последнего ребёнка и так далее и тому подобное. Всё это очень удобно и практично, разве что у вас могут возникнуть проблемы со старыми версиями IE. Давайте соберём все силы в кулак и пробежимся по всем оставшимся селекторам, чтобы потом уже вы могли иметь их ввиду при вёрстке собственного макета.

:last-child – аналог :first-child, только берёт не первого, а последнего ребёнка.

:only-child – сработает, если элемент (тег) является единственным ребёнком.

:only-of-type — сработает, если элемент (тег) является единственным ребёнком своего типа.

:nth-child() – обращается к потомкам по их порядковым номерам, можно обращаться ко всем чётным или нечётным (even или odd) числам. Например:

<style>
div p:nth-child(5) {background-color: green;} /* Обращаемся к 5 по счёту ребёнку, если он является тегом p. */

div p:nth-child(2n) {background-color: yellow;} /* Обращаемся к каждому второму ребёнку, если он является тегом p. */

div p:nth-child(2n+6) {background-color: red;} /* Обращаемся к каждому второму ребёнку начиная с шестого, если он является тегом p. */
</style>

<div>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>

<span>текст в спане</span>

<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
</div>

Результат:

:nth-last-child – работает также как и предыдущий, но отчёт начинается с конца.

:first-of-type – первый ребёнок своего типа в рамках прямого родителя.

:last-of-type – последний ребёнок своего типа в рамках прямого родителя.

:empty – сработает для тех тегов, внутри которых нет ни одного символа (без текста).

:not() – делает исключение для заданных элементов. Пример:

<style>
p:not(.roll) {color: red;} /* для всех параграфов на странице делаем красный цвет текста, за исключением параграфов с классом roll */
</style>

<p>параграф с классом roll</p>

<p>параграф</p>
<p>параграф</p>

<p>параграф с классом roll</p>

Результат:

Управление полями, формами, переключателями и флажками в CSS

:enabled — применяется к доступным элементам интерфейса как формы, кнопки, переключатели и тд. По умолчанию все элементы интерфейса являются доступными.

:disabled — применяется к заблокированным элементам интерфейса как кнопки, формы и так далее. Элементы интерфейса являются заблокированными, если к ним в HTML добавить атрибут disabled или в XHTML disabled=”disabled”.

:checked – применяется к элементам интерфейса типа переключатели (radio) и флажки (checkbox), когда они находятся во включённом положении.

Псевдо-элементы

Псевдо-элементы, аналогично псевдо-классам вычисляются браузером автоматически, нам об этом заботиться не нужно. Чтобы не путать псевдо-элементы с псевдо-классами в спецификации CSS 3 было решено использовать двойное двоеточие, вместо одинарного, как было в CSS 2. Поэтому в Интернете вы можете встретить псевдо-элементы как с одинарным двоеточием так и с двойным – и тот и тот вариант верен. Однако для лучшей совместимости с IE рекомендуют использовать одинарное двоеточие.

:first-line – первая строка внутри блочного или табличного элемента.

:first-letter – первая буква внутри блочного элемента.

:before и :after – используются чтобы с помощью CSS вставить содержимое до или после элемента, к которому они относятся, лично я ими не пользовался, поэтому сильно расписывать не буду. А как часто вы используете данные псевдо-элементы в своих проектах? Можете поделиться своим опытом в комментариях к данной статье.

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

Преимущества оптимизации HTML за счёт CSS

Суть всего написанного выше отчасти заключается в том, чтобы отказаться от повсеместного использования атрибутов class и id в HTML, тем самым возложив всё на плечи могучих таблиц стилей.

Внешние файлы стилей, как и внешние файлы Javascript отлично кэшируются, а это значит, что зайдя первый раз на любую страницу вашего сайта, браузер пользователя запоминает эти файлы и более их не скачивает, в отличие от самой страницы сайта, то есть вашей HTML разметки, картинок и текста, которую браузер загружает снова и снова. Тоже самое касается и поисковых систем, им вообще нет дела до ваших внешних файлов, но вот до объёма и содержания вашей HTML разметки им дело есть. Поисковым системам приходится сканировать всю структуру страницы и в ваших же интересах помочь им в этом, сосредоточить их усилия на контенте, а не на громоздкой стене разметки состоящей из кучи классов и идентификаторов или того хуже – Javascript обработчиков событий и CSS стилей прямо в атрибутах тегов (и такое до сих пор бывает).

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

Подытожим: благодаря оптимизации и сокращению HTML мы имеем совсем небольшой выигрыш в скорости загрузки сайта и в SEO (поисковой оптимизации), а также более чистый код.

Пожалуйста, оцените эту статью

Средняя оценка: 4.87 из 5 (проголосовало: 297)

Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

Вы можете помочь развитию проекта, сделав всего 1 клик:

Спасибо!

CSS-селекторы — Веб-технологии для разработчиков

Селектор определяет, к какому элементу применять то или иное CSS-правило.

Обратите внимание — не существует селекторов, которые бы позволили выбрать родителя (содержащий контейнер) или соседа родителя или потомков соседа родителя.

Базовые селекторы

Универсальный селектор: Выбирает все элементы. По желанию, он может быть ограничен определенным пространством имен или относиться ко всему пространству имён.
Синтаксис: * ns|* *|*
Пример: * будет соответствовать всем элементам на странице.

Селекторы по типу элемента: Этот базовый селектор выбирает тип элементов, к которым будет применяться правило.
Синтаксис: элемент
Пример: селектор input выберет все элементы <input>.
Селекторы по классу: Этот базовый селектор выбирает элементы, основываясь на значении их атрибута class.
Синтаксис: .имяКласса
Пример: селектор .index выберет все элементы с соответствующим классом (который был определен в атрибуте class="index").
Селекторы по идентификатору: Этот базовый селектор выбирает элементы, основываясь на значении их id атрибута. Не забывайте, что идентификатор должен быть уникальным, т. е. использоваться только для одного элемента в HTML-документе.
Синтаксис: #имяИдентификатора
Пример: селектор #toc выберет элемент с идентификатором toc (который был определен в атрибуте id="toc").
Селекторы по атрибуту: Этот селектор выбирает все элементы, имеющие данный атрибут или атрибут с определённым значением.
Синтаксис: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Пример: селектор [autoplay] выберет все элементы, у которых есть атрибут autoplay (независимо от его значения).
Ещё пример: a[href$=».jpg»] выберет все ссылки, у которых адрес заканчивается на «.jpg».
Ещё пример: a[href^=»https»] выберет все ссылки, у которых адрес начинается на «https».

Комбинаторы

Комбинатор запятая: Комбинатор , это способ группировки, он выбирает все совпадающие узлы.
Синтаксис: A, B
Пример: div, span выберет оба элемента — и <div> и <span>.
Комбинатор потомков: Комбинатор ' ' (пробел) выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).
Синтаксис: A B
Пример: селектор div span выберет все элементы <span>, которые находятся внутри элемента <div>.
Дочерние селекторы: Комбинатор '>' в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу.
Синтаксис: A > B
Пример: селектор ul > li выберет только дочерние элементы <li>, которые находятся внутри, на первом уровне вложенности по отношению к элементу <ul>.
Комбинатор всех соседних элементов: Комбинатор '~' выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем.
Синтаксис: A ~ B
Пример: p ~ span выберет все элементы <span>, которые находятся после элемента <p> внутри одного родителя.
Комбинатор следующего соседнего элемента: Комбинатор '+' выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.
Синтаксис: A + B
Пример: селектор ul + li выберет любой <li> элемент, который находится непосредственно после элемента <ul>.

Псевдо

Псевдоклассы: Знак : позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.
Пример: a:visited соответствует всем элементам <a> которые имеют статус «посещённые».
Ещё пример: div:hover соответствует элементу, над которым проходит указатель мыши.
Ещё пример: input:focus соответствует полю ввода, которое получило фокус.
Псевдоэлементы: Знак :: позволяет выбрать вещи, которых нет в HTML.
Пример: p::first-line соответствует первой линии абзаца <p>.

Версии CSS

Спецификация	Статус	Комментарии
Selectors Level 4	Рабочий черновик	Добавление комбинатора колонок `\|\|` , селекторов структуры сеточной разметки (CSS grid selector), логических комбинаторов, местоположения, временных, состояния ресурсов, лингвистических и UI псевдоклассов, модификаторов для ASCII регистрозависимых и регистронезависимых атрибутов со значениями и без них.
Selectors Level 3	Рекомендация	Добавлен комбинатор `~` и древовидные структурные псевдоклассы. Сделаны псевдоэлементы, использующие префик `::` двойное двоеточие. Селекторы дополнительных атрибутов.
CSS Level 2 (Revision 1)	Рекомендация	Добавлен комбинатор потомков `>` и комбинатор следующего соседа `+` . Добавлен *универсальный () комбинатор и селектор атрибутов.**
CSS Level 1	Рекомендация	Первоначальное определение.

См. также

CSS специфичность

Учебник CSS 3. Статья «Селекторы. Часть 4»

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

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

Псевдокласс :first-of-type

Псевдокласс :first-of-type применяет заданный стиль к элементу, который является первым дочерним элементом, определенного типа внутри родительского элемента.

Отличие псевдокласса :first-of-type от :first-child заключается в том, что он выбирает первый дочерний элемент определенного типа, а не первый дочерний элемент этого типа. Псевдокласс :first-child мы с Вами рассматривали в предыдущей статье учебника «Селекторы. Часть 3».

Рассмотрим пример, в котором главное содержимое страницы заключено в блоки <div>, которые имеют стилевой класс .test, и Вам необходимо придать определённый стиль первым абзацам (элементы <p>) в этих блоках:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :first-of-type</title>
<style>
.test p:first-of-type { /* используем селектор потомков с псевдоклассом :first-of-type */
background-color: orange; /* устанавливаем цвет заднего фона */
font-weight: bold; /* устанавливаем жирное начертание текста */
}
</style>
</head>
	<body>
		<div class = "test">
			<h3>Заголовок второго уровня</h3>
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
		</div>
		<div class = "test"> 
			<h3>Заголовок второго уровня</h3>
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
		</div>
	</body>
</html>

В этом примере с использованием псевдокласса :first-of-type мы стилизовали первые абзацы внутри каждого блока.

Результат нашего примера:

Рис. 25а Пример использования псевдокласса :first-of-type.

Псевдокласс :last-of-type

Псевдокласс :last-of-type применяет заданный стиль к элементу, который является последним дочерним элементом определенного типа внутри родительского элемента.

Псевдокласс :last-of-type работает как и :last-child, но применяется к дочернему элементу определенного типа, а не к элементу с любым типом. Псевдокласс :last-child мы с Вами рассматривали в предыдущей статье учебника «Селекторы. Часть 3».

Рассмотрим пример, в котором главное содержимое страницы заключено в блоки <div>, которые имеют стилевой класс .test, и Вам необходимо придать определённый стиль последним абзацам (элементы <p>) в этих блоках:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :last-of-type</title>
<style>
.test p:last-of-type { /* используем селектор потомков с псевдоклассом :last-of-type */
background-color: orange; /* устанавливаем цвет заднего фона */
font-weight: bold; /* устанавливаем жирное начертание текста */
}
</style>
</head>
	<body>
		<div class = "test">
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
			<span>Текст, внутри элемента span</span>
		</div>
		<hr>
		<div class = "test"> 
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
			<span>Текст, внутри элемента span</span>
		</div>
	</body>
</html>

В этом примере с использованием псевдокласса :last-of-type мы стилизовали последние абзацы внутри каждого блока.

Результат нашего примера:

Рис. 25б Пример использования псевдокласса :last-of-type.

Псевдокласс :nth-of-type

Псевдокласс :nth-of-type выбирает каждый указанный элемент определенного типа, который является дочерним элементом своего родительского элемента.

Псевдокласс :nth-of-type работает, как и :nth-child, но применяется к чередующимся дочерним элементам определенного типа, а не к элементу с любым типом. Псевдокласс :nth-сhild мы с Вами рассматривали в предыдущей статье учебника «Селекторы. Часть 3».

Псевдокласс имеет следующий синтаксис:

:nth-of-type(номер | ключевое слово | формула) {
блок объявлений;
}

В качестве значения псевдокласса :nth-of-type может выступать не только порядковый номер дочернего элемента определенного типа, но и ключевые слова, которые могут определять целую группу элементов. В качестве ключевого слова можно использовать два значения:

even (четные элементы)
odd (нечетные элементы)

Кроме того псевдокласс :nth-of-type, как и :nth-child в качестве значения может использовать простую математическую формулу:

p:nth-of-type(4n+2)  {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}

Этот селектор означает, что каждый четвёртый элемент <p>, начиная со второго внутри родительского элемента будет стилизована:

4n – каждый четвертый элемент определенного типа.
2 – с какого элемента начинать.

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

p:nth-of-type(4n-1)  {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}

Этот селектор означает, что каждый четвёртый элемент <p>, начиная с третьего (-1 элемента нет по объективным причинам, поэтому происходит сдвиг влево), будет стилизован:

4n – каждый четвертый элемент определенного типа.
-1 – с какого элемента начинать.

Рассмотрим пример, в котором главное содержимое страницы заключено в блоки <div>, которые имеют стилевой класс .test, и Вам необходимо придать определённый стиль вторым абзацам (элементы <p>) в этих блоках:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :nth-of-type</title>
<style>
.test p:nth-of-type(2) { /* используем селектор потомков с псевдоклассом :nth-of-type */
background-color: orange; /* устанавливаем цвет заднего фона */
font-weight: bold; /* устанавливаем жирное начертание текста */
}
</style>
</head>
	<body>
		<div class = "test">
			<h3>Заголовок второго уровня</h3>
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
		</div>
		<div class = "test"> 
			<h3>Заголовок второго уровня</h3>
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
		</div>
	</body>
</html>

В этом примере с использованием псевдокласса :nth-of-type мы стилизовали первые абзацы внутри каждого блока.

Результат нашего примера:

Рис. 25в Пример использования псевдокласса :nth-of-type.

Отличие :nth-child от :nth-of-type()

Давайте разберем еще очень важный пример, чтобы понять в чем заключается отличие псевдокласса :nth-child от псевдокласса :nth-of-type, который выбирает каждый указанный элемент определенного типа, при этом он является дочерним элементом своего родительского элемента.

Допустим, у нас есть статья, в которой два параграфа и мы хотим стилизовать абзац №2 отлично от первого, установив задний фон цвета khaki:

<article>
	<p>Первый параграф </p>
	<p>Второй параграф</p> 
</article>

Допустим мы стоим перед выбором какой селектор использовать: p:nth-child(2) или p:nth-of-type(2). Попробуем проверить как работают оба варианта:

p:nth-child(2)  {
background-color: khaki; /* устанавливаем цвет заднего фона */
}
p:nth-of-type(2) {
background-color: khaki; /* устанавливаем цвет заднего фона */
}

Что не удивительно оба селектора работают для данной задачи. Но в чём разница?

Давайте рассмотрим на примере, ах да, мы добавим к нашей статье заголовок второго уровня (тег <h3>), про него мы совсем забыли:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Отличие :nth-child() от :nth-of-type()</title>
<style>
p:nth-of-type(2) {
background-color:khaki; /* устанавливаем цвет заднего фона */
}
p:nth-child(2) {
background-color:khaki; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<article>
			<h3>Заголовок второго уровня</h3>
			<p>Первый параграф</p>
			<p>Второй параграф</p>
		</article>
	</body>
</html>

Сразу посмотрите на результат использования обоих селекторов в одном примере, затем будем разбираться почему так происходит:

Рис. 25г Пример использования псевдоклассов :nth-of-type() и :nth-child().

В данном примере селектор p:nth-child(2) выбирает второй дочерний элемент своего родителя, а с добавлением заголовка второго уровня (тег <h3>) порядок элементов в родительком элементе изменился и это у нас стал первый абзац, а не второй, что для нас не приемлимо. Для нашей задачи оптимальным выбором является использование селектора с псевдоклассом :nth-of-type по той причине, что он выбирает второй элемент того же типа, а у нас количество элементов этого типа не изменилось.

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

Углубляясь в тонкости дизайна, перед Вами может встать задача, требующая выбрать (стилизовть) элемент, который следует сразу же за определенным элементом. Как правило, такие элементы называют смежные и чтобы их выбрать, необходимо воспользоваться селектором смежных элементов, который предназначен как раз для этих целей.

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

Перед нами стоит задача стилизовать все абзацы (элементы <p>), которые следуют сразу за элементом <h3> (они выделены оранжевым цветом на изображении):

Рис. 26 Выбор смежных элементов в документе.

Обратите внимание, что элементы считаются сестринскими если они расположены на одном уровне в пределах одного родителя, мы с Вами ранее уже рассматривали это в статье «Селекторы. Часть 2». Какие сестринские элементы не отмечены на изображении?.

Что касается смежных элементов, то для того, чтобы нам выбрать все элементы <p>, которые следуют сразу за <h3>, то нам необходимо создать следующий селектор:

h3+p {
блок объявлений;
}

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор смежных элементов</title>
<style>
h3+p {
background-color: lightblue; /* задаём цвет заднего фона */
color: red; /* задаём цвет текста */
}
</style>
</head>
	<body>
		<div>
			<h3>Заголовок внутри div</h3>
			<p>Абзац один</p>
			<p>Абзац два</p>
		</div>
		<h3>Заголовок внутри body</h3>
		<p>Абзац один</p>
	</body>
</html>

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

Результат нашего примера:

Рис. 26а Пример использования селектора смежных элементов.

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

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

Рис. 27 Выбор смежных и сестринских элементов в документе.

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

h3~p {
блок объявлений;
}

div~* {
блок объявлений;
}

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор смежных элементов</title>
<style>
h3~p { /* выбираем все элементы <p> смежные и сестринские для <h3> */
background-color: lightblue; /* задаём цвет заднего фона */
color: red; /* задаём цвет текста */
}
div~* { /* выбираем все сестринские элементы <div> */
font-style: italic; /* устанавливаем курсивное начертание шрифта */
border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */
}
</style>
</head>
	<body>
		<div>
			<h3>Заголовок внутри div</h3>
			<p>Абзац один</p>
			<p>Абзац два</p>
		</div>
		<h3>Заголовок внутри body</h3>
		<p>Абзац один</p>
	</body>
</html>

Результат нашего примера:

Рис. 27а Пример использования селектора следующих элементов.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практические задания:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла) в любую папку на вашем жестком диске:

Составьте следующие HTML страницы:
1. С использованием селекторов типов дочерних элементов стилизуйте все абзацы, в соответствии с изображением:
  Практическое задание № 8.
2. С использованием селекторов смежных элементов и селекторов следующих элементов стилизуйте все элементы, в соответствии с изображением:
  Практическое задание № 9.

После того как вы выполните упражнения проинспектируйте коды страниц, открыв примеры в отдельном окне, чтобы убедиться, что вы все выполнили правильно.

Учебник CSS 3. Статья «Селекторы. Часть 3»

В этой объемной статье учебника мы с Вами продолжим изучение селекторов, рассмотрим с Вами примеры работы селекторов, предназначенных для выбора элементов с определёнными HTML атрибутами, познакомимся с псевдоклассом отрицания и рассмотрим некоторые новые для Вас, и очень полезные псевдоклассы, которые позволят нам выбирать элементы в зависимости от их расположения в документе.

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

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

Давайте рассмотрим следующий селектор и попробуем разобраться, что он значит:


img[title] { /* выбирает все элементы <img> с атрибутом title */
блок объявлений;
}

img в данной случае аналогичен селектору типа, т.е выбирает все элементы <img>, а в квадратных скобках мы задаем имя атрибута этого элемента. То есть происходит выборка всех элементов данного типа с определённым атрибутом, в нашем примере это глобальный атрибут title, определяющий текстовую подсказку о содержимом элемента.

Вы можете использовать селекторы атрибутов не только напрямую к элементам, но и использовать их с прочими селекторами, например с селекторами класса или id селекторами:


.main[title] { /* выбирает все элементы с классом main и атрибутом title */
блок объявлений;
} 
#main[title] { /* выбирает элемент с идентификатором main и атрибутом title */
блок объявлений;
}

В данном случае первый селектор выбирает все элементы, которые имеют значение глобального атрибута class равным main и глобальным атрибутом title. Второй селектор выбирает элемент, который имеют значение глобального атрибута id равным main и глобальным атрибутом title.

Рассмотрим следующий пример в котором, мы выберем все элементы <img>, у которых присутствует атрибут alt, который задает альтернативный текст для изображения.


<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример использования селектора атрибутов</title>
<style>
img { /* выбираем все изображения */
width: 100px;  /* задаем ширину элемента */
height: 100px;  /* задаем высоту элемента */
}
img[alt] { /* выбираем все изображения с атрибутом alt */
border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */
} 
</style>
</head>
	<body>
		<img src = "nich.jpg" alt = "nich">
		<img src = "nich.jpg"> <!-- элемент не будет стилизован (отсутствует атрибут alt) -->
		<img src = "nich.jpg" alt = "nich">
	</body>
</html>

Результат нашего примера:

Рис. 17г Пример использования селектора атрибутов.

С помощью селектора атрибутов мы можем выбрать элементы не только с определённым атрибутом, но и указать с каким значением должен быть этот атрибут.

Давайте рассмотрим пример в котором нам необходимо по особенному стилизовать поле, предназначенное для ввода пароля.


<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор атрибута с указанным значением</title>
<style>
input[type=password] { /* выбираем все элементы <input>, атрибут type которых имеет значение password */
border: 1px dotted red; /* устанавливаем точечную границу размером 1 пиксель красного цвета */
} 
input[type=password]:focus { /* выбираем элемент <input>, атрибут type которого имеет значение password и который находится в фокусе */
border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */
} 
</style>
</head>
	<body>
		<form>
			Login: <input type = "text" name = "login" placeholder = "Введите ваш логин"><br><br>
			Password: <input type = "password" name = "password" placeholder = "Введите ваш пароль"><br><br>
			<input type = "submit" name = "submit" value = "Далее">
		</form>
	</body>
</html>

В этом примере мы использовали два селектора атрибутов с указанным значением, которые позволили нам выбрать поле, предназаченное для ввода пароля, а во втором случае с использованием псевдокласса :focus мы создали стили для того состояния, когда это поле находится в фокусе (пользователь кликнул на него, или выбрал с помощью клавиатуры). Псевдокласс :focus мы уже с Вами рассматривали в конце предыдущей статьи учебника «Псевдоклассы и псевдоэлементы».

Результат нашего примера:

Рис. 17д Пример использования селектора атрибута с указанным значением.

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


[attribute ^ = value] {
блок объявлений;
}

Давайте рассмотрим пример в котором выберем на странице все абсолютные адреса внешних гиперссылок, которые начинаются с http://, либо https://:


<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор атрибута со значением, начинающимся с определённых символов</title>
<style> 
a[href ^ = "http://"], a[href ^ = "https://"] { /* групповой селектор атрибутов */
color: orange; /* устанавливаем цвет текста */
}
</style>
</head>
	<body>
		<p>Сайт компании доступен как по протоколу http, так и по протоколу https:</p>
			<ul>
				<li><a href = "http://сайткомпании.ссср">Адрес с http</a></li>
				<li><a href = "https://сайткомпании.ссср">Адрес с https</a></li>
			</ul>
		<p>Может вы настроите перенаправление?</p>
	</body>
</html>

Обратите внимание, что значение атрибута в этом случае мы указываем в кавычках, чтобы браузер не интерпретировал это как начало гиперссылки.

Результат нашего примера:

Рис. 17е Пример использования селектора атрибута со значением, начинающимся с определённых символов.

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

Давайте рассмотрим пример в котором мы выберем гиперссылки, которые заканчиваются определённым разрешением файла.


<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор атрибута со значением, заканчивающимся определёнными символами</title>
<style> 
a[href$=".doc"] { /* выбираем все элементы с атрибутом href, значение которого закачивается на .doc */
color: green; /* устанавливаем цвет текста */
background-color: lightblue; /* устанавливаем цвет заднего фона */
}
a[href$=".mp3"] { /* выбираем все элементы с атрибутом href, значение которого закачивается на .mp3 */
background-color: khaki; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<a href ="http:/path.to/test.doc">Инструкция</a><br>
		<a href ="http:/path.to/test.mp3">Песня про зайцев</a>
	</body>
</html>

Обратите внимание, что значение атрибута в этом случае мы указываем в кавычках, чтобы браузер не интерпретировал это как разрешение файла.

Результат нашего примера:

Рис. 18 Пример использования селектора атрибутов со значением, заканчивающимся определёнными символами.

Давайте рассмотрим с Вами какие еще выборки можно сделать с использованием селектора атрибутов и перейдем к изучению такого полезного инструмента как псевдокласс отрицания.

Следующий селектор позволит нам, к примеру, выбрать изображения, которые содержат в названии IMG_ (как правило такое наименование файлов использует компания Canon):


img [src*="IMG_"] { /* выбирает все элементы img, атрибут src, которых содержит символы "IMG_" */
блок объявлений;
}  
/* селектор выбирает элементы с такими значениями как "xxxIMG_", "IMG_xxxx" и "xxxIMG_xxxx" */

Браузер интерпретирует это как необходимость выбора всех изображений, атрибут src которых содержит IMG_ (в любом месте). Зачастую такой способ позволяет быстрее отформатировать необходимые элементы, по сравнению с созданием и присвоением стилевого класса для каждого элемента.

Следущий селектор позволяет выбрать элемент, значение атрибута которого содержит определённое слово (не зависимо от позиции):


p[title ~="home"] { /* выбирает элементы <p>, которые содержат определенное слово */
блок объявлений;
}  

<p title = "go home">Абзац title="go home"</p> <!-- абзац будет стилизован (содержит home) -->
<p title = "home home" >Абзац title="home home"</p> <!-- абзац будет стилизован (содержит home) -->
<p title = "home-1" >Абзац title="home1"</p> <!-- абзац не будет стилизован -->
<p title = "homes" >Абзац title="homes"</p> <!-- абзац не будет стилизован -->
<p title = "shome">Абзац title="shome"</p> <!-- абзац не будет стилизован -->

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


[title | = home] { /* выбирает все элементы с атрибутом, значение которого начинается с определённого слова (после него не должно быть никаких символов, либо допускается продолжать значение через дефис, иначе выборка не будет произведена) */
блок объявлений;
}  

<p title = "home">Абзац title="home"</p> <!-- абзац будет стилизован (начинается с home) -->
<p title = "home-1" >Абзац title="home-1"</p> <!-- абзац будет стилизован (начинается с home после которого следует дефис) -->
<p title = "home home">Абзац title="home home"</p> <!-- абзац не будет стилизован -->
<p title = "not home">Абзац title="not home"</p> <!-- абзац не будет стилизован -->
<p title = "homes" >Абзац title="homes"</p> <!-- абзац не будет стилизован -->
<p title = "shome">Абзац title="shome"</p> <!-- абзац не будет стилизован -->

Обратите внимание, что условие выборки будет соблюдено если атрибут содержит значение, которое содержит только указанное слово, или если после указанного слова сразу следует дефис (значение продолжается через дефис).

Псевдокласс отрицания :not()

Селектор :not() или псевдокласс отрицания, позволяет выбрать элементы, или селекторы отличные от указанных.

Что нельзя использовать с псевдоклассом :not():

Использовать в одном селекторе несколько псевдоклассов :not().
Использовать с псевдоэлементами (::first-letter, ::first-line и так далее).
Нельзя использовать с селекторами потомков (например, div ul a).
Использовать в групповых селекторах (комбинации из селекторов).

Давайте рассмотрим пример в котором по разному стилизуем изображения. Допустим у нас есть изображения фиксированного размера со следующими значениями:


img { /* выбираем все изображения */
width: 100px; /* ширина элемента в пикселях */
height: 100px; /* высота элемента в пикселях */
}

Создадим селектор класса .photo и применим его к необходимым изображениям, чтобы они получили оранжевую границу.


.photo { /* выбираем все элементы с классом photo */
border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */
}

Перед Вами стоит задача изменить стиль для всех изображений (предположим, что их сотни), но при этом у Вас ограниченное количество времени и необходимо сделать так, чтобы эти изменения затронули изображения с классом .photo. Для этого Вам необходимо создать селектор совместно с псевдоклассом отрицания:


img:not(.photo)  { /* выбираем все изображения, которые не имеют класса photo */
border: 2px dashed green; /* пунктирная граница размером 2 пикселя зеленого цвета */
}

Всё вместе и результат:


<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс отрицания :not()</title>
<style>
img { /* выбираем все изображения */
width: 100px; /* ширина элемента в пикселях */
height: 100px; /* высота элемента в пикселях */
}
.photo { /* выбираем все элементы с классом photo */
border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */
}
img:not(.photo)  { /* выбираем все изображения, которые не имеют класса photo */
border: 2px dashed green; /* пунктирная граница размером 2 пикселя зеленого цвета */
}
</style>
</head>
	<body>
		<img src = "nich.jpg" alt = "nich" class = "photo">
		<img src = "nich.jpg" alt = "nich" class = "photo"><br>
		<img src = "nich.jpg" alt = "nich"> 
		<img src = "nich.jpg" alt = "nich"> 
		<img src = "nich.jpg" alt = "nich">
	</body>
</html>

Как вы можете заметить на изображении ниже, мы справились с поставленной задачей и стилизовали с использованием псевдокласса отрицания :not() все изображения, отлично от изображений с классом photo:

Рис. 19 Пример использования псевдокласса отрицания :not() в CSS.

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

Селектор дочерних элементов позволяет форматировать элементы, вложенные внутрь других элементов (выбирает все дочерние элементы внутри элемента родителя).

Элемент, подчиненный другому элементу более высокого уровня, является дочерним. На изображении ниже оба элемента <h3> и <p> являются дочерними по отношению к <body>, но элемент <i> при этом не является дочерним для элемента <body>, так как он расположен внутри тега <p>, и является дочерним именно для него.

Рис. 20 Дочерние элементы в HTML документе.

Перед нами стоит задача стилизовать гиперссылку (элемент <a>), который выделен оранжевым цветом на изображении:

Рис. 20а Задача выбора элемента на странице.

При использовании селектора потомков body a приведет к выбору всех элементов <a>, так как они являются вложенными по отношению к элементу <body>, если мы используем селектор потомков p a, то это приведет к выбору двух элементов <a>, которые вложены внутри элементов <p>, так как они оба являются его потомками. Селекторы потомков мы с Вами рассматривали в статье «Селекторы. Часть 2».

В нашем случае, как никогда лучше подойдет селектор дочерних элементов, благодаря которому мы можем добраться до необходимого нам элемента <a> самым простым способом.


p > a { /* выбирает любой элемент <a> дочерний по отношению к <p> */
блок объявлений;
}

Рассмотрим пример:


<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор дочерних элементов</title>
<style>
p>a { /* селектор дочерних элементов (выбираем дочерние <а>, вложенные в <p>) */
color: orange; /* устанавливаме цвет текста */
font-size: /* устанавливаме размер текста текста */
}
p a { /* селектор потомков (выбираем все потомки <a>, вложенные в <p>) */
text-decoration: none; /* убираем декорирование текста (нижнее подчеркивание) */
}
</style>
</head>
	<body>
		<p><a href = "https://ru.wikipedia.org/">Ссылка</a> внутри &amplt;p&ampgt;.</p>
		<a href = "https://ru.wikipedia.org/">Ссылка</a> внутри &amplt;body&ampgt;.
		<p><span><a href = "https://ru.wikipedia.org/">Ссылка</a></span> внутри элемента &amplt;p&ampgt;, вложенного в элемент &amplt;p&ampgt;.</p>
	</body>
</html>

В этом примере с использованием селектора дочерних элементов мы выбрали все дочерние <a>, вложенные в <p> (один элемент), а с помощью селектора потомков стилизовали все потомки <a>, вложенные в <p> (убрали декорирование текста у двух элементов).

Результат нашего примера:

Рис. 20б Пример использования селектора дочерних элементов.

Псевдоклассы дочерних элементов

Псевдокласс :first-child

Псевдокласс :first-child применяет стиль к элементу в том случае, если элемент является первым дочерним элементом своего родителя.

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

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

Рис. 21а Пример выбора селектора дочерних элементов.

Что общего у элементов, выделенных на изображении? А общее у них то, что выделенные элементы <h3> и <li> являются первыми дочерними элементами своих родителей, и чтобы нам их стилизовать необходимо использовать псевдокласс :first-child.

Перейдем к примеру:


<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :first-child</title>
<style>
h3:first-child { /* выбираем каждый элемент <h3>, который является первым дочерним элементом своего родителя */
color: blue; /* устанавливаем цвет текста */
}
li:first-child{ /* выбираем каждый элемент <li>, который является первым дочерним элементом своего родителя */
color: red; /* устанавливаем цвет текста */
font-size: 24px; /* устанавливаем размер шрифта */
}
</style>
</head>
	<body>
		<h3>Первый заголовок h3 тега body</h3>
		<ul>
			<li>один</li>
			<li>два</li>
			<li>три</li>
		</ul>
		<h3>Второй заголовок h3 тега body</h3>
		<article>
			<h3>Первый заголовок h3 тега article</h3>
			<ul>
				<li>один</li>
				<li>два</li>
				<li>три</li>
			</ul>
		</article>
	</body>
</html>

В этом примере с использованием псевдокласса :first-child мы стилизовали элементы <h3> и <li>, которые являются первыми дочерними элементами своих родителей.

Результат нашего примера:

Рис. 22 Пример использования псевдокласса :first-child.

Псевдокласс :last-child

Псевдокласс :last-child применяет стиль к элементу в том случае, если элемент является последним дочерним элементом своего родителя.

Этот псевдокласс в отличие от псевдокласса :first-child выбирает последний дочерний элемент своего родителя, а не первый.

Рис. 23 Пример выбора селектора дочерних элементов.

Что общего у элементов, выделенных на изображении? А общее у них то, что выделенные элементы <article> и <li> являются последними дочерними элементами своих родителей, и чтобы нам их стилизовать необходимо использовать псевдокласс :last-child.

Если вы сходу сможете ответить почему ни один элемент <h3> на изображении выше нельзя стилизовать с использованием псевдокласса :last-child, то можете сразу перейти к примеру, если нет, то внимательно изучите следующее изображение, оно поможет Вам до конца понять как работает псевдокласс :last-child:

Рис. 23а Схема работы псевдокласса :last-child.

Еще раз поясню, если вы создадите селектор h3:last-child, то браузер не найдет этот элемент по той причине, что нет элементов <h3>, которые являются последними дочерними элементами своего родителя, важно это понять, так как подобные вещи иногда ставят людей в ступор.

Перейдем к примеру:


<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :last-child</title>
<style>
article:last-child { /* выбираем каждый элемент <article>, который является последним дочерним элементом своего родителя */
background-color: orange; /* устанавливаем цвет фона */
}
li:last-child{ /* выбираем каждый элемент <li>, который является последним дочерним элементом своего родителя */
color: red; /* устанавливаем цвет текста */
font-size: 24px; /* устанавливаем размер шрифта */
}
</style>
</head>
	<body>
		<h3>Первый заголовок h3 тега body</h3>
		<ul>
			<li>один</li>
			<li>два</li>
			<li>три</li>
		</ul>
		<h3>Второй заголовок h3 тега body</h3>
		<article>
			<h3>Первый заголовок h3 тега article</h3>
			<ul>
				<li>один</li>
				<li>два</li>
				<li>три</li>
			</ul>
		</article>
	</body>
</html>

В этом примере с использованием псевдокласса :last-child мы стилизовали элементы <article> и <li>, которые являются последними дочерними элементами своих родителей.

Результат нашего примера:

Рис. 23б Пример использования псевдокласса :last-child.

Псевдокласс :nth-child

Стилизация по порядковому номеру

Ну что сказать, у нас остались неоконченные дела, которые касаются стилизации того самого неуловимого элемента <h3>, а на помощь в этом нам придет псевдокласс :nth-child.

Псевдокласс :nth-child позволяет выбрать дочерние элементы внутри родительского элемента в зависимости от их размещения (порядкового номера). Применение данного псевдокласса широко распространено, он позволяет чередовать стили строк в таблицах, списках, придать стиль сочетанию дочерних элементов и так далее.

Рис. 24 Пример выбора селектора дочерних элементов.

Что общего у элементов, выделенных на изображении? А общее у них то, что они выделены оранжевым цветом. Смешно? Не думаю. Общее у них все же есть, элементы <li> являются вторыми дочерними элементами своих родителей, а элемент <h3> тоже можно посчитать, и его порядковый номер будет третьим (третий дочерний элемент своего родителя <body>). Чтобы стилизовать эти элементы, нам необходимо использовать псевдокласс :nth-child.

Перейдем к примеру:


<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :first-child</title>
<style>
/* групповой селектор, который выбирает каждый третий дочерний элемент <h3> своего родителя
и каждый второй элемент <li> своего родителя  */
h3:nth-child(3), li:nth-child(2) { 
background-color: orange; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<h3>Первый заголовок h3 тега body</h3>
		<ul>
			<li>один</li>
			<li>два</li>
			<li>три</li>
		</ul>
		<h3>Второй заголовок h3 тега body</h3>
		<article>
			<h3>Первый заголовок h3 тега article</h3>
			<ul>
				<li>один</li>
				<li>два</li>
				<li>три</li>
			</ul>
		</article>
	</body>
</html>

В этом примере с использованием псевдокласса :nth-child мы стилизовали элементы <h3> и <li>, которые имеют определённый порядковый номер дочернего элемента внутри своих родительских элементов.

Результат нашего примера:

Рис. 24а Пример использования псевдоэлемента :last-child.

Продвинутое использование псевдокласса :nth-child

Стилизация по ключевому слову

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

even (четные элементы)
odd (нечетные элементы)

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

Давайте для примера создадим две простые таблицы с разными стилевыми классами и рассмотрим наглядно разницу в применении значений ключевых слов псевдокласса :nth-child для HTML элемента <tr>, который определяет строку таблицы:


<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Стилизация четных и нечетных дочерних элементов</title>
<style>
.primer1 tr:nth-child(even)  { /* стилизация четных дочерних элементов */
background-color: #AAA; /* устанавливаем цвет заднего фона */
}
.primer2 tr:nth-child(odd)  { /* стилизация нечетных дочерних элементов */
background-color: #AAA; /* устанавливаем цвет заднего фона */
}
caption {/* селектор типа (выбираем HTML элемент <caption>) */
color: red; /* устанавливаем цвет текста */
}
</style>
</head>
	<body>
		<table class = "primer1">
			<caption>Значение even (четные)</caption>
			<tr>
				<th>1 строка</th><th>Позиция</th><th>Количество</th>
			</tr>
			<tr>
				<td>2 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>3 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>4 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>5 строка</td><td></td><td></td>
			</tr>
		</table>
		<table class = "primer2">
			<caption>Значение odd (нечетные)</caption>
			<tr>
				<th>1 строка</th><th>Позиция</th><th>Количество</th>
			</tr>
			<tr>
				<td>2 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>3 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>4 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>5 строка</td><td></td><td></td>
			</tr>
		</table>
	</body>
</html>

В этом примере с использованием псевдокласса :nth-child мы стилизовали четные строки первой таблицы (элементы <tr>) и нечетные во второй таблице.

Рис. 24б Пример стилизации четных и нечетных дочерних элементов.

Стилизация по простой математической формуле

Псевдокласс :nth-child позволяет выбрать не только чётные, нечетные, или дочерние элементы с определённым порядковым номером, но и дочерние элементы, заданные по элементарной математической формуле. Давайте рассмотрим следующий селектор и разберем, что значит эта запись:


td:nth-child(4n+2)  {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}

Этот селектор означает, что каждая четвёртая ячейка таблицы (<td>) внутри строки, начиная со второй ячейки таблицы, будет стилизована:

4n – каждый четвертый элемент.
2 – с какого элемента начинать.

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


td:nth-child(4n-1)  {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}

Этот селектор означает, что каждая четвёртая ячейка таблицы (<td>) внутри строки, начиная с третьей ячейки таблицы (-1 ячейки нет по объективным причинам, поэтому происходит сдвиг влево), будет стилизована:

4n – каждый четвертый элемент.
-1 – с какого элемента начинать.

Давайте рассмотрим пример использования:


<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Стилизация дочерних элементов по математической формуле</title>
<style>
td, th{ /* групповым селектором выбираем заголовочные ячейки и ячейки данных */
border: 1px solid green; /* задаём сплошную границу размером 1 пиксель зеленого цвета */
width: 50px;  /* устанавливаем ширину заголовочным ячейкам и ячейкам данных */
}
td:nth-child(4n+2) {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<table>
			<tr>
				<th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th><th>11</th><th>12</th><th>13</th><th>14</th>
			</tr>
			<tr>
				<td>2</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			</tr>
			<tr>
				<td>3</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			</tr>
			<tr>
				<td>4</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			</tr>
		</table>
	</body>
</html>

В этом примере с использованием псевдокласса :nth-child мы выбрали и стилизовали каждую четвёртую ячейку таблицы (<td>) внутри строки, начиная со второй ячейки таблицы. Результат нашего примера:

Рис. 25 Пример cтилизации дочерних элементов по математической формуле.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практические задания:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файлы и изображения) в любую папку на вашем жестком диске:

Составьте следующие HTML страницы:
1. Составьте селектор, который позволит Вам стилизовать все изображения, которые имеют глобальный атрибут title: Практическое задание № 5.
2. Продвинутое задание: составьте селектор, который позволит Вам стилизовать все изображения, но не изображение, которое имеет значение атрибута alt равным «medved»: Практическое задание № 6.
3. С использованием изученных псевдоклассов составьте селекторы, которые позволят Вам стилизовать абзацы (элементы <p>) в соответствии с изображением: Практическое задание № 7.

Селектор следующих элементов | Справочник CSS

CSS селекторы

Значение и применение

Использование селектора следующих элементов ( элемент 1 ~ элемент 2 ) позволяет выбрать все элементы 2 , которые следуют сразу же за Элемент ( смежные элементы), а также все элементов 2 , которые находятся на одном уровне вложенности ( сестринские elements, или другое название — соседние ).

Этот селектор чаще всего называют селектором следующих элементов и элементов одного уровня , или селектором следующих элементов .

Поддержка браузерами

CSS синтаксис:

  элемент  ~  элемент  {
блок объявлений;
}

Версия CSS

CSS3

Пример использования

Перед нами стоит задача стилизовать все абзацы (элементы

), которые следуют сразу за элементом

и элементы

, которые являются сестринскими по отношению друг к другу (они выделены оранжевым цветом на изображении):

Выбор дополнительных и сестринских элементов в документе.

Обратите внимание, что элементы считаются расположенными на одном уровне в пределах одного родителя.

Для того, чтобы нам выбрать все элементы

, которые следуют сразу за

и элементы

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

  h3  ~  p  {
блок объявлений;
}

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

(элементы

).Для этого нам необходимо использовать селектор следующих элементов с универсальным селектором:

  дел  ~  *  {
блок объявлений;
}

Давайте рассмотрим следующий пример:

Селектор дополнительных элементов <стиль> h3 ~ p {/ * выбираем все элементы

семейные и сестринские для

* / цвет фона: светло-голубой; / * задаём цвет заднего фона * / красный цвет; / * задаём цвет текста * / } div `~` * {/ * выбираем все сестринские элементы
* / стиль шрифта: курсив; / * устанавливаем курсивное начертание шрифта * / граница: сплошной зеленый 1px; / * устанавливаем сплошную границу размером 1 пиксель зеленого цвета * / }

Заголовок внутри div

Абзац один

Абзац два

Заголовок внутри тела

Абзац один

В этом примере с использованием селектора следующих элементов мы стилизовали первые абзацы, которые следуют сразу после заголовков второго уровня (соответствующие элементы) и все сестринские абзацы.Кроме того, по особенному стилизовали все элементы, которые являются сестринскими для элемента

Результат нашего примера:

Пример использования селектора следующих элементов.CSS селекторы .

некоторые хитрости работы с одноуровневыми элементами

От автора: , если вы когда-либо использовали другие селекторы CSS одного уровня, вы знаете, что всего два. Комбинатор + выбирает первое совпадение, которое находит сразу после, а ~ выбирает все последующие.

Но у нас нет способ выбрать те, которые расположены раньше. Либо родительские селекторы, либо предыдущие селекторные одного уровня — такого просто нет.

Я знаю, что вы этого хотите, вы знаете, что я этого хочу, но суровая правда в том, что они не существуют (и, вероятно, никогда не будут). Есть миллион сообщений «Почему?». Есть даже предложения о том, как их реализовать. Но мы застреваем на однонаправленной обработке правил CSS — это сделано, скорее всего, для защиты нас от «плохого опыта», связанного с неправильным течением потока обработки или даже бесконечными циклами.

К счастью, как и в случае опасности CSS, мы можем имитировать это.Первое, что нужно учитывать — это то, для чего нам предыдущие одноуровневые элементы. Существуют два случая:

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

Смежные селекторы предшествующих элементов CSS и способы их имитации

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Нам нужно выбрать только элементы одного уровня, которые расположены раньше

1.Выбор всех элементов одного уровня

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

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

1-й элемент 2-й элемент 3-й элемент

1-й элемент

2-й элемент

3-й элемент

< / div>

.контейнер{ указатель-события: нет } .container> span { указатель-события: авто; } .container: hover> span { фон: красный; / * или что угодно, что вы хотите сделать со всеми элементами одного уровня, когда вы наводите мышь на один из них * / }

.container {

события-указателя: нет

}

.container> span {

события-указателя: авто;

}

.container: hover> span {

фон: красный;

/ * или что угодно, что вы хотите сделать со всеми элементами одного уровня, когда вы наводите мышь на один из них * /

}

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

первый элемент
второй элемент
третий пункт

первый элемент

второй элемент

третий элемент

< / ul>

ul: hover> li: not (: hover) { непрозрачность: 0.5; }

ul: hover> li: not (: hover) {

непрозрачность: 0,5;

}

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

Кроме того, вы можете использовать селекторы type и nth, чтобы дополнительно отфильтровать нужные элементы. Задавайте стили стили, мы можем получить следующее:

Обратите внимание: если вы хотите использовать указатель-события: none, помните, что это может нарушить порядок стекирования (возможно, вы выберете элементы, которые «ниже» в порядке стекирования).Это также не будет работать в IE10 и ниже, если только вам не нужны указатели события для чего-то другого. Поэтому будьте очень осторожны при использовании.

2. Выбор предыдущих элементов

Для этого варианта использования мы можем изменить в обратном направлении порядок сортировки в HTML, а отсортировать элементы обратно в CSS и использовать селекторы ~ и +. Таким образом, мы будем выбирать следующие элементы, но на самом деле это будут предыдущие элементы.

Существует несколько способов сделать это.Самый простой и, вероятно, самый старый — это изменение направления написания нашего контейнера:

3-й элемент 2-й элемент 1-й элемент

3-й элемент

2-й элемент

1-й элемент

< / div>

.контейнер{ направление: RTL; / * встроенные элементы будут размещаться справа на лево * / }

. Контейнер {

направление: RTL;

/ * встроенные элементы будут размещаться справа на лево * /

}

Если ваши элементы должны отображать фактический текст, вы всегда можете отменить это обратно:

.container> span { направление: ltr; }

.контейнер> пролет {

направление: л;

}

. К счастью, современный инструментарий CSS позволяет сделать это намного проще и безопаснее. Мы можем просто использовать для контейнера Flexbox и изменить порядок с помощью flex-direction: row-reverse:

.контейнер{ дисплей: гибкий; направление гибкости: обратный ряд; }

.контейнер {

дисплей: гибкий;

flex-direction: ряд-реверс;

}

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

Использование «предыдущих элементов одного уровня» для создания системы звезд-рейтингов на CSS

Семантически, рейтинговую систему можно рассматривать как простой список радио-кнопок с использованием метками.Это позволит нам использовать проверенный псевдо-селектор: проверено для изменений элементов одного уровня. Итак, давайте начнем с этого:

☆ ☆ ☆ ☆ ☆

☆

< input type = "radio" name = "rating" value = "4"> ☆

☆

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Как мы оценивали ранее, элементы находятся в обратном порядке тому, который позволяет нам применить селектор «предыдущий элемент одного уровня».Обратите внимание, что мы используем для представления пустых звезд символ юникода «белая звезда» (U + 2606).

Давайте представим их друг с другом, в правильном порядке:

.rating { дисплей: гибкий; направление гибкости: обратный ряд; }

. Рейтинг {

дисплей: гибкий;

flex-direction: ряд-реверс;

}

Теперь скроем сами переключатели, никому не нужно их видеть:

.rating> input { дисплей: нет; }

. Номинальная> входная {

дисплей: нет;

}

И применим некоторые стили к символам звездочек:

.rating> label { положение: относительное; ширина: 1.1em; размер шрифта: 15vw; цвет: # FFD700; курсор: указатель; }

. Номинал> этикетка {

позиция: относительная;

ширина: 1.1em;

размер шрифта: 15vw;

цвет: # FFD700;

курсор: указатель;

}

Единственная действительно важная строка — это положение: относительное. Это позволит нам по абсолютно позиционировать псевдо-элемент с закрашенной звездой (U + 2605), который будет изначально скрыт.

.rating> label :: before { содержание: «\ 2605»; позиция: абсолютная; непрозрачность: 0; }

.рейтинг> метка :: before {

content: «\ 2605»;

позиция: абсолютная;

непрозрачность: 0;

}

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

.rating> label: hover: before, .rating> label: hover ~ label: before { непрозрачность: 1! важно; / * позор … позор … позор … Я объясню это позже * / }

.рейтинг> метка: hover: before,

.rating> label: hover ~ label: before {

opacity: 1! important;

/ * позор … позор … позор … Я объясню это позже * /

}

То же делается для выбранного рейтинга, через сопоставление всех меток, которые находятся перед выбранной радио- кнопкой:

.rating> input: checked ~ label: before { непрозрачность: 1; }

.рейтинг> ввод: проверено ~ метка: до {

непрозрачность: 1;

}

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

И последнее, но не менее важное: нам нужно «запомнить» текущий рейтинг, на случай, если пользователь захочет его изменить. Например, если он выбрал пять и по какой-либо причине изменить их на четыре, мы должны отобразить звезды с 1 по 4, как заполненные, а пятую — полупрозрачной при наведении указателя на четвертую.

. .rating: hover> input: checked ~ label: before { непрозрачность: 0,4; }

. Рейтинг: hover> input: checked ~ label: before {

opacity: 0.4;

}

Вот для чего нам нужно умение: 1! Важно в начальном объявлении наведения.В противном случае это последнее правило переопределило бы другие в соответствии со специфичностью и применило полупрозрачную заливку ко всему.

И там у нас есть это, кроссбраузерная, полностью функциональная система звезд-рейтингов с использованием только селекторов «предыдущие элементы одного уровня».

Как вы можете видеть, просто потому, что «это невозможно» не означает, что вы не должны пытаться. Программирование — это раздвижение границ. Поэтому каждый раз, когда вы упираетесь в стену, просто попробуйте надавить немного сильнее.Или лучшей аналогией, я думаю, будет — найти свой обходной путь? … В любом случае, вы понимаете, что я имею в виду. Продолжайте взламывать!

Замечания относительно доступности

Предыдущий фрагмент — это упрощение для лучшего понимания. Это не то, что я бы рекомендовал использовать в среде из-за многих ограничений доступности.

Чтобы сделать их более доступными, первым делом нужно было бы скрыть радио-кнопки с помощью другого метода, а не отображать: нет, чтобы сделать их фокусируемыми.Мы также добавили кольцо фокусировки на весь фрагмент звёзд, когда любой элемент внутри выделен фокусом, это делается через псевдо-селектор: focus-in.

Метки «звезды» не имеют смысла для экранных дикторов, поэтому наилучшим подходом будет наличие внутри метки span с текстом «n Stars», который будет скрыт от видящих пользователей.

Кроме того, подход с обратным порядком в HTML-источнике + display: row-reverse делает клавиатуру неудобной для выставления рейтингов. Доступность Flexbox и клавиатура — довольно сложная тема, но ближе всего к решению подход, когда для каждого элемента добавляется тег aria-flowtotag, что, по крайней мере, устраняет проблему для некоторых экранных дикторов + комбинации браузеров.

Более доступный сниппет (использующий альтернативные технику изменения следующих одного уровня, которые выглядят пустыми). Вы можете найти у Патрика Коула, как описано в комментариях ниже.

Автор: Факундо Коррадини

Источник: https://medium.freecodecamp.org/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее