Как найти нужный селектор

Важно! Не переживайте, если ранее не были знакомы с html и CSS, здесь не потребуется специальных знаний в программировании

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

Поиск нужного элемента

Для начала откройте html код страницы вашего сайта. Сделать это можно кликнув правой кнопкой мыши и выбрав «Показать код элемента»/Inspect (здесь и далее рассматривается работа в браузере Chrome). 

Откроется дополнительная панель браузера, где во вкладке Elements отобразится весь html код страницы, загруженный в данный момент. На скриншоте примера выделен тег, на который как раз был клик правой кнопкой мыши.

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

• кликнуть на конкретную область, нажать на правую кнопку мыши и еще раз выбрать «Показать код элемента»/Inspect;
• переключиться на выбор элемента на странице из консоли, нажав на соответствующую кнопку в консоли браузера;

• через поиск найти тег прямо в html коде. Для этого кликните на любой тег, нажмите сочетание клавиш Ctrl + F и в появившейся строке поиска введите любой текст с сайта. Браузер сам подсветит элемент и рядом напишет количество совпадений на странице. В нашем примере видно, что «записаться» повторяется на странице дважды. При нажатии Enter в строке поиска, браузер переключает к следующему элементу на странице (этот момент поможет вам проверять уникальность селектора на странице либо уточнять, все ли найденные элементы соответствуют вашим задачам, когда их должно быть несколько).

Основные понятия в html коде

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

Тег — это элемент, который может состоять из начального и конечного, и содержать внутри себя текст (span в примере — название тега), а может быть одиночным, например <br> (перенос текста на новую строку). 

Атрибут тега — дополнительные параметры тега, которые влияют на содержимое тега, например текст. Например,
— здесь style=»font-size: 200%; text-align: center;» является атрибутом и в нашем примере он сделает размер текста Записаться в два раза крупнее и разместит его по центру.
У одного тега может быть несколько атрибутов, которые будут разделены пробелами, например, так:

здесь два атрибута у одного тега — class и style.

Значение атрибута — атрибут тега состоит из двух элементов: названия и значения.
Цифрой 1 отмечены названия атрибутов, цифрой 2 — их значения. Значений, как и самих атрибутов в теге, может быть несколько, разделяются они также пробелом.

Расположение тегов — в html коде все теги должны располагаться по четким правилам, как матрешки, один в другом либо рядом. У всех тегов есть родители (теги, внутри которых они находятся) и у многих дети. Например, тег <strong></strong> ребенок и тега <h2></h2>, и тега <div></div>, а они соответственно его родители:

Правила обозначения CSS селекторов

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

Название тега — достаточно просто указать span, div, img, h2  в месте, где нужно прописать селектор, и такой селектор будет учитывать все теги с таким названием на странице. Обычно этого хватает для записи названия страницы, так как обычно оно присутствует в теге h1, который не повторяется. Например, так будет выглядеть настройка записи в свойство события «Посещение страницы» названия страницы:

Атрибуты class и id — это уникальные в нашем случае атрибуты, которые обозначаются не так, как все остальные. Пример:

Здесь селектор  class мы запишем как .text или .wrapper2, то есть просто добавим точку перед значением. Если мы хотим указать, что нам нужен тег, где в обязательном порядке присутствуют оба значения, то пропишем так .text.wrapper2 (без пробела).

Значение id должно являться уникальным по правилам html и иметь только одно значение внутри этого тега. Про примеру оно будет обозначаться так #section24.

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

Другие атрибуты — все остальные атрибуты записываются по единому правилу: название тега[атрибут и его значение]. Например, укажем CSS селектор для тега с конкретной картинкой, используя атрибут scr (ссылку на картинку):

