Geek Answers Handbook

Unable to change style: nth-of-type (n)

I have a problem with a pseudo-class :nth-of-type(n).

I need to change the background color .aside_box_content1,2,3,4 ...

I tried to use a pseudo-class when divs are not nested in other divs and it works, so there is an error somewhere there.

.aside_box_content {
  height: 130px;
  overflow: hidden;
}
.aside_box_content:nth-of-type(3) {
  background-color: purple;
}
<aside>
  <div id="aside_caption">INFO</div>
  <!-- NEW BOX -->
  <div class="aside_box">
    <div class="aside_box_content">

    </div>
    <div class="footer_of_box_aside">YOUTUBE</div>
  </div>
  <!-- NEW BOX -->
  <div class="aside_box">
    <div class="aside_box_content">

    </div>
    <div class="footer_of_box_aside">TWITTER</div>
  </div>
  <!-- NEW BOX -->
  <div class="aside_box">
    <div class="aside_box_content">

    </div>
    <div class="footer_of_box_aside">FACEBOOK</div>
  </div>
  <!-- NEW BOX -->
  <div class="aside_box">
    <div class="aside_box_content">

    </div>
    <div class="footer_of_box_aside">CALENDAR</div>
  </div>
  <!-- NEW BOX -->
  <div class="aside_box">
    <div class="aside_box_content">

    </div>
    <div class="footer_of_box_aside">TIME</div>
  </div>

</aside>
Run codeHide result
+4
source share
2 answers

You can use :nth-childinstead:nth-of-type

 .aside_box_content {
     height: 130px;
     overflow: hidden;
 }
 .aside_box:nth-child(3) .aside_box_content {
     background-color: purple;
 }
<aside>
    <div id="aside_caption">INFO</div>
    <!-- NEW BOX -->
    <div class="aside_box">
        <div class="aside_box_content"></div>
        <div class="footer_of_box_aside">YOUTUBE</div>
    </div>
    <!-- NEW BOX -->
    <div class="aside_box">
        <div class="aside_box_content"></div>
        <div class="footer_of_box_aside">TWITTER</div>
    </div>
    <!-- NEW BOX -->
    <div class="aside_box">
        <div class="aside_box_content"></div>
        <div class="footer_of_box_aside">FACEBOOK</div>
    </div>
    <!-- NEW BOX -->
    <div class="aside_box">
        <div class="aside_box_content"></div>
        <div class="footer_of_box_aside">CALENDAR</div>
    </div>
    <!-- NEW BOX -->
    <div class="aside_box">
        <div class="aside_box_content"></div>
        <div class="footer_of_box_aside">TIME</div>
    </div>
</aside>
Run codeHide result
+1
source

The problem is that the elements nth-of-typemust be in the same parent than the direct children of this parent. Change your CSS so that it focuses on .aside-box. And wrap all your divs .aside-boxin one parent.

 .aside_box_content {
   height: 130px;
   overflow: hidden;
 }
 .aside_box:nth-of-type(3) .aside_box_content {
   background-color: purple;
 }
<aside>
  <div id="aside_caption">INFO</div>
  <!-- NEW BOX -->
  <div class="aside_box_wrapper">
  <div class="aside_box">
    <div class="aside_box_content"></div>
    <div class="footer_of_box_aside">YOUTUBE</div>
  </div>
  <!-- NEW BOX -->
  <div class="aside_box">
    <div class="aside_box_content"></div>
    <div class="footer_of_box_aside">TWITTER</div>
  </div>
  <!-- NEW BOX -->
  <div class="aside_box">
    <div class="aside_box_content"></div>
    <div class="footer_of_box_aside">FACEBOOK</div>
  </div>
  <!-- NEW BOX -->
  <div class="aside_box">
    <div class="aside_box_content"></div>
    <div class="footer_of_box_aside">CALENDAR</div>
  </div>
  <!-- NEW BOX -->
  <div class="aside_box">
    <div class="aside_box_content"></div>
    <div class="footer_of_box_aside">TIME</div>
  </div>
  </div><!-- .aside_box_wrapper -->
</aside>
Run codeHide result
+2
source

More articles:


All Articles