I need to add a style to the first occurrence of a class (.border) but not the others.
HTML
<div class="col"> <div> <div class="border"> <section> <div> <div> <div class="border">No Border</div> </div> </div> <div> <div> <div class="border">No Border</div> </div> </div> </section> </div> </div> </div> CSS
.col{ padding: 100px; } .col section{ display: flex; justify-content: space-around; padding: 50px; } .col .border{ border: solid; } First method
use direct child(>) selector in CSS.
.col > div >.border{ border: solid; } .col{ padding: 100px; } .col section{ display: flex; justify-content: space-around; padding: 50px; } .col > div >.border{ border: solid; }<div class="col"> <div> <div class="border"> <section> <div> <div> <div class="border">No Border</div> </div> </div> <div> <div> <div class="border">No Border</div> </div> </div> </section> </div> </div> </div>Second method
simply use .col section .border{} get second and third occurenece of class border to disable border to them by,
.col .border{ border: solid; } .col section .border{ border:none; } .col{ padding: 100px; } .col section{ display: flex; justify-content: space-around; padding: 50px; } .col .border{ border: solid; } .col section .border{ border:none; }<div class="col"> <div> <div class="border"> <section> <div> <div> <div class="border">No Border</div> </div> </div> <div> <div> <div class="border">No Border</div> </div> </div> </section> </div> </div> </div>
.col > div > .border{ border: solid; }