img[src=»//s.filesonload.ru/img/shadowbottom/1.png»]

Использования элементов нескольких тегов — иногда атрибуты у нужного тега не уникальны или вовсе отсутствуют. В этих случаях можно использовать атрибуты родителей для определения селектора. Например, мы хотим использовать для сбора данных информацию из тега <strong>:

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

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

Можно использовать цепочку из названий тегов и их атрибутов, которые в конечном итоге укажут на нужный тег: h2.font-header span span strong.

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

В этом примере все просто: мы имеем ввиду 2 тега, клик на которые будут записываться в хронологию пользователя, как отдельное событие. Первый селектор div.button input[type=»submit»] обозначает, что нам нужны все теги <input>, в которых есть атрибут type=»submit» и они должны являться детьми тега <div>, в котором есть атрибут class=»button». В упрощенном варианте это будет выглядеть так в html (на самом сайте, конечно, будет больше всего вокруг): 

<div class=»button»>
<input type=»submit»></input>
</div>

Тут же, через запятую, прописан еще один селектор: все теги <button> с атрибутом class=»submit».

Проверка уникальности CSS селектора

Уникальность CSS селектора для нас очень важна. Если селектор прописан неверно и он не является уникальным, то сбор данных будет не точным, а значит — бесполезным. 

Проверить уникальность можно прямо в браузере через поиск в панеле Elements. Нажмите сочетание клавиш Ctrl + F, и введите в строке поиска найденный вами ранее CSS селектор. Браузер сам подсветит тег, путь к которому вы указали и напишет количество таких совпадений на странице.

В большинстве случаев, совпадение должно быть только одно (будет написано — 1/1). Иногда требуется, чтобы совпадений было несколько, но все они указывали на нужные вам теги, например, свойство «Товары в корзине» подтягивает названия товаров из списка товаров в самой корзине. При настройке такого свойства количество совпадений по селекторам должно равняться реальному количеству товаров в корзине на данный момент.

Как проверить, правильно вы настроили сбор данных в Carrot quest, можно посмотреть в этой статье. При любых сложностях — пишите нам в чат, будем рады помочь.

25 янв. 2023 г.

Время на прочтение
6 мин

Количество просмотров 87K

Всем добра!

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

Поехали.

Каждый курс или статья для начинающих автоматизаторов рассказывает об удобном и универсальном средстве поиска элементов Web-страницы, как XPath. Данный вид локаторов на элемент был создан в 1999 году для указания на элементы в XML файлах. С помощью встроенных функций XPath стал очень популярным инструментом поиска элементов на Web-странице. Если HTML код вашего приложения выглядит как-то так:

…
<form class=“form_upload>
    <div>
        <div class=“row_element_3 row tile_fixed”>
            <div class=“button_cell wrapper_tile”>
                <button type=“submit” class=“button_submit wrapper_button”>Нажми меня</button>
            </div>
        </div>
    </div>
</form>
…

и вы не можете найти достойный XPath для кнопки “Нажми меня”, не стоит сразу бежать в сторону разработчика с просьбой о помощи. Есть отличная возможность воспользоваться CSS селектором, он будет выглядеть так:

.button_submit

Добро пожаловать в мир CSS.

Принято считать, что в CSS селекторах все завязано на классы. Это не совсем так, но если Web приложение использует “оптимизатор” или “обфускатор” HTML кода, и выглядит вот так:

<form class=“afhfsdh__”>
    <div>
        <div class=“hfgeyq fjjs qurlzn”>
            <div class=“fjdfmzn fjafjd”>
                <button type=“submit” class=“ajffalf wjf_fjaap”></button>
            </div>
        </div>
    </div>
</form>
…

(все названия css классов уменьшены с помощью оптимизатора)

, то получить короткий CSS селектор не удастся — как правило, после каждого нового билда css классы меняются на новые. Но все равно, CSS селектор может оказаться проще и в этом случае: css: form button[type=‘submit’], вместо XPath: //form//button[@type=‘submit’]

Допустим, что оптимизаторы HTML у нас не установлены и разработчики не планируют его использовать на проекте (проверьте этот факт!).

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

Смотрите:

<form class=“form_upload>
    <div>
        <div class=“row_element_3 row tile_fixed”>
            <div class=“button_cell wrapper_tile”>
                <button type=“submit” class=“button_submit wrapper_button”></button>
            </div>
        </div>
    </div>
</form>

css для элемента button: .button_submit, при этом класс .wrapper_button указывать необязательно, но если он нужен для указания на наш класс, мы можем его добавить сразу после указания первого css класса: css: .button_submit.wrapper_button. Порядок классов роли не играет, поэтому их можно поменять местами:

 .wrapper_button.button_submit .

Следующим незаменимым помощником в поиске HTML элементов являются Теги. Написать css селектор, указывающий на тег button очень просто, тем более, что он уже был написан в этом предложении. CSS селектор для button –

css: button.

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

button.button_submit

и это также является css селектором к нашему элементу.

Помимо тегов, атрибуты также помогают уникально идентифицировать элемент на странице. Часто разработчики создают дополнительные атрибуты вместо добавления новых “айдишников”, например, могут создавать дополнительные атрибуты data-id или auto-id у каждого элемента, с которым планируется дальнейшее действие. К примеру, разработчики могут добавить атрибут data-id к нашей кнопке button. Тогда к атрибутам с помощью css селектора можно обратиться через фигурные скобки: [data-id=‘submit’]. Дополнительно, вы можете не указывать значение атрибута после знака равно [data-id]. Такой селектор найдет вам все элементы, у которого существует атрибут data-id с любым значением внутри. Вы также можете указать атрибут class для поиска нашей кнопки: [class=‘button_submit’], но в CSS, как вы уже знаете, можно полениться и написать так: .button_submit. Соединять все вместе также достаточно просто:

button[type=‘submit’].button_submit
тег   атрибут        класс

Но это большая удача, если нам удается находить элемент, используя селектор с указанием только одного элемента, как, например, использовать атрибут [data-id] который однозначно находит один элемент на странице. Очень часто нам приходится использовать предков элемента, чтобы найти потомка. И это в CSS тоже возможно сделать достаточно просто:

<form class=“form_upload>
    <div>
        <div class=“row_element_3 row tile_fixed”>
            <div class=“button_cell wrapper_tile”>
                <button type=“submit” class=“button_submit wrapper_button”></button>
            </div>
        </div>
    </div>
</form>

css:form > div > div > div > button.button_submit

и знак > позволяет найти элемент исключительно у предка внутри. Но писать все элементы ненужно, так как в CSS есть возможность поиска во всех потомках, этот символ — пробел “ “. Используя данный указатель мы можем быстро найти элемент внутри формы:

Было: css: form > div > div > div > button.button_submit
Стало: css: form button,button_submit

Удобно также находить следующего “родственника” через предыдущего. Дополним наш пример еще одним span:

<form class=“form_upload>
    <div>
        <div class=“row_element_3 row tile_fixed”>
            <div class=“button_cell wrapper_tile”>
                <div class=“content”></div>
                <span data-id=“link”>Ссылка</span> <!-- элемент с атрибутом data-id -->
                <button type=“submit” class=“button_submit wrapper_button”> <!-- искомая кнопка --></button>
            </div>
        </div>
    </div>
</form>

[data-id=‘link’] + button найдет button, у которого выше на один уровень есть родственник с атрибутом data-id=”link”. Этим указателем можно пользоваться, когда у предыдущего элемента есть id или уникальный атрибут, а у элемента, который находится следующим после нужного, таких идентификаторов нет. Итак, с помощью символа + css селектор найдет следующего родственника.

NOTE:

div + span[data-id=‘link’] + button

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

Не стоит упускать вариант поиска по части атрибута. Делается это просто: button[class*=‘submit’] — из длинного названия класса button_submit мы берем только правую часть submit и добавляем к знаку = символ *. Также можно найти по слову cell из значения класса: div[class*=‘cell’].

Есть еще одна особенность css селекторов, которая позволит найти вам все ссылки или расширения файлов, это ^= и $= , но такая задача стоит не так часто, как поиск по вхождению значения у атрибута.

a[href^=“https:”] — найдет все ссылки, которые начинаются с https,
a[href$=“.pdf”] — найдет все ссылки, которые заканчиваются на .pdf.

Немного о том, как найти потомков с одним и тем же тегом у предка. Начнем, как всегда, с примера:

<div class=“tiles”>
    <div class=“tile”>…</div>
    <div class=“tile”>…</div>
</div>

Как найти второй div class=“tile” у div class=“tiles”? Варианта два:

div > div:nth-of-type(2) div > div:nth-child(2)

Но в чем различие между этими двумя селекторами? Дополним пример:

<div class=“tiles”>
	<a class=“link”>…</a> <!—1—>
	<div class=“tile”>…</div><!—2—>
	<div class=“tile”>…</div><!—3—>
</div>

css 1 вариант: div > div:nth-of-type(2)
css 2 вариант: div > div:nth-child(2)

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

Разгадка:

первый селектор будет указывать на строчку номер 2, тогда как второй селектор будет указывать на строчку номер 3. nth-child ищет второй div, который является потомком родителя . Второй

<div>

у элемента

<div class=“tiles”>

это третья строка. В свою очередь nth-of-type ищет второй элемент у родителя

<div class=“tiles”>

, который должен являться тегом

div

, это строка номер два.

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

<a>

: наверху, между

<div>

или внизу блока, всегда селектор div:nth-child(2) будет все равно указывать на нужный элемент – второй элемент div внутри блока.

Была опущена еще одна функция поиска элемента по id. Вы уже знаете, что поиск по любому из атрибутов осуществляется с использованием указания квадратных скобок [attribute=“value”] и для нашего случая мы можем найти элемент так [id=“value”]. А что если есть существует более быстрый способ поиска по id элемента?

#value. “#” - указатель, что поиск осуществляется по id.

Используя все приобретенные навыки попробуйте написать селектор для кнопки

<button>

Отправить
…
<div>
    <div class=“tile_wrapper tile content”>
        <div class=“row row_content”>
            <div class=“outline description__on”></div>
            <div class=“outline description__off button_send hover_mouse”>
                <button class=“outline button_send”>Отправить</button>
            </div>
        </div>
    </div>
</div>

Будем рады увидеть ваши комментарии и варианты в комментариях тут или обсудить это на очередном открытом уроке, который пройдёт у нас 13-го марта.

Спасибо!

a {
		text-decoration: none;
  }

<p>Содержание статьи:</p>
	<ul>
		<li><a href="#">Emmet на практике: пишем HTML</a></li>
		<li><a href="#">Создаём шапку документа</a></li>
		<li><a href="#">Подключаем стили и скрипты</a></li>
		<li><a href="#">Добавляем ссылки</a></li>
		<li><a href="#">Вводим теги</a></li>
	</ul>

* {
  margin: 0;
  box-sizing: border-box;
}

a {
		text-decoration: none;
  }

<p id="intro">Сегодня мы расскажем вам об Emmet.</p> 
<p id="article_content">В этой статье вы узнаете:</p>

#intro{
		color: red;
		font-weight: bold;
	}

