Apply css to target class using reference class [duplicate]

Thats how i will select the first .col-sm-5

.extra-info:first-child > .row > .col-sm-5 {
  background-color: red;
}

<div class="container extra-info">
   <div class="row">
     <div class="col-sm-5 col-md-5">
     test
     </div>
   </div>
</div>

<div class="container extra-info">
   <div class="row">
     <div class="col-sm-5 col-md-5">
     test
     </div>
   </div>
</div>

You need to have an ID to apply target. So add an id first:

<div class="container extra-info">
   <div class="row">
     <div class="col-sm-5 col-md-5" id="target">
     </div>
   </div>
</div>

Now you can use the pseudo selector:

#target::target {
  background: #f00;
}

You just need to navigate to: /path/to/file#target.

If you just want to target that element, it's as simple as:

• Adding a new class.
• Adding a new id.

So, for either, try to do the following:

Solution using class

<div class="container extra-info">
   <div class="row">
     <div class="col-sm-5 col-md-5 target">
     </div>
   </div>
</div>

And use the CSS:

.target {
  background: #f00;
}

Solution using id

<div class="container extra-info">
   <div class="row">
     <div class="col-sm-5 col-md-5" id="target">
     </div>
   </div>
</div>

And use the CSS:

#target {
  background: #f00;
}