CSS Select first occurrence of a class only

Question

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;
}

https://jsfiddle.net/stemon/qw9ezu2h/2/

Answer 1

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>

Answer 2

You should to do this:

.col > div > .border{
    ... your code...
}