#article_content{
		font-family: sans-serif;
		font-weight: bold;
	}

<p class="plain_text article">Сегодня мы расскажем вам про Emmet.</p> 

.plain_text{
		font-size: 20px;
	}

.article{
		font-family: "Montserrat"; 
	}

.plain_text, p, h1, figure, div {
    margin-top: 0;
    margin-left: 0;
}

figure img {
    margin-bottom: 20px;
}

.container > img {
    margin-bottom: 40px;
}

.about_us > .card {
    background-color: #f2f3f5;
}

.about_us + .card {
    background-color: #f2f3f5;
}

[title] {
		font-weight: bold;
	}

[title="what_is"] {
		font-weight: normal;
	}

[class^="form"] {
		background-color: #7aacba;
	}

[class|="form"] {
		border: 5px outset black;
	}

[class$="primary"] {
		font-weight: bold;
	}

[class$="control"] {
		padding: 15px;
	}

[class$="control"] {
		padding: 15px;
	}

a:hover {
		font-size: 20px;
	}

<div class="container">
		<p>Параграф 1</p>
		<p>Параграф 2</p>
		<p>Параграф 3</p>
	</div>
	<p>Параграф 4</p>
	<p>Параграф 5</p>

.container p:last-child {
  		margin-bottom: 30px;
	}

