Теперь поговорим о комбинациях классов

Иерархия классов

Помимо того, что мы можем описывать внутри тега <style> конкретный класс, мы можем прописать иерархию классов.

Допустим хочу я чтобы в первом параграфе все прилагательные были белые, но не хочу менять класс прилагательного. Зато я могу сделать новый комбинированные иерархический стиль — вот так:

<style>
.paragraph1 {/* ... */}
.paragraph2 {/* ... */}
.paragraph3 { /* ... */ }
.adjective {/* ... */}
.adjective:hover { /* ... */ }

/* добавил новый стиль, пробел между названиями классов обязателен */
.paragraph1 .adjective {
    background: white;
}
</style>

так как комбинированный стиль имеет больший приоритет чем простой стиль, то цвет из класса .adjective будет перезаписан и получим:

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

<style>
/* ... */
	
.paragraph1 .adjective {
    background: white;
}

/* теперь при наведении мышки на абзац поменяется цвет всех прилагательных */
.paragraph1:hover .adjective {
    background: red;
}
</style>

получится так

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

.paragraph1:hover .adjective:hover {
    background: yellow;
}

Объединение классов

Мы пока что указывали только один класс у каждого тега. Есть возможность указывать несколько классов. Особенно часто это используется во всяких подключаемых библиотечках со стилями, которые мы попробуем попозже.

Используется это для целей декомпозиции. Например, я хочу сделать отдельный стиль под блок с рамочкой.

Для этого я разбиваю класс прилагательного на два, вот так:

.adjective {
    /* тут оставил только цвет и активацию плавных переходов */
    background: yellowgreen;
    transition: all 0.3s;
}

.bordered {
   /* в этот новый стиль вынес все связанной с блоком и рамкой */
    border: 2px dashed black;
    display: inline-block; 
    margin: 2px; 
    padding: 0 4px;
    border-radius: 8px;
    box-shadow: 0 0 8px grey;
}

из-за этого у меня естественно все рамки слетят

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

Например, абзацу могу добавить, для этого в атрибут class добавляю через пробел второй класс:

<div class="paragraph1 bordered">
    <!-- ... -->
</div>

получится так

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

/* тут пробел уже не ставим, прямо склеиваем имена классов */
.paragraph1.bordered {
    margin: 16px 0;
    border-width: 6px;
}

получится так

ну можно теперь и задание поделать