JSFiddle - React, Tailwind, and code Playground

HTML

<div class="example" data-title="class1 alone is red">
    <div class="class1">1</div>
</div>

<div class="example" data-title="class2 alone is green">
    <div class="class2">2</div>
</div>

<div class="example" data-title="class2 with class1 before matches .class1 + .class2. Result: class2 is blue">
    <div class="class1">1</div>
    <div class="class2">2</div>
</div>

CSS

.class1 {
    color: red;
}
.class2 {
    color: green;
}
.class1 + .class2 {
    color: blue;
    border: 1px solid orange;
}









.example {margin-top: 20px; background: #EEE; position: relative;}
.example:after {
    position: absolute;
    right: 0;
    top: 0;
    content: attr(data-title);
    font-size: 11px;
}