Css селектор это: Селекторы CSS — Изучение веб-разработки

Leave a Comment / Css / By /

CSS селекторы, свойства, значения

Каскадная таблица стилей состоит из CSS правил. Каждое CSS правило состоит из селектора и блока декларации.

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

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

Каждая декларация состоит из имени свойства и его значения, разделенных двоеточием.

Свойства – это ключевые слова, такие как color, font-weight или background-color, которым присвоены определенные значения:

body {
   font-size: 0.8em;
   color: navy;
}

В данном примере создается CSS селектор body, который соотносится с HTML тегом <body>. В этом селекторе определяется два свойства – font-size и color, которым присваиваются соответствующие значения.

Таким образом, если этот стиль подключить к HTML документу, то текст внутри элемента <body> (что на самом деле весь контент в основном окне браузера) будет отображаться шрифтом размером 0.8em и темно-синим цветом.

CSS селекторы можно разделить на пять категорий:

  • Простые селекторы (элементы отбираются по имени, идентификатору или классу)
  • Комбинированные селекторы (элементы отбираются по специфическим отношениям между ними)
  • Селекторы псевдоклассов (элементы отбираются по определенному состоянию)
  • Селекторы псевдоэлементов (отбирается и стилизуется часть элемента)
  • Селекторы атрибутов (элементы отбираются по атрибутам или значениям атрибутов)

CSS селектор элемента

Селектор элемента или HTML селектор — это простой селектор, который отбирает HTML элементы по их имени.

В следующем примере отбираются все существующие на странице элементы <p>. Их текст будет красного цвета и выровнен по центру:

p {
  text-align: center;
  color: red;
}

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

CSS селектор идентификатора

Селектор идентификатора для отбора заданного элемента использует атрибут id HTML элемента.

Идентификатор элемента уникален в пределах веб-страницы, таким образом селектор идентификатора используется для выбора одного уникального элемента!

Чтобы определить селектор идентификатора, нужно написать символ решетки (#) и имя идентификатора элемента.

В следующем примере определяются стили для HTML элемента с идентификатором:

#para1 {
  text-align: center;
  color: red;
}

Внимание! Имя идентификатора не может начинаться с цифры!

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

Селектор класса для отбора заданного элемента использует атрибут class HTML элемента.

Чтобы определить селектор класса, нужно написать символ точки (.) и имя класса элемента.

В следующем примере все HTML элементы с классом будут отображать текст красного цвета, который выровнен по центру:

.center {
  text-align: center;
  color: red;
}

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

В следующем примере только элементы <p> с классом будут отображать текст красного цвета, который выровнен по центру:

p.center {
  text-align: center;
  color: red;
}

Также, HTML элементы могут иметь больше одного класса.

В следующем примере элемент <p> будет принимать стили, соответствующие селекторам класса и:

<style>
p.center {
  text-align: center;
  color: red;
}
p.large {
  font-size: 300%;
}
</style>
<p>Этот параграф определен по двум классам.</p>

Внимание! Имя класса не может начинаться с цифры!

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

Универсальный селектор (*) отбирает абсолютно все HTML элементы на странице.

Следующее CSS правило окажет воздействие на каждый HTML элемент на странице:

* {
  text-align: center;
  color: red;
}

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

Группирование селекторов позволяет объединить одно и то же определение стиля для нескольких HTML элементов в одну декларацию.

Посмотрите на следующий код CSS (для элементов h2, h3 и p заданы одинаковые стили):

h2 {
  text-align: center;
  color: red;
}
h3 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}

Чтобы уменьшить количество кода, мы можем сгруппировать эти селекторы в одну декларацию.

Чтобы сгруппировать селекторы, нужно в головной части перечислить их через запятую.

В следующем примере мы группируем селекторы из предыдущего примера:

h2, h3, p {
  text-align: center;
  color: red;
}

Селекторы — Основы CSS — HTML Academy

Загрузка…
Через несколько секунд всё будет готово

  • index. html
  • style.css

HTML

<!DOCTYPE html> <html lang=»ru»> <head> <meta charset=»utf-8″> <title>Сайт начинающего верстальщика</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <header> <h2>Сайт начинающего верстальщика</h2> </header> <main> <img src=»img/raccoon.svg» alt=»Аватарка»> <nav> <h3>Записи в блоге</h3> <ul> <li><a href=»day-1.html»>День первый. Как я забыл покормить кота</a></li> <li><a href=»day-2.html»>День второй. Хочу быть верстальщиком</a></li> <li><a href=»day-3.html»>День третий. Мой кот на меня обиделся</a></li> <li><a href=»day-4.html»>День четвёртый. Как я чуть не заболел</a></li> <li><a href=»day-5.

