First child of a selector is a specific class

css if first child of a selector is a specific class

by Shishir Morshed

HTML

<div class="main">
    <div class="class1 class2"></div>
    <div class="class1 class3"></div>
    <div class="class1 class2"></div>
</div>
<div class="main">
    <div class="class1 class3"></div>
    <div class="class1 class2"></div>
</div>

<div class="main">
    <div class="class4">
        <div class="class1 class2"></div>
    <div class="class1 class3"></div>  
    </div>  
</div>

CSS

.main {
    border: 1px solid;
    margin-bottom: 30px;
}
.main > .class2:first-child {
    border: 1px solid #985;
}
.class1 {
    padding: 30px 0;
    background: #123;
}
.class2 {
    background: #456;
}