.container div ul  {/**/} 
#our_team div.developers  {/**/} 

<a style="color: red;" class="article media code" id="definition">Программист — это...</p>

a {
		font-weight: bold !important;
	}

#stronger a {
		font-weight: normal !important;
	}

Научитесь: Профессия Frontend-разработчик
Узнать больше

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

Что такое CSS селекторы

селектор {
  свойство: значение;
  свойство: значение;
  ...
}  

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

Пример CSS правила:

p {
  text-align: center;
  font-size: 20px;
}

В этом CSS правиле, p — это селектор, в данном случае — это селектор элемента. Это CSS правило устанавливает стили (CSS свойства, описанные в нём) для всех элементов p на странице.

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

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

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

Селектор по элементу (тегу)

Селектор по элементу предназначен для выбора элементов по имени тега.

Синтаксис: имяТега

Пример задания правила для всех элементов p на странице:

/* селектор p выберет все элементы p на странице */
p {
  padding-bottom: 15px;
}

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

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

Синтаксис: .имяКласса

Пример задания правила для всех элементов, имеющих класс center:

/* селектор .center выберет все элементы, имеющие класс center */
.center {
  text-align: center;
}

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

Селектор по идентификатору предназначен для выбора элемента по идентификатору (значению атрибута id).

Синтаксис: #имяИдентификатора

Пример задания правила для элемента, имеющего в качестве значения атрибута id значение footer:

/* селектор #footer выберет элемент, имеющий идентификатор footer */
#footer {
  height: 50px;
  margin-top: 20px;
}

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

Универсальный селектор (селектор звёздочка) предназначен для выбора всех элементов.

Синтаксис: *

Пример задания правила для всех элементов на странице:

/* селектор * выберет все элементы на странице */
* {
  margin: 0;
  padding: 0;
}

CSS селекторы по атрибуту

