Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>23 янв 2023</li>

3 <li>0</li>

4 </ul>Большой гайд для тех, кто хочет правильно находить и выбирать элементы при вёрстке.

5 Иллюстрация: Оля Ежак для Skillbox Media

6 Пишет об истории IT, разработке и советской кибернетике. Знает Python, JavaScript и немного C++, но предпочитает писать на русском.

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

8 Содержание

9 <ul><li><a>Что такое CSS-селекторы</a></li>

10 <li><a>Основные виды селекторов</a></li>

11 <li><a>Селекторы отношений</a></li>

12 <li><a>Селекторы по атрибуту</a></li>

13 <li><a>Немного о псевдоклассах</a></li>

14 <li><a>Как определить приоритет селектора</a></li>

15 </ul>Селектор(от англ. select - выбирать) - это шаблон, который позволяет обратиться к элементу или группе элементов веб-страницы, чтобы применить к ним стили CSS. Его указывают перед блоком со свойствами:

16 a { text-decoration: none; }В примере выше селектор указывает на тег <a> (гиперссылка). Так мы говорим браузеру отключить подчёркивание увсех ссылокна странице, устанавливая для свойства text-decoration значение none.

17 Подключим CSS-стили к следующему HTML-файлу:

18 Содержание статьи: <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>Вот как она выглядит в браузере:

19 Страница в браузереСкриншот: Skillbox MediaЕсть ненумерованный список со ссылками, которые браузер по умолчанию выделяет синим цветом и подчёркивает. Если подключить стили, которые мы написали выше, то подчёркивание исчезнет:

20 Та же страница, но ссылки не подчёркнутыСкриншот: Skillbox MediaCSS-селектор работает! Но это, конечно, далеко не единственный способ обращения к элементам.

21 О том, как подключить CSS к HTML, читайте в другой<a>нашей статье</a>.

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

23 К счастью, есть около 20 способов выбрать нужный элемент. Рассмотрим основные.

24 Он применяет стили ко всем элементам страницы и обозначается символом * (звёздочка). С его помощью удобно сбрасывать отступы и задавать значение box‑sizing для всех блочных элементов:

25 * { margin: 0; box-sizing: border-box; }Этот селектор CSS применяет стили ко всем элементам с одинаковым тегом. Например, для всех <div>, <h2>, и так далее.

26 Мы уже познакомились с ним, когда убирали подчёркивание у ссылок:

27 a { text-decoration: none; }Селектор по идентификатору обозначается символом # (решётка) и применяет стили к элементу, для которого задан атрибут id с соответствующим значением. При этом у элемента может быть только один id, и этот id должен быть уникальным в пределах веб-страницы.

28 Сегодня мы расскажем вам об Emmet. В этой статье вы узнаете:CSS-код:

29 #intro{ color: red; font-weight: bold; } #article_content{ font-family: sans-serif; font-weight: bold; }Текст в блоке p с идентификатором intro окрасится в красный, а текст с идентификатором article_content выделится жирным и получит шрифт без засечек:

30 Скриншот: Skillbox MediaCSS-селектор по классу выбирает элементы, для которых назначен атрибут class с соответствующим значением. При этом один элемент может принадлежать нескольким классам - в таком случае их перечисляют через пробел:

31 Сегодня мы расскажем вам про Emmet.Абзац входит в классы plain_text и article. Значит, к нему применяются стили обоих классов:

32 .plain_text{ font-size: 20px; } .article{ font-family: "Montserrat"; }CSS-селекторы можно сгруппировать, чтобы применить стили к нескольким группам и/или классам элементов. Для этого достаточно перечислить их через запятую:

33 .plain_text, p, h1, figure, div { margin-top: 0; margin-left: 0; }re>Есть группа селекторов, которые позволяют выбрать элемент по его отношению к другим элементами (родитель - потомок) и по расположению в DOM (Document Object Model).

34 Чтобы обратиться ко всем потомкам В элемента A, независимо от уровня их вложенности, используют конструкцию A B (селекторы разделяют пробелом):

35 figure img { margin-bottom: 20px; }В примере выше мы устанавливаемвсем изображениямвнутри элемента figure значение нижних отступов 20 пикселей.

36 Если нужно применить CSS-стили к потомкам B элемента A только на первом уровне вложенности, то вместо пробела пишут символ >:

37 .container > img { margin-bottom: 40px; }Здесь мы задали изображениям внутри контейнера с классом .container значение нижних отступов 40 пикселей.

38 Селектор A ~ B выбирает все элементы B, которые идут после A. Обратите внимание:"идут после", а не вложены в него. Например, так мы задали цвет фона #f2f3f5 всем карточкам, которые идут после блока из класса .about_us:

