Селектор CSS в глубину (составной селектор классов)

Все мы знаем о селекторах class, id, type и universal. В этой статье мы узнаем о более продвинутых селекторах css.

Селектор составного класса

Давайте создадим один html и один css файл и свяжем html файл с css. Напишите этот код для понимания селектора составных классов.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="selector.css" rel="stylesheet" />
  </head>
  <body>
    <!--Compound class selector-->
    <div class="box red">Box-1</div>
    <div class="box yellow">Box-2</div>
    <div class="circle yellow">Box-3</div>
  </body>

Вход в полноэкранный режим Выход из полноэкранного режима
.box {
  height: 100px;
  color: red;
}
.circle {
  height: 200px;
  color: green;

Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь если вы хотите выбрать второй div для стилизации. Если применить стиль с помощью поля class selector, то будет выбран и первый, и второй div. Если применить стиль с помощью yellow, то будут выбраны два последних div. Чтобы выбрать только средний элемент div, нам нужно использовать составной селектор class.

В составном селекторе нет пробела между частями .class.

Теперь создайте стиль второго div с помощью составного селектора класса.

.box.yellow {
 color:purple;
 height : 200px;

}
Вход в полноэкранный режим Выход из полноэкранного режима

Давайте посмотрим на результат нашего кода.

Содержимое второго div стало фиолетовым.

Оцените статью
devanswers.ru
Добавить комментарий