CSS-селекторы: Способы задавать CSS-стили для HTML-элементов
Всем привет, с вами Сергей Никонов и в этой статье я расскажу про CSS-селекторы и как с помощью них задавать CSS-стили для вашего сайта. Мы рассмотрим различные способы и правила, как с помощью CSS-селекторов задавать стили для HTML-страницы.
Это один из уроков курса HTML/CSS Advanced и если вы хотите научиться верстать веб-сайты на профессиональном уровене, я рекомендую проходить этот курс на сайте FructCode с интерактивными упражнениями для закрепления ваших знаний полученных из курса верстки сайтов.
Только на сайте FructCode вы можете найти актуальных версии моих курсов!
Содержание
Что такое CSS-селекторы (CSS Selectors)
CSS-селекторы — это специальные выражения описанные с помощью CSS (каскадные таблицы стилей), которые задают правила, как браузеру применять CSS-стили для HTML-элементов, которые определяются внутри блока CSS-стилей.
На первый взгляд вам может показаться, что определение CSS-селекторов сложное и непонятное. Но не волнуйтесь, на самом деле на практике все намного проще, чем кажется. И давайте сейчас на простых примерах рассмотрим что такое CSS-селекторы.
Видео Что такое CSS-селекторы: Способы задавать стили для HTML-элементов
Кстати, не забудь подписаться на наш YouTube канал FructCode, где вы можете найти много полезных обучающих видео о верстке сайтов.
Универсальный CSS-селектор * (звездочка)
С помощью универсального CSS-селектора * (звездочка) вы можете задавать правила какие CSS-стили применять сразу ко всем HTML тегам.
Пример кода, как задать с помощью универсального CSS-селектора * (звездочка) стили для всех HTML-элементов.
В итоге, ко всем HTML-тегам на странице, включая h1, span, div и другим применятся CSS-стили: размер шрифта 30px, цвет текста красный.
Универсальный CSS-селектор используется достаточно частно при создании верстки сайтов и вот почему. Дело в том, что пользователи используют различные браузеры: Google Chrome, Mozilla Firefox, Safari, Opera, Edge, различные мобильные браузеры и даже Internet Explorer старых версий. И каждый из браузеров может задавать свои CSS-стили для HTML-элементов по умолчанию. И та же HTML-форма будет выглядеть в разных браузерах по-разному.
И для того, чтобы ваш веб-сайт соответствовал макету дизайна сайта, обычно используют сброс стандартных стилей (reset css), которые задают браузеры. Reset CSS представляет набор CSS-стилей, который подключается к HTML-странице, в котором прописаны правила отображения для всевозможных HTML-элементов.
При применении Reset CSS или Normalize CSS, HTML-элементы выглядит примерно одинаково в большинстве браузеров.
CSS-селекторы по классу (Class selectors)
С помощью данного css-селектора вы можете задавать стили для HTML элементов у которых установлен тот или иной class.
Простой пример CSS-селектора по классу:
Запись CSS-стилей через точку «.» и без пробелов
Когда вы задаете CSS-стили через точку «.» и без пробелов (как в примере ниже) — это обозначает, что CSS-стили применятся ко всем тегам <div>, у кого установлен класс .color. При этом, даже если у других html-элементов установлен class с именем .color, но этот html-элемент не является <div>, стили к данному элементу не применятся и элемент <span> с классом color не будет выделятся красным цветом.
А запись в виде div.color.text-color, когда без пробелов описывается несколько классов, обозначает, что стили применятся только к <div> который имеет сразу два класса .color и .color-text и не применятся стили к <div> к которому присвоен только один class с именем .color.
Запись CSS-стилей через запятую «,»
Если вы перечисляете CSS-стили через запятую, например так: «span, li» — это обозначает, что CSS-стили будут применены и к HTML-элементу <li> и к <span> одновременно.
Запись CSS-стилей через пробел (space)
А так, с помощью CSS-селекторов (комбинатор потомков или descendant combinator), когда вы указываете в CSS-стилях элементы через пробел, вы можете применить стили к html-элементам, которые находятся внутри этих html-элементов вне зависимости от вложенности.
В примере ниже показано, что css-стили, при записи через пробел ul li зададут фоновый цвет всем элементам <li> только внутри тега <ul>:
Еще один пример для лучшего понимания как задать CSS-стили с помощью CSS-селекторов, когда вы пишите стили через пробел. Мы можем задать внутри <ul> всем тегам <strong>, независимо на каком уровне вложенности находится <strong>, фоновый цвет «gray»:
Также можно писать вместо названия самого HTML-тега, название класса и CSS-стили будут применены внутри элемента <ul> для элемента с классом .gray и не будут зависеть от вложенности. При этом данные стили не применятся для <span> с классом .gray, так как этот <span> находится за пределами тега <ul>:
Запись CSS-стилей через знак больше «>»
При использовании комбинатора со знаком больше (>), CSS-стили задаются только для тех HTML-элементов, которые являются дочерними по отношению к задаваемому HTML-элементу.
Лучше понять как работает комбинатор “>” вам поможет пример.
Этот стиль применится только для первого потомка (child), но не будет работать для последующих:
А эти стили применятся для strong, потому-что strong — это прямой потомок <span>:
Запись CSS-стилей через знак “
С помощью знака “
» можно выбирать все HTML-элементы, которые являются потомками указанного элемента.
Пример как с помощью записи CSS-стилей со знаком “
” выделить все HTML-элементы <li> после <li> с классом “color”:
Запись CSS-стилей через знак плюс «+»
Если c помощью записи CSS-стилей со знаком “
» можно выбирать все HTML-элементы, которые являются потомками(child) указанного элемента, то с помощью записи плюс “+” можно выбрать только один HTML-элемент.
И вот простой пример:
Запись CSS-стилей для HTML-элемента по атрибуту
Имея название HTML-атрибута, мы можем задавать стили для данного HTML-элемента. Ярким примером может служить <input> и мы можем задавать CSS-стили исходя из атрибута.
Например у нас есть какая-то html-форма и мы хотим задать разные CSS-стили для <input> с разными type: text и password. Когда мы будем печатать текст в <input> с типом text мы хотим задать цвет текста «green», а для <input> с типом password мы хотим задать цвет текста «magenta». И с помощью CSS-селекторов по атрибуту мы можем это сделать:
Для HTML-элементов можно задавать атрибуты, которые мы можем и сами придумать. Атрибуты задаются для различных целей, когда нужно запрограммировать определенное поведение. И мы им также может задавать CSS-стили:
Вывод
Пользоваться CSS-селекторами достаточно просто и самое главное — это практика, тогда вы все очень быстро запомните! Курс HTML/CSS Advanced содержит в себе большое количество интерактивных упражнений, выполняя которые, вы будете быстрее запоминать пройденный материал.
Также рекомендуем подписаться на наш YouTube канал FructCode, где переодически появляются полезные материалы для обучения верстке сайтов и программированию.
Значение слова «селектор»
СЕЛЕ́КТОР, -а, м. Электромеханическое устройство для приема сигналов вызова в избирательной телефонной связи. — Я привык, чтобы у меня вот здесь — стоял селектор. Я должен все время слышать трассу и иметь возможность разговаривать с ней в любую минуту. Ажаев, Далеко от Москвы.
[От лат. selector — сортировщик]
Источник (печатная версия): Словарь русского языка: В 4-х т. / РАН, Ин-т лингвистич. исследований; Под ред. А. П. Евгеньевой. — 4-е изд., стер. — М.: Рус. яз.; Полиграфресурсы, 1999; (электронная версия): Фундаментальная электронная библиотека
- Селектор (англ. selector) — число, хранящееся в сегментном регистре; это 16-битная структура данных, которая является идентификатором сегмента. Селектор указывает не на сам сегмент в памяти, а на его дескриптор, в таблице дескрипторов… Селектор «живёт» в сегментном регистре (CS, DS, ES, FS, GS, SS).
В реальном режиме содержимое каждого сегментного регистра представляет собой номер параграфа — 16-байтового участка памяти, выровненного на границу 16 байт.
В защищённом режиме каждый сегментный регистр делится на три части, как показано ниже:
Бит TI в этом случае указывает, какая таблица дескрипторов должна использоваться (нуль соответствует глобальной таблице дескрипторов, единица — локальной таблице дескрипторов).
селе́ктор
1. техн. устройство для организации сеансов связи между несколькими участниками ◆ Министр засмеялся, велел связать его по селектору с Нодаром Мефодиевичем и коротко, но властно попросил закрыть дело великих певцов. Михаил Гиголашвили, «Чертово колесо», 2007 г. (цитата из НКРЯ)
2. комп. число, хранящееся в сегментном регистре и являющееся идентификатором сегмента
3. техн. устройства для выбора одного из режимов работы механизма
Делаем Карту слов лучше вместе
/>Привет! Меня зовут Лампобот, я компьютерная программа, которая помогает делать Карту слов. Я отлично умею считать, но пока плохо понимаю, как устроен ваш мир. Помоги мне разобраться!
Спасибо! Я стал чуточку лучше понимать мир эмоций.
Вопрос: ретейл — это что-то нейтральное, положительное или отрицательное?
Селекторы в CSS: что это такое, как они работают и какие бывают
Большой гайд для тех, кто хочет правильно находить и выбирать элементы при вёрстке.
Иллюстрация: Оля Ежак для Skillbox Media
Удачный выбор селектора не только позволяет избежать ошибок в коде, но и упрощает вёрстку, поэтому желательно знать разновидности селекторов и хорошо в них ориентироваться. Эта статья будет полезна как новичкам, так и опытным фронтенд-разработчикам и верстальщикам, которые хотят освежить знания.
Содержание
Что такое селекторы в CSS
Селектор (от англ. select — выбирать) — это шаблон, который позволяет обратиться к элементу или группе элементов веб-страницы, чтобы применить к ним стили CSS. Его указывают перед блоком со свойствами:
В примере выше селектор указывает на тег <a> (гиперссылка). Так мы говорим браузеру отключить подчёркивание у всех ссылок на странице, устанавливая для свойства text-decoration значение none.
Подключим CSS-стили к следующему HTML-файлу:
Вот как она выглядит в браузере:
Есть ненумерованный список со ссылками, которые браузер по умолчанию выделяет синим цветом и подчёркивает. Если подключить стили, которые мы написали выше, то подчёркивание исчезнет:
CSS-селектор работает! Но это, конечно, далеко не единственный способ обращения к элементам.
О том, как подключить CSS к HTML, читайте в другой нашей статье.
Виды селекторов
Структура реальных проектов гораздо сложнее. Веб-страницы интернет-магазинов, корпоративных сайтов и блогов наполнены множеством вложенных и однотипных элементов — всем нужно задать уникальный дизайн. Если бы мы могли обращаться к ним только по названию, то даже с CSS веб оставался бы хранилищем скучного гипертекста.
К счастью, есть около 20 способов выбрать нужный элемент. Рассмотрим основные.
Универсальный селектор
Он применяет стили ко всем элементам страницы и обозначается символом * (звёздочка). С его помощью удобно сбрасывать отступы и задавать значение box‑sizing для всех блочных элементов:
Селектор по тегу (элементу)
Этот селектор CSS применяет стили ко всем элементам с одинаковым тегом. Например, для всех <div>, <h2>, <p> и так далее.
Мы уже познакомились с ним, когда убирали подчёркивание у ссылок:
Селектор по идентификатору (id)
Селектор по идентификатору обозначается символом # (решётка) и применяет стили к элементу, для которого задан атрибут id с соответствующим значением. При этом у элемента может быть только один id, и этот id должен быть уникальным в пределах веб-страницы.
Текст в блоке p с идентификатором intro окрасится в красный, а текст с идентификатором article_content выделится жирным и получит шрифт без засечек:
Селектор по классу (class)
CSS-селектор по классу выбирает элементы, для которых назначен атрибут class с соответствующим значением. При этом один элемент может принадлежать нескольким классам — в таком случае их перечисляют через пробел:
Абзац входит в классы plain_text и article. Значит, к нему применяются стили обоих классов:
Группа селекторов
CSS-селекторы можно сгруппировать, чтобы применить стили к нескольким группам и/или классам элементов. Для этого достаточно перечислить их через запятую:
Выбор элементов по отношению и расположению
Есть группа селекторов, которые позволяют выбрать элемент по его отношению к другим элементами (родитель — потомок) и по расположению в DOM (Document Object Model).
Выбрать всех потомков
Чтобы обратиться ко всем потомкам В элемента A, независимо от уровня их вложенности, используют конструкцию A B (селекторы разделяют пробелом):
В примере выше мы устанавливаем всем изображениям внутри элемента figure значение нижних отступов 20 пикселей.
Выбрать потомков первого уровня
Если нужно применить CSS-стили к потомкам B элемента A только на первом уровне вложенности, то вместо пробела пишут символ >:
Здесь мы задали изображениям внутри контейнера с классом .container значение нижних отступов 40 пикселей.
Выбрать все следующие элементы
B выбирает все элементы B, которые идут после A. Обратите внимание: «идут после», а не вложены в него. Например, так мы задали цвет фона #f2f3f5 всем карточкам, которые идут после блока из класса .about_us:
Выбрать первый следующий элемент
Селектор A + B выбирает только первый элемент B, который следует за A:
В этом примере цвет фона #f2f3f5 установится только для той карточки, которая идёт сразу после .about_us.
CSS-селекторы по атрибуту
Ещё один полезный инструмент — селекторы по атрибуту. Они позволяют выбрать элемент по имени атрибута, его значению или части значения. Кратко расскажем обо всех.
[attr]
Применяет стили к элементам, для которых задан этот атрибут:
[attr=value]
Работает по имени и значению атрибута:
[attr^=value]
Находит элементы с заданным атрибутом, значение которого начинается с value:
[attr|=value]
Ищет по названию атрибута и значению, которое равно или начинается с value:
[attr$=value]
Применяет CSS-стили к элементам, у которых значение заданного атрибута оканчивается на value:
[attr*=value]
Селектор по названию атрибута и значению, которое должно содержать value:
[attr
Этот шаблон выбирает элементы с атрибутом attr, значение которого состоит из нескольких слов, разделённых пробелом, одно из которых — value:
Псевдоклассы и псевдоэлементы
Псевдокласс выбирает элементы, находящиеся в определённом состоянии или положении в иерархии DOM.
Вот несколько примеров таких состояний:
- на кнопку наведён курсор мыши;
- пользователь перешёл или не перешёл по ссылке;
- курсор установлен на поле ввода.
Например, так с помощью CSS можно увеличить размер ссылок, на которые пользователь навёл курсор:
Вот как это выглядит в браузере:
А в следующем примере мы добавляем нижний отступ последнему параграфу-потомку контейнера («Параграф 3»).
Если зайти в DevTools, то можно увидеть, что под третьим элементом p появилось поле margin (подсвечивается бежевым цветом):
Вот список основных псевдоклассов:
| Название | Состояние элемента |
|---|---|
| :hover | Наведён курсор |
| :focus | Элемент находится в фокусе (например, по нему кликнули мышью или его выбрали клавишей Tab) |
| :visited | Ссылка, которая была посещена |
| :active | Активный элемент (в промежутке времени между нажатием и отпусканием кнопки мыши) |
| :checked | Элементы radio, checkbox или option, которые были выбраны |
| :first-child | Первый потомок элемента |
| :last-child | Последний потомок элемента |
| :nth-child() | Каждый n-й потомок — число n передаётся в качестве аргумента |
| :last-nth-child() | Последние n потомков — число n передаётся в качестве аргумента |
| :read-write | Элементы, доступные для редактирования |
Посмотреть другие псевдоклассы можно на сайте Mozilla.
Вес CSS-селектора, или специфичность
Для одного и того же элемента веб-страницы можно прописать сколько угодно стилей. Если в разных местах CSS-файла какому-то его свойству заданы разные значения, то браузер должен выбрать одно из них.
Обычно подключается правило, которое определено последним, но так происходит не всегда. Дело в том, что одни селекторы обладают более высокой специфичностью, чем другие.
Специфичность — это показатель, по которому браузер определяет, какие стили применить к элементу. Её можно представить в виде четырёх чисел 0.0.0.0, где каждый разряд — это вес, определяемый специальными правилами.
Вот эти правила:
- Наивысший приоритет — у стилей, прописанных в атрибуте style (1.0.0.0).
- На втором месте — селекторы по идентификатору (0.1.0.0).
- Затем идут три равноправные группы: селекторы по классу, атрибуту и псевдоклассы (0.0.1.0).
- На четвёртом месте — селекторы по тегу и псевдоэлементы (0.0.0.1).
- Комбинаторы
Чтобы определить самый «тяжёлый» селектор, браузер сначала взвешивает каждый, а затем сравнивает их поразрядно.
Попробуем порассуждать как браузер. Допустим, на странице есть элемент, на который указывают два CSS-селектора:
Рассчитаем их вес:
- Класс .container добавляет 1 в третий разряд, а div и ul — по единице в четвёртый. Результат: 0.0.1.2.
- Идентификатор our_team добавляет 1 во второй разряд, тег div — 1 в четвёртый разряд, а класс .developers — 1 в третий. Получаем 0.1.1.1.
Браузер применит стили селектора #our_team div.developers, потому что он указывает на идентификатор (см. правило №2 в списке).
А если бы исследуемый элемент обладал атрибутом style, то и считать ничего бы не пришлось. Ведь, как мы уже знаем, style обладает наивысшим приоритетом:
А теперь секретный приём. Вы можете перебить любое правило, если добавите к нему ключевое слово !important. В таком случае стили намертво приклеятся к элементу:
После этого изменить начертание текста в ссылках можно будет, только если использовать !important в более специфическом селекторе. Например, таком:
Опытные разработчики не рекомендуют использовать !important, потому что это усложняет поддержку кода и ломает каскад. Поэтому просто помните о его существовании во время дебаггинга: возможно, это словечко спряталось где-то в документе styles.css.
Итог
CSS предоставляет большое количество селекторов для удобной стилизации веб-страниц. Запомните их и используйте всё разнообразие, чтобы писать понятный и легко поддерживаемый код. А закрепить знания можно в замечательной браузерной игре CSS Dinner.
Что такое «селектор»?
Селекторами называются имена стилей, в которых указаны параметры форматирования.
В примере используется селектор с именем title для которого задано определение стиля. Определение состоит из свойства и его значения разделенных двоеточием. Определения разделяются точкой с запятой. В самом конце этот символ можно опустить.
Результат применения селектора, использованного в примере.
Это обычный жирный текст.
Это жирный текст с классом title.
Селекторы делятся на несколько типов: селекторы тегов, классы и идентификаторы (ID).
Селекторы тегов используются для определения стилей встроенных тегов HTML.
Классы применяются для создания стилей, которые можно применять к любому тегу HTML, для создания выделений или изменения стиля блока текста.
Идентификаторы (ID) обычно используются совместно со скриптами, чтобы можно было управлять параметрами стиля динамически, как правило для