39 .about_us > .card { background-color: #f2f3f5; }Селектор A + B выбирает только первый элемент B, который следует за A:

40 .about_us + .card { background-color: #f2f3f5; }В этом примере цвет фона #f2f3f5 установится только для той карточки, которая идёт сразу после .about_us.

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

42 Применяет стили к элементам, для которых задан этот атрибут:

43 [title] { font-weight: bold; }Работает по имени и значению атрибута:

44 [title="what_is"] { font-weight: normal; }Находит элементы с заданным атрибутом, значение которого начинается с value:

45 [class^="form"] { background-color: #7aacba; }Ищет по названию атрибута и значению, которое равно или начинается с value:

46 [class|="form"] { border: 5px outset black; }Применяет CSS-стили к элементам, у которых значение заданного атрибута оканчивается на value:

47 [class$="primary"] { font-weight: bold; }Селектор по названию атрибута и значению, которое должно содержатьvalue:

48 [class$="control"] { padding: 15px; }Этот шаблон выбирает элементы с атрибутомattr,значение которого состоит из нескольких слов, разделённых пробелом, одно из которых -value:

49 [class$="control"] { padding: 15px; }Псевдоклассвыбирает элементы, находящиеся в определённом состоянии или положении в иерархии DOM.

50 Вот несколько примеров таких состояний:

51 <ul><li>на кнопку наведён курсор мыши;</li>

52 <li>пользователь перешёл или не перешёл по ссылке;</li>

53 <li>курсор установлен на поле ввода.</li>

54 </ul>Например, так с помощью CSS можно увеличить размер ссылок, на которые пользователь навёл курсор:

55 a:hover { font-size: 20px; }Вот как это выглядит в браузере:

56 Изображение: Skillbox MediaА в следующем примере мы добавляем нижний отступ последнему параграфу-потомку контейнера ("Параграф 3").

57 <div class="container"> Параграф 1 Параграф 2 Параграф 3 </div> Параграф 4 Параграф 5CSS-код:

58 .container p:last-child { margin-bottom: 30px; }Если зайти в <a>DevTools</a>, то можно увидеть, что под третьим элементом p появилось поле margin (подсвечивается бежевым цветом):

59 Скриншот: Skillbox MediaВот список основных псевдоклассов:

60 НазваниеСостояние элемента:hoverНаведён курсор:focusЭлемент находится в фокусе (например, по нему кликнули мышью или его выбрали клавишейTab):visitedСсылка, которая была посещена:activeАктивный элемент (в промежутке времени между нажатием и отпусканием кнопки мыши):checkedЭлементы radio, checkbox или option, которые были выбраны:first-childПервый потомок элемента:last-childПоследний потомок элемента:nth-child()Каждый n-й потомок - число n передаётся в качестве аргумента:last-nth-child()Последние n потомков - число n передаётся в качестве аргумента:read-writeЭлементы, доступные для редактированияПосмотреть другие псевдоклассы можно<a>на сайте Mozilla</a>.

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

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

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

64 Вот эти правила:

65 <ul><li>Наивысший приоритет - у стилей, прописанных в атрибуте style (1.0.0.0).</li>

66 <li>На втором месте - селекторы по идентификатору (0.1.0.0).</li>

67 <li>Затем идут три равноправные группы: селекторы по классу, атрибуту и псевдоклассы (0.0.1.0).</li>

68 <li>На четвёртом месте - селекторы по тегу и псевдоэлементы (0.0.0.1).</li>

69 <li>Комбинаторы ~, >, + и универсальный селектор * веса не добавляют.</li>

70 <li>Вес псевдоклассов :is(), :has() и :not() равен весу самого специфичного селектора внутри скобок.</li>

71 </ul>Чтобы определить самый "тяжёлый" селектор, браузер сначала взвешивает каждый, а затем сравнивает их поразрядно.

72 Попробуем порассуждать как браузер. Допустим, на странице есть элемент, на который указывают два CSS-селектора:

73 .container div ul {/**/} #our_team div.developers {/**/}Рассчитаем их вес:

74 <ul><li>Класс .container добавляет 1 в третий разряд, а div и ul - по единице в четвёртый. Результат: 0.0.1.2.</li>

75 <li>Идентификатор our_team добавляет 1 во второй разряд, тег div - 1 в четвёртый разряд, а класс .developers - 1 в третий. Получаем 0.1.1.1.</li>

76 </ul>Браузер применит стили селектора #our_team div.developers, потому что он указывает на идентификатор (см. правило №2 в списке).

77 А если бы исследуемый элемент обладал атрибутом style, то и считать ничего бы не пришлось. Ведь, как мы уже знаем, style обладает наивысшим приоритетом:

78 <a style="color: red;" class="article media code" id="definition">Программист - это...А теперь секретный приём. Вы можете перебить любое правило, если добавите к нему ключевое слово !important. В таком случае стили намертво приклеятся к элементу:

79 a { font-weight: bold !important; }После этого изменить начертание текста в ссылках можно будет, только если использовать !important в более специфическом селекторе. Например, таком:

80 #stronger a { font-weight: normal !important; }Опытные разработчики не рекомендуют использовать !important,потому что это усложняет поддержку кода и ломает каскад. Поэтому просто помните о его существовании во время дебаггинга: возможно, это словечко спряталось где-то в документе styles.css.

81 CSS предоставляет большое количество селекторов для удобной стилизации веб-страниц. Запомните их и используйте всё разнообразие, чтобы писать понятный и легко поддерживаемый код. А закрепить знания можно в замечательной браузерной игре<a>CSS Dinner</a>.

82 <a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>