Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to do nth child of nth child in css pseudo classes?

I basically want to do "the 2nd column then the second one down" within that column. So go two across in a menu then two down.

Thanks.

 <div class="row ms-category">    
            <div class="col-category col-xs-3">
                <a class="form-group level1" href="">title</a>
                <a class="form-group level2" href="">title</a>   
                <a class="form-group level2" href="">title</a>
           </div>

            <div class="col-category col-xs-3">
                < <a class="form-group level1" href="">title</a>
                <a class="form-group level2" href="">title</a>   
                <a class="form-group level2" href="">title</a>
            </div>

            <div class="col-category col-xs-3">  
                <a class="form-group level1" href="">title</a>
                <a class="form-group level2" href="">title</a>   
                <a class="form-group level2" href="">title</a>
            </div>

  </div>
like image 390
jord49 Avatar asked Sep 05 '25 17:09

jord49


1 Answers

Sure it is. You can use one of the pseudo-classes like nth-child:

div.row > div:nth-child(2) > a:nth-child(2){
  background: red;
}
<div class="row ms-category">
  <div class="col-category col-xs-3">
    <a class="form-group level1" href="">title</a>
    <a class="form-group level2" href="">title</a>
    <a class="form-group level2" href="">title</a>
  </div>

  <div class="col-category col-xs-3">
    <a class="form-group level1" href="">title</a>
    <a class="form-group level2" href="">title</a>
    <a class="form-group level2" href="">title</a>
  </div>

  <div class="col-category col-xs-3">
    <a class="form-group level1" href="">title</a>
    <a class="form-group level2" href="">title</a>
    <a class="form-group level2" href="">title</a>
  </div>

</div>

Pseudo-classes indices begin with one, so the rule above says: select the second anchor that is a child of the second div that is the child of any div with the row class.

like image 179
j08691 Avatar answered Sep 08 '25 12:09

j08691