JSFiddle - React, Tailwind, and code Playground

by avrelian

HTML

<div class="step step-0">
    <h2>Начальное положение. Стили не применены.</h2>
    
    <div class='top' id="top">
        <h4 class="title">Я должен быть черным</h1>
        
        <div class="middle" x-middle="true">
            <h4 class="title" x-middle="true">Я должен быть черным</h1>
            
            <div class="bottom">
                <h4 class="">Я должен быть черным</h1>
            </div>
        </div>
    </div>
</div>

<div class="step step-1">
    <h2>Применяем наследуемые (inherit) стили к корневому и дочернему элементам блока middle.</h2>
    
    <div class='top' id="top">
        <h4 class="title">Я должен быть черным</h1>
        
        <div class="middle" x-middle="true">
            <h4 class="title" x-middle="true">Я должен быть синим</h1>
            
            <div class="bottom">
                <h4 class="">Я должен быть черным, но стал красным из-за наследования свойств</h1>
            </div>
        </div>
    </div>
</div>
    
<div class="step step-2">
    <div class='top' id="top">
        <h4 class="title">Я должен быть зеленым</h1>
        
        <div class="middle" x-middle="true">
            <h4 class="title" x-middle="true">Я должен оставаться синим, но стал зеленым из-за каскадного беспредела</h1>
            
            <div class="bottom">
                <h4 class="">Я должен быть черным, или хотя бы остаться красным, но стал зеленым из-за наследования стилей</h1>
            </div>
        </div>
    </div>
</div>

CSS

.step {
    margin: 20px;
    border: 2px solid green;
}


.step-1 .middle[x-middle], 
.step-2 .middle[x-middle] {
    color: red;
}

.step-1 .middle[x-middle] .title[x-middle],
.step-2 .middle[x-middle] .title[x-middle] {
    color: blue;
}


.step-2 #top h4 {
    color: green;
}

JavaScript

Тестовый стенд: ShadowCSS