Селекторы по атрибуту предназначены для выбора элементов по имени атрибута и (или) его значению.

Типы селекторов по атрибуту:

• [attr] – по имени атрибута;
• [attr=value] – по имени и значению атрибута;
• [attr^=value] – по имени и значению, с которого оно должно начинаться;
• [attr|=value] – по имени атрибута и его значению, которое равно value или начинается со value-;
• [attr$=value] – по имени атрибута и значению, на которое оно должно заканчиваться;
• [attr*=value] – по указанному атрибуту и значению, которое должно содержать value;
• [attr~=value] – по имени атрибута и значению, которое содержит value отделённое от других с помощью пробела.

[attr]

Пример задания правила для всех элементов на странице, имеющих атрибут target:

/* селектор [target] выберет все элементы на странице, имеющих атрибут target */
[target] {
  background-color: red;
}

[attr=value]

Пример задания правила для всех элементов на странице, имеющих атрибут rel со значением nofollow:

/* селектор [rel="nofollow"] выберет все элементы на странице, имеющих атрибут rel со значением nofollow */
[rel="nofollow"] {
  background-color: green;
}

[attr^=value]

Пример задания правила для всех элементов на странице, имеющих атрибут class, значение которого начинается с col:

/* селектор [class^="col"] выберет все элементы на странице, имеющих атрибут class, значение которого начинается с col */
[class^="col"] {
  background-color: yellow;
}

[attr|=value]

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

/* селектор [class|="test"] выберет все элементы на странице, имеющих атрибут class, значение которого равно test или начинается с test- */
[class|="test"] {
  background-color: orange;
}

[attr$=value]

Пример задания правила для всех элементов на странице, имеющих атрибут class, значение которого заканчивается на color:

/* селектор [class$="color"] выберет все элементы на странице, имеющих атрибут class, значение которого заканчивается на color */
[class$="color"] {
  background-color: yellow;
}

[attr*=value]

Пример задания правила для всех элементов на странице, имеющих атрибут href, значение которого содержит подстроку youtu.be (например будет выбран элемент, если атрибут href у него равен https://youtu.be/TEOSuiNfUMA):

/* селектор [href*="youtu.be"] выберет все элементы на странице, имеющих атрибут href, значение которого содержит youtu.be */
[href*="youtu.be"] {
  background-color: green;
}

[attr~=value]

Пример задания правила для всех элементов на странице, имеющих атрибут data-content, значение которого содержит news, отделённое от других с помощью пробела (например будет выбран элемент, если у него атрибут data-content равен hot-news news news-football):

/* селектор [data-content~="news"] выберет все элементы на странице, имеющих атрибут data-content, значение которого содержит news, отделённое от других с помощью пробела */
[data-content~="news"] {
  background-color: brown;
} 

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

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

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

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

К этой группе псевдоклассов можно отнести псевдоклассы: :link, :visited, :hover, :active и :focus.

Псевдоклассы :link и :visited предназначены исключительно для ссылок (элементов a с атрибутом href).

Псевдоклассы :hover, :active и :focus могут применяться не только к ссылкам, но и к другим элементам.

Псевдокласс :link

Псевдокласс :link предназначен для выбора не посещённых ссылок.

Пример задания правила для всех элементов a с классом external, которые пользователь ещё не посетил:

/* селектор a.external:link выберет все элементы a с классом external пользователь по которым ещё не переходил */
a.external:link {
  color: red;
}

Псевдокласс :visited

Псевдокласс :visited предназначен для выбора посещённых ссылок.

Пример задания правила для всех элементов a, расположенных в .aside, пользователь которые уже посетил:

/* селектор .side a:visited выберет все элементы a, находящиеся в .aside, пользователь которые уже посетил */
.aside a:visited {
  color: #000;
}

Псевдокласс :active

Псевдокласс :active предназначен для выбора элементов в момент когда они активируются пользователем. Например, когда пользователь нажал левой кнопкой мышкой на ссылку, но её ещё не отпустил. В основном данный класс применяется для ссылок (a) и кнопок (button), но может также использоваться и для других элементов.

Пример задания CSS правила для всех элементов a когда они активируются пользователем:

/* селектор a:active выберет все элементы a, находящиеся в активном состоянии */
a:active {
  background-color: yellow;
}

Псевдокласс :hover

Псевдокласс :hover предназначен для выбора элементов при поднесении к ним курсора (при наведении на них).

Пример задания CSS правила для всех элементов .btn-warning при поднесении к ним курсора:

/* селектор .btn-warning:hover выберет все элементы .btn-warning при поднесении к ним курсора */
.btn-warning:hover {
  color: #fff;
  background-color: #ff8f00;
}

При задании CSS-правил для ссылок с использованием псведоклассов :link, :visited, :hover и :active, их следует распологать в следеующем порядке:

a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }

