CODEWITHSUNDEEP
cssclasscss-selectors
jord49
jord49

Reputation: 582

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>

Upvotes: 4

Views: 5517

Answers (2)

user36339
user36339

Reputation: 273

Yes of course! For example, if I have

<div id="myId">
  <div>Dummy 1</div>
  <div>Dummy 2</div>
  <div> 
    <div>Sub dummy 1</div>
    <div>Target</div>
    <div>Sub dummy 2</div>
  </div>
</div>

I can target the <div>Target</div> element as follows:

#myId > div:nth-child(3) > div:nth-child(2) {
  /*styles*/
}

Upvotes: 0

j08691
j08691

Reputation: 207881

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.

Upvotes: 4

Related Questions