Мультилассы
Описание
К любому элементу одновременно можно добавить несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяется стиль, описанный в правилах для каждого класса. Поскольку при добавлении нескольких классов они могут содержать одинаковые стилевые свойства, но с разными значениями, то берётся значение у класса, который описан в коде ниже.
Синтаксис
.class1.class2 { Описание правил стиля }Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<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: #ff3030; /* Цвет ссылок */
}
</style>
<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'>цвет</a>
<a href='/term/95' class='tag level5'>фон</a>
<a href='/term/11' class='tag level4'>палитра</a>
<a href='/term/43' class='tag level3'>слои</a>
<a href='/term/97' class='tag level2'>свет</a>
<a href='/term/44' class='tag level2'>панели</a>
<a href='/term/16' class='tag level1'>линия</a>
<a href='/term/33' class='tag level1'>прямоугольник</a>
<a href='/term/14' class='tag level1'>пиксел</a>
<a href='/term/27' class='tag level1'>градиент</a>
</div>
</body>
</html>Читайте также
Селекторы атрибутов со значениями в конце
Устанавливает стиль для элемента в том случае, если значение атрибута оканчивается указанным текс...
Применяется к дочернему элементу указанного типа
Применяет стилевые правила к элементу input, у которого не задан атрибут required, он позволяет в...
Селекторы атрибутов со значениями
Устанавливает стиль для элемента в том случае, если задано определённое значение специфичного атр...
Стили в полноэкранном режиме
Псевдокласс :fullscreen применяется к элементам, когда браузер находится в полноэкранном режиме. ...
Свойство opacity
Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности чере...