Оновлено: 19.05.2025
Multiclass selector
Мультикласи
До будь-якого елемента одночасно можна додати кілька класів, перераховуючи їх в атрибуті class через пробіл. У цьому разі до елемента застосовується стиль, описаний у правилах для кожного класу. Оскільки під час додавання кількох класів вони можуть містити однакові стильові властивості, але з різними значеннями, то береться значення в класу, який описано в коді нижче.
Синтаксис
<E class="class1 class2 ...">Тут E - позначає будь-який елемент.
У стилях допустимо використовувати запис такого вигляду.
.class1.class2 { Опис правил стилю }У такому разі стиль застосовується тільки для елементів, у яких одночасно задано класи class1 і class2, тобто в коді HTML використовується конструкція <E class="class1 class2>.
Приклад
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>Multiclasses</title>
<style>
.level1 { font-size: 1em; }
.level2 { font-size: 1.2em; }
.level3 { font-size: 1.4em; }
.level4 { font-size: 1.6em; }
.level5 { font-size: 1.8em; }
.level6 { font-size: 2em; }
a.tag {
color: #468be1; /* Link color */
}
</style>
</head>
<body>
<div>
<a href="/term/2" class="tag level6">Paint.NET</a>
<a href="/term/69" class="tag level6">Photoshop</a>
<a href="/term/3" class="tag level5">color</a>
<a href="/term/95" class="tag level5">background</a>
<a href="/term/11" class="tag level4">palette</a>
<a href="/term/43" class="tag level3">layers</a>
<a href="/term/97" class="tag level2">light</a>
<a href="/term/44" class="tag level2">Panels</a>
<a href="/term/16" class="tag level1">line</a>
<a href="/term/33" class="tag level1">rectangle</a>
<a href="/term/14" class="tag level1">pixel</a>
<a href="/term/27" class="tag level1">gradient</a>
</div>
</body>
</html>