Что такое CSS-селекторы?
CSS-селекторы - это специальные выражения описанные с помощью CSS (каскадные таблицы стилей), которые задают правила для браузера о применении этих стилей для HTML-элементов внутри блока.
На первый взгляд вам может показаться, что определение CSS-селекторов сложное и непонятное. Но не волнуйтесь, на самом деле на практике все намного проще, чем кажется. И давайте сейчас на простых примерах рассмотрим что такое CSS-селекторы.
Внимание! Весь код в примерах отредактирован на сервисе C D E P E N.
Чтобы получить визуальную информацию — нажмите в редакторе на вкладку Result.
Универсальный CSS-селектор (* - звездочка)
С помощью универсального CSS-селектора (* - звездочка) вы можете задавать правила какие CSS-стили применять сразу ко всем HTML тегам.
Пример кода, как задать с помощью универсального CSS-селектора (* - звездочка) стили для всех HTML-элементов. Посмотрите пример:
В итоге, ко всем HTML-тегам на странице, включая h1, span, div и другим применятся CSS-стили: размер шрифта 24px, цвет текста красный.
Универсальный CSS-селектор используется достаточно часто при создании верстки сайтов и вот почему. Дело в том, что пользователи используют различные браузеры: Google Chrome, Mozilla Firefox, Safari, Opera, Edge, различные мобильные браузеры и даже Internet Explorer старых версий. И каждый из браузеров может задавать свои CSS-стили для HTML-элементов по умолчанию. И та же HTML-форма будет выглядеть в разных браузерах по-разному.
И для того, чтобы ваш веб-сайт соответствовал макету дизайна сайта, обычно используют сброс стандартных стилей (reset css), которые задают браузеры. Reset CSS представляет набор CSS-стилей, который подключается к HTML-странице, и в нем прописаны правила отображения для всевозможных HTML-элементов.
Если вы не знаете как подключить внешний файл с CSS-стилями к HTML-странице, посмотрите это видео на YouTube.
При применении Reset CSS, или Normalize CSS, HTML-элементы выглядит примерно одинаково в большинстве браузеров.
CSS-селекторы по классу
С помощью данного css-селектора вы можете задавать стили для HTML элементов у которых установлен тот или иной class.
Простой пример CSS-селектора по классу:
Запись CSS-стилей через точку "." и без пробелов
Когда вы задаете CSS-стили через точку "." и без пробелов (как в примере ниже) - это обозначает, что CSS-стили применятся ко всем тегам <div>, у кого установлен класс .color. При этом, даже если у других html-элементов установлен class с именем .color, но этот html-элемент не является <div>, стили к данному элементу не применятся и элемент <span> с классом color не выделяется красным цветом.
Посмотрите пример:
А запись в виде div.color.text-color, когда без пробелов описывается несколько классов, обозначает, что стили применятся только к <div> у которого сразу два класса - .color и .text-color, и не применяются стили к <div> с одним классом - .color.
Посмотрите пример:
Запись CSS-стилей через запятую ","
Если вы перечисляете CSS-стили через запятую, например так: "span, li" - это обозначает, что CSS-стили будут применены и к HTML-элементу <li> и к <span> одновременно.
Посмотрите пример:
Запись CSS-стилей через пробел (space)
Так с помощью CSS-селекторов, когда вы указываете в CSS-стилях элементы через пробел, вы можете применить стили к html-элементам, которые находятся внутри этих html-элементов вне зависимости от вложенности.
В примере ниже показано, что css-стили, при записи через пробел ul li зададут фоновый цвет всем элементам <li> только внутри тега <ul>:
Еще один пример для лучшего понимания как задать CSS-стили с помощью CSS-селекторов, когда вы пишете стили через пробел. Мы можем задать внутри <ul> всем тегам <strong>, независимо на каком уровне вложенности находится <strong>, фоновый цвет "yellow":
Также можно писать вместо названия самого HTML-тега, название класса и CSS-стили будут применены внутри элемента <ul> для элемента с классом .yellow и не будут зависеть от вложенности. При этом данные стили не применятся для <span> с классом .yellow, так как этот <span> находится за пределами тега <ul>:
Запись CSS-стилей через знак больше «>»
При использовании комбинатора со знаком больше (>), CSS-стили задаются только для тех HTML-элементов, которые являются дочерними по отношению к задаваемому HTML-элементу.
Лучше понять как работает комбинатор “>” вам поможет пример.
Этот стиль применится только для первого потомка (child), но не будет работать для последующих:
Эти стили применятся для strong, ввиду того, что strong - прямой потомок <span>:
Запись CSS-стилей через знак «~»
С помощью знака «~» можно выбирать все HTML-элементы, которые являются потомками указанного элемента.
Пример как с помощью записи CSS-стилей со знаком «~» выделить все HTML-элементы <li> после <li> с классом “color”:
Запись CSS-стилей через знак плюс «+»
Если с помощью записи CSS-стилей со знаком «~» можно выбирать все HTML-элементы, которые являются потомками(child) указанного элемента, то с помощью записи плюс «+» можно выбрать только один HTML-элемент.
И вот простой пример:
Запись CSS-стилей для HTML-элемента по атрибуту
Имея название HTML-атрибута, мы можем задавать стили для данного HTML-элемента. Ярким примером может служить <input> и мы можем задавать CSS-стили исходя из атрибута.
Например, у нас есть какая-то html-форма, и мы хотим задать разные CSS-стили для <input> с разными type: text и password. Когда мы будем печатать текст в <input> с типом text мы хотим задать цвет текста "blue", а для <input> с типом password мы хотим задать цвет текста "red". И с помощью CSS-селекторов по атрибуту мы можем это сделать:
Для HTML-элементов можно задавать атрибуты, которые мы можем и сами придумать. Атрибуты задаются для различных целей, когда нужно запрограммировать определенное поведение. И мы им также может задавать CSS-стили:
Заключение:
Пользоваться CSS-селекторами достаточно просто и самое главное - это практика, тогда вы все очень быстро запомните!
Также рекомендую подписаться на , где периодически появляются полезные материалы для обучения верстке сайтов и программированию.