Если CSS-правила расположить в другом порядке, то часть из них могут не работать.

Псевдокласс :focus

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

Пример задания CSS правила для элемента input[type="text"] при нахождении его в фокусе:

/* селектор input[type="text"] найдет элемент input с атрибутом type="text" при нахождении его в фокусе */
input[type="text"]:focus {
  background-color: #ffe082;
}

По расположению среди соседей

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

Псевдоклассы, предназначенные для этого: :first-child, :last-child, :only-child, :nth-child(выражение), :nth-last-child(выражение).

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

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

Пример задания CSS правила для элементов li являющимися первыми дочерними элементами своего родителя:

/* селектор li:first-child выберет элементы li, которые являются первыми элементами своего родителя */
li:first-child {
  font-weight: bold;
}

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

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

Пример задания CSS правила для элементов .alert-warning, которые являются последними дочерними элементами своего родителя:

/* селектор .alert-warning:last-child выберет элементы .alert-warning которые являются последними элементами своего родителя */
.alert-warning:last-child {
  font-weight: bold;
}

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

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

Например:

h2:only-child {
  ...
}

Селектор h2:only-child выберет все элементы h2, если они являются единственными дочерними элементами своего родителя.

Действие аналогичное :only-child можно выполнить с помощью псевдоклассов :first-child и :last-child. Например селектор h2:only-child можно ещё реализовать так: h2:last-child:first-child.

Псевдокласс :nth-child(выражение)

Псевдокласс :nth-child() применяется для выбора элементов по их порядковому номеру в родителе. В качестве выражения можно использовать число, формулу или ключевые слова odd или even. Отсчёт элементов в родителе начинается с 1.

Например:

/* селектор .li:nth-child(2) выберет элементы li, которые явлются вторыми элементами своего родителя */
.li:nth-child(2) { ... }
/* селектор .li:nth-child(odd) выберет элементы li, которые явлются нечётными элементами (1, 3, 5, ...) своего родителя */
.li:nth-child(odd) { ... }
/* селектор .li:nth-child(even) выберет элементы li, которые явлются чётными элементами (2, 4, 6, ...) своего родителя */
.li:nth-child(even) { ... }
/* селектор .li:nth-child(2n+1) выберет элементы li, которые имеют порядковые номера 1, 3, 5, 7, ... внутри своего родителя */
.li:nth-child(2n+1) { ... }

Формула имеет следующую запись: An + B. A и B — это числа, а n — счетчик, принимающий целые значения, начиная с 0 (т.е. 0, 1, 2, 3 …).

Например, формула вида 3n + 2 будет определять элементы с порядковыми номерами (2, 5, 8, …). Т.е. 3 * 0 + 2, 3 * 1 + 2, 3 * 2 + 2, …

А например, формула вида 5n будет определять элементы с порядковыми номерами (0, 5, 10, …). Т.е. 5 * 0, 5 * 1, 5 * 2, …

Псевдокласс :nth-last-child(выражение)

Псевдокласс :nth-last-child() выполняет те же действия что и :nth-child() за исключением того, что отсчет элементов в родителе вёдется не с начала, а с конца. В псведоклассе :nth-last-child(выражение) в качестве выражения можно использовать те же вещи, т.е. число, формулу, или ключевые слова odd или even

По расположению среди соседей с учётом типа элемента

В CSS имеются псевдоклассы аналогичные :first-child, :last-child и т.д. Они отличаются от них только тем, что выполняют это с учётом типа элемента.

Список псевдоклассов, предназначенных для этого: :first-of-type, :last-of-type, :only-of-type, :nth-of-type(выражение), :nth-last-of-type(выражение).

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

Данный псевдокласс очень похож на :first-child, но в отличие от него он выбирает не просто первый элемент, а первый элемент своего родителя с учётом его типа.

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

p:first-of-type {
  ...
}

HTML:

<section>
  <h2>...</h2>
  <p>...</p> <!-- будет выбран этот элемент -->
  <p>...</p>  
</section>
<section>
  <h2>...</h2>
  <p>...</p> <!-- будет выбран этот элемент -->
  <p>...</p>  
</section>

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

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

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

Пример записи:

li:last-of-type {
  ...
}  

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

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

Пример:

p:only-of-type {
  ...
}

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

Псевдокласс :nth-of-type(выражение)

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