html»>День пятый. Отдыхаю</a></li> <li><a href=»day-6.html»>День шестой. Как я ничего не понял</a></li> <li><a href=»day-7.html»>День седьмой. Кекс выдал мне задание</a></li> <li><a href=»day-8.html»>День восьмой. Очень серьёзный</a></li> <li><a href=»day-9.html»>День девятый. Точнее ночь</a></li> <li><a href=»day-10.html»>День десятый. Подведение итогов</a></li> <li><a href=»day-11.html»>День одиннадцатый. Без фанатизма</a></li> <li><a href=»day-12.html»>День двенадцатый. Все любят печенье</a></li> <li><a href=»day-13.html»>День тринадцатый. Нашёл статью</a></li> <li><a href=»day-14.html»>День четырнадцатый. Новый формат</a></li> <li><a href=»day-15.html»>День пятнадцатый.
Галерея селфи</a></li> </ul> </nav> <section> <p>Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл <a href=»https://htmlacademy.ru/courses»>тренажёры по HTML и CSS</a> и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.</p> <p>Моё первое задание — вести дневник и честно писать обо всех своих свершениях.</p> </section> <section> Раздел про навыки </section> </main> <footer> Подвал сайта </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: «Georgia», serif; color: #222222; } h2 { font-size: 36px; line-height: normal; } h3 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } /* Замените название селектора в правиле ниже */ selector { border-radius: 10px; } nav { margin-bottom: 30px; background-color: #4470c4; } /* Замените название селектора в правиле ниже */ selector { color: #ffffff; } ul { list-style: none; padding-left: 0; } footer { margin-top: 30px; }

Что в задании вам не понравилось?

Не работает проверка кодаЗадание слишком сложноеНепонятная теорияДругое (сейчас напишу)

Другое (сейчас напишу)

Спасибо! Мы скоро всё исправим)

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

ЗадачиВыполнено

  1. В CSS-правиле на 25 строке замените заглушку selector на селектор
    .avatar    ,
  2. а затем на 35 строке замените заглушку selector на селектор nav a (да, с пробелом, позже расскажем почему).

:is() — CSS: Каскадные таблицы стилей

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

Примечание: Первоначально названный :matches() (и :any() ), этот селектор был переименован в :is() в выпуске CSSWG #3258.

Псевдоэлементы недопустимы в списке селекторов для :is() .

Разница между :is() и :where()

Разница между ними в том, что :is() учитывает специфичность всего селектора (он принимает специфичность своего наиболее конкретного аргумента), тогда как :where() имеет значение специфичности 0. Это продемонстрировано в примере на справочной странице :where() .

Разбор прощающего селектора

Спецификация определяет :is() и :where() как принимающие прощающий список селекторов.

В CSS при использовании списка селекторов, если какой-либо из селекторов недействителен, весь список считается недействительным. При использовании :is() или :where() вместо того, чтобы весь список селекторов считался недействительным, если один из них не может быть проанализирован, неправильный или неподдерживаемый селектор будет игнорироваться, а будут использоваться другие.

: есть (: действительно,: не поддерживается) {
  /* … */
}

Будет правильно анализировать и соответствовать :valid даже в браузерах, которые не поддерживают :unsupported , тогда как:

 :valid,
:неподдерживаемый {
  /* … */
}

Будет игнорироваться в браузерах, которые не поддерживают :unsupported , даже если они поддерживают :valid .

Упрощение селекторов списка

Псевдокласс :is() может значительно упростить ваши селекторы CSS. Например, возьмите следующий CSS:

 /* Ненумерованные списки глубиной 3 (или более) используют квадрат */
ол ол ул,
ол ул ул,
ол меню ул,
ол дир ул,
ол ол меню,
ол уль меню,
ол меню меню,
ол дир меню,
ол ол дир,
ол уль дир,
ол меню директор,
ол дир дир,
ул ол ул,
ул ул ул,
ул меню ул,
ул дир ул,
ул ол меню,
ул уль меню,
ул меню меню,
уль дир меню,
ул ол дир,
ул уль дир,
ул меню директор,
ул дир дир,
меню ол ул,
меню ул ул,
меню меню ул,
меню дир ул,
меню ол меню,
меню ул меню,
меню меню меню,
меню реж меню,
меню ол дир,
меню ул дир,
меню меню реж,
меню дир дир,
дир ол ул,
дир ул ул,
дир меню ул,
дир дир ул,
дир ол меню,
дир уль меню,
меню меню дир,
дир дир меню,
дир ол дир,
дир уль дир,
дир меню дир,
дир дир дир {
  тип стиля списка: квадратный;
}

Вы можете заменить его на:

 /* 3-глубокие (или более) неупорядоченные списки используют квадрат */
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  тип стиля списка: квадратный;
}

Упрощение селекторов разделов

Псевдокласс :is() особенно полезен при работе с разделами и заголовками HTML. Поскольку

,
,