Войти
Регистрация

Селекторы в CSS

Селекторы CSS

Продолжаем изучать основы CSS и в этой статье тема селекторов, то, что задает тот самый стиль для элементов сайта.

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

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

Давайте посмотрим пример простого CSS-правила:

h1 {
  color:#FF0000;
}

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

И так, какие бывают селекторы в CSS:

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

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

* {
  font-family:arial;
  font-size:14px;
}

Задали шрифт arial и его размер 14 пикселей для всех элементов на странице.

1. Селектор тегов

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

p {
  color:red;
  font-size:14px;
}

Здесь мы всем тегам <p> на всех страницах сайта задали красный цвет и размер шрифта 14 пикселей. Можете вместо тега <p> указать <div>, например, тогда все содержимое этих тегов примет эти свойства стиля.

2. Селектор идентификатора (id)

Любому элементу сайта можно задать уникальный идентификатор(id), чтобы изменить его стиль. Например, есть у нас несколько абзацев:

<p id="text1">Первый абзац с идентификатором<p>
<p id="text2">Второй абзац с идентификатором<p>
<p id="text3">Третий абзац с идентификатором<p>

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

Давайте зададим красный цвет и шрифт размером в 14px "Второму абзацу с идентификатором":

#text2 {
  color:red;
  font-size:14px;
}

Как видите, селектор id указывается со знаком #.

Если же у Вас на странице несколько элементов с атрибутом id, имеющим одинаковые значения, например text2, то это правило будет распространяться на все эти элементы. Но, как я написал выше, элементы с одинаковыми id лучше не создавать.

3. Селектор классов (class)

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

<p class="text1">Первый абзац с классом<p>
<p class="text2">Второй абзац с классом<p>
<p class="text3">Третий абзац с классом<p>
<p class="text3">Четвертый абзац с классом<p>

Из примера видно, что последние 2 абзаца с одинаковым классом. Мы можем применить правило и задать цвет и размер шрифта сразу к ним обоим:

.text3 {
  color:red;
  font-size:14px;
}

Оба абзаца стали красным цветом и размер шрифта у 14px.

Селектор класса указывается с точкой вначале.

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

4. Селектор параметров атрибута

Вспомните тему по созданию форм в HTML, я там описывал тег <input>, который мог принимать разные значения атрибута type: text, password, radio, checkbox и т.д.

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

<form>
  <input type="text" name="login">
  <input type="password" name="pass">
  <input type="email" name="email">
  <input type="submit" name="send" value="Отправить" >
</form>

Если мы воспользуемся селектором тега и зададим стиль для тега <input>, то этот стиль применится ко всем этим элементам. Но как нам прописать стиль для конкретного элемента формы?

Мы, конечно, можем добавить id или class элементу, но зачем нам лишний код, если есть параметр атрибута type?

Берем и пишем правило стиля, обращаясь к этому параметру:

input[type="submit"] {
  color:red;
  width:100px;
  height:40px;
}

Здесь мы обратились к тегу <input> с атрибутом type в значении submit.

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

5. Контекстный селектор

Здесь все достаточно предсказуемо. Контекстные селекторы используются повсюду.

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

<div>
  <p>Абзац с текстом</p>
</div>

Здесь как видите тег <p> вложен в тег <div> и чтобы этому тегу задать стиль напишем так:

div p {
  color:red;
  font-size:14px;
}

Т.е. если тег <p> вложен в тег <div>, то это правило стиля считается верным. Если тегов <p> будет несколько, то правило стиля применится ко всем тегам <p> внутри <div>

6. Дочерний селектор

Данный селектор вытекает из предыдущего. Что это значит?

Представьте, что внутри тега <div> с классом есть не только тег <p>, как в предыдущем примере, но и еще один тег <div>, в который вложено несколько тегов <p>. Запутались? Покажу.

<div class="block">
  <p>Абзац с текстом 1</p>
  <div>
     <p>Абзац с текстом 2</p>
     <p>Абзац с текстом 3</p>
  </div>
</div>

Если мы применим тут контекстный селектор и зададим красный цвет тегу <p>, то красным станут все абзацы: 1,2 и 3.

Чтобы применить стиль только к первому тегу <p> и не задеть те, что вложены внутри второго тега <div>, напишем правило:

.block > p {
  color:red;
  font-size:14px;
}

Таким образом, благодаря знаку >, который указывает на дочерние элементы, стиль применился для "Абзац с текстом 1", т.к. этот абзац является дочерним для <div> с классом block, а второй и третий абзац они уже дочерние для вложенного тега <div>

Еще хочу обратить Ваше внимание на такое понятие, как "Наследование". Это означает, что если мы зададим стиль какому-нибудь элементу сайта, например блоку <div>, то этот стиль примут и все вложенные в него элементы. Но это чаще происходит при указании текстовых стилей: шрифт и его размер шрифта, цвет текста. Поэтому, чтобы задать размер шрифта или его цвет всем абзацам и заголовкам внутри родительного тега достаточно прописать стиль только родителю.

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

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

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

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?