Псевдокласс :nth-of-type(выражение) похож на :nth-child(выражение) с разницей лишь а том, что он учитывает тип элемента. В качестве выражения также можно использовать число, формулу или ключевые слова odd или even. Отсчёт элементов в родителе начинается с 1.

Например:

<section>
  <h2>...</h2>
  <p>...</p> <!-- Селектор p:nth-child(2) выберет этот элемент -->
  <p>...</p> <!-- Селектор p:nth-of-type(2) выберет этот элемент -->
</section>

Селектор p:nth-child(2) выберет второй по счёту элемент, если он является p, а селектор p:nth-of-type(2) веберет второй дочерний элемент p среди дочерних p.

Псевдокласс :nth-last-of-type(выражение)

Псевдокласс :nth-last-of-type(выражение) аналогичен классу :nth-of-type(выражение) с разницей в том, что отсчёт дочерних элементов ведётся с конца.

Псевдоклассы для элементов форм

К этой группе можно отнести псевдоклассы :enabled, :disabled и :checked.

Псевдоклассы этой группы, а также :hover, :active и :focus ещё называют событийными селекторами, т.к. они позволяют применить стили при наступлении определённых событий.

Псевдокласс :checked

Псевдокласс :checked предназначен для выбора элементов radio, checkbox и option внутри select, которые находятся во включенном состоянии.

Пример:

<div class="form-group">
  <input type="checkbox" id="answer-1">
  <label for="answer-1">Я знаю что такое :checked</label>
</div>  

CSS:

input:checked + label {
  background-color: yellow;
}  

В этом примере фон элемента label при отмеченном checkbox выделяется цветом. Выбор включенного чекбокса выполняется с помощью псевдокласса :checked.

Псевдокласс :enabled

Псевдокласс :enabled предназначен для выбора включенных элементов формы, с которыми пользователь может взаимодействовать, например, нажать на него или внести текст.

Пример, в котором установим для всех включенных элементов input фон:

input:enabled {
  background-color: yellow;
}  

Псевдокласс :disabled

Элементы формы могут кроме включенного состояния находиться ещё в отключенном.

Псевдокласс :disabled предназначен для выбора отключенных элементов формы, т.е. элементов с которыми пользователь в данный момент не может взаимодействовать.

Например, выберем все отключенные элементы input:

input:disabled {
  ...
}

Остальные псевдоклассы

Псевдокласс :not(селектор)

Псевдокласс :not() предназначен для выбора элементов, которые не содержат указанный селектор.

Например:

/* Селектор .aside > div:not(:first-child) выберет все элементы div кроме первого непосредственно расположенные в .aside */
.aside > div:not(:first-child) { ... }

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

/* такие конструкция работать не будет */
:not(:not(...)) { ... }
div:not(.alert.alert-warning) { ... }
.item:not(::before) { ... }
.slider .slider__item:not(.active img) { ... }
td:not(.row + td) { ... }

При необходимости можно использовать несколько псевдоклассов :not().

Например:

/* применим стили ко всем элементам div, расположенных непосредственно в .message, за исключением .alert-warning и .alert-danger */
.message > div:not(.alert-warning):not(.alert-danger) { ... }

Пример CSS селектора для выбора элементов, которые не содержат некоторый класс:

// этот селектор выберет все элементы p, которые не содержат класс alert
p:not(.alert) {
  ...
}

Псевдокласс :empty

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

Пример:

div:empty {
  ...
}

Селектор div:empty выберет все пустые элементы div на странице.

Псевдокласс :root

Псевдокласс :root предназначен для выбора корневого элемента документа. В HTML документе данным элементом является <html>. В отличие от селектора по тегу html данный псевдокласс имеет более высокий приоритет.

Применять :root можно например для объявления CSS переменных:

:root {
  --text-info: hotpink;
  --text-warning: hotpink;
  --aside-padding: 10px 15px;
}

Псевдокласс :target

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

Например:

<h2 id="header-1">...</h2>
<h2 id="header-2">...</h2>

CSS-правило:

:target {
  color: red;
}

В этом примере стили будут применены к элементу с id="header-1", если хэш URL страницы будет равен #header-1. Если же хэш будет равен #header-2, то псевдокласс :target соответственно выберет элемент с id="header-2" и стили уже будут применены к нему.

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

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

Синтаксис: селектор1, селектор2, …

Пример задания правила для всех элементов h3 и h4 на странице:

/* селектор h3, h4 выберет все элементы на странице, имеющих тег h3 и h4 */
h3, h4 {
  font-size: 20px;
  margin-top: 15px;
  margin-bottom: 10px;
}

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

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

Пример селектора для выбора элементов, которые имеют одновременно два класса:

.modal.open {
  ...
}  

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

.btn[data-toggle="collapse"]:first-child { ... }

Селекторы отношений

В HTML документе каждый элемент всегда связан с другими элементами.

Виды отношений между HTML элементами:

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

Более наглядно про отношения элементов приведено на рисунке. На этом рисунке отношения рассмотрены относительно элемента выделенного синим цветом.

В CSS имеется 4 вида селекторов отношений.

Первые два из них X Y и X > Y относятся к вложенным селекторам. Они предназначены для поиска элементов в зависимости от их нахождения внутри других.

Остальные два X + Y и X ~ Y являются CSS селекторами для выбора соседних элементов.

Эти селекторы называют составными или комбинацией селекторов. Так как они на самом деле состоят из нескольких селекторов, разделённых между собой с помощью специальных символов (комбинаторов). Всего различают 4 символа: пробел, знак > (больше), знак + и ~ (тильда).

Селектор X Y (для выбора вложенных или дочерних элементов)

Селектор X Y (предок потомки) предназначен для выбора элементов Y, находящихся в X.

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

Селекторы X Y называют контекстными или вложенными.

Например, селектор дочерних элементов div p выберет все элементы p, расположенные в div.

Селектор X > Y

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

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

Например, комбинация селекторов li > ul выберет все элементы ul, которые непосредственно расположены в li.

Селектор X + Y

Селектор X + Y предназначен для выбора элементов Y, каждый из которых расположен сразу же после X. Элементы определяемым селектором X и Y должны находиться на одном уровне вложенности, т.е. быть по отношению друг к другу соседями (сиблингами).

Например, комбинация селекторов input + label выберет все элементы label, которые расположены сразу же за элементом input, и являющиеся друг по отношению к другу соседями (сиблингами).

Селектор X ~ Y

Селектор X ~ Y предназначен для выбора элементов Y, которые расположены после X. При этом элементы, определяемые селектором X и Y, должны являться по отношению друг к другу соседями (сиблингами).

Например, p ~ span выберет все элементы span, расположенные после элемента p на том же уровне вложенности.

Приоритет селекторов

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

Специфичность селекторов удобно представлять в виде 4 чисел: 0,0,0,0.

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

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

Как считать эти цифры? Каждый селектор в зависимости от типа имеет вес:

• универсальный селектор (не добавляет вес) – 0,0,0,0;
• селекторы по тегу, псевдоэлемент добавляют единичку к четвёртой цифре – 0,0,0,1;
• селекторы по классу и по атрибуту, псевдоклассы добавляют единичку ко третьей цифре – 0,0,1,0;
• селектор по идентификатору добавляют единичку ко второй цифре – 0,1,0,0;

Стили, расположенные в атрибуте style элемента, являются более специфичными по сравнению с селекторами. Вес этих стилей определяется единицей в первой цифре – 1,0,0,0.

Например:

• * – 0,0,0,0;
• li – 0,0,0,1;
• li::before – 0,0,0,2;
• ul > li – 0,0,0,2;
• div input+label – 0,0,0,3;
• h1 + div[data-target] – 0,0,1,2;
• .btn.show – 0,0,2,0;
• ul li a.item – 0,0,1,3;
• #aside div.show – 0,1,1,1;
• style="..." – 1,0,0,0;

Повысить важность определённого CSS свойства можно с помощью ключевого слова !important. В этом случае будет использоваться именно данное CSS-свойство.

Например:

<div class="alert-warning" style="background-color: #ffc107;"> ... </div>

В CSS:

.alert-warning {
  background-color: #ffa000 !important;
}

В этом примере элементу будет установлен тот фон к которому добавлено слово !important. !important перебивает любой вес.

Интересный случай, когда нужно определить какое значение CSS-свойства будет применено к элементу, если !important добавлено к нескольким из них.

В этом случае будет применено то значение CSS-свойства c !important у которого больше вес селектора.

К примеру, если добавить !important к CSS-свойству расположенному в style, то получим максимальную возможную специфичность, которую уже никак не перебьёшь.

Например:

<p id="message" style="font-size: 20px !important;">...</p>

CSS:

p#message {
  font-size: 16px !important;
}

В этом примере к элементу #message будет применено CSS-свойство font-size со значением 20px, т.к. хоть у каждого из них имеется состояние !importants, но специфичность style (1,0,0,0) больше чем у селектора p#message (0,1,0,1).

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

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