CODEWITHSUNDEEP
htmlcsscss-selectors
Marcel Wasilewski
Marcel Wasilewski

Reputation: 2679

nth-child is not taking the element that´s needed

I got a document that is built like the following code:

<div id="menubox_container_box_body">
   <div class="categories">...</div>
   <div class="categories">
      <div class="cat_icon">...</div>
      <div class="cat_link">
          <div class="cat_link_container">...</div>
               <div class="cat_icon">...</div>
               <div class="cat_sub_link">
                  <div class="cat_link_container">...</div>
               </div>
                  <div class="cat_icon">...</div>
                  <div class="cat_sub_link">
               <div class="cat_link_container">...</div>
      </div>
   </div>

Now I am trying to select the a in the first cat_link_container with this command:

#menubox_categories_box_body .categories:nth-child(2) .cat_link .cat_link_container:nth-child(1){
    margin-bottom: 20px;
}

What it does is giving ALL the cat_link_container elements (even the one's in the cat_sub_link div) a margin bottom. But I selected to only take the FIRST cat_link_container in cat_link and give it a margin-bottom. Someone has an idea what the problem could be?

Upvotes: 1

Views: 50

Answers (1)

Harry
Harry

Reputation: 89750

To select only the element with class='cat_link_container' under div class='cat_link' and not the elements with same class under its descendants, you need to make use of the > (children) selector like in the below code sample:

#menubox_container_box_body .categories:nth-child(2) .cat_link > .cat_link_container:nth-child(1){
    color: red;
    font-size: 24px;
}
<div id="menubox_container_box_body">
    <div class="categories">...</div>
    <div class="categories">
        <div class="cat_icon">...</div>
        <div class="cat_link">
            <div class="cat_link_container">...</div>
            <div class="cat_icon">...</div>
            <div class="cat_sub_link">
                <div class="cat_link_container">...</div>
            </div>
            <div class="cat_icon">...</div>
            <div class="cat_sub_link">
                <div class="cat_link_container">...</div>
            </div>
        </div>
    </div>
</div>

Explanation:

Your original selector would be interpreted as follows:

#menubox_container_box_body .categories:nth-child(2) .cat_link .cat_link_container:nth-child(1)
  • Find the element with id='menubox_container_box_body'.
  • Under this element, find all descendant elements (children, grand-children etc) which are the 2nd child of its parent and also has class='categories'.
  • Under all the elements obtained in the previous point, find the element with class='cat_link'
  • Traverse all elements which are fetched in above point, find all descendant elements which are the 1st child of its own parent and also has class='cat_link_container'.
<div id="menubox_container_box_body"> <!-- 1st point in explanation -->
    <div class="categories">...</div>
    <div class="categories"> <!-- 2nd point in explanation -->
        <div class="cat_icon">...</div>
        <div class="cat_link"> <!-- 3rd point in explanation --> 
            <div class="cat_link_container">...</div> <!-- descendant, first-child of its parent and so selected -->
            <div class="cat_icon">...</div>
            <div class="cat_sub_link">
                <div class="cat_link_container">...</div> <!-- descendant of the element referenced by 3rd point, first-child of its own parent and so selected -->
            </div>
            <div class="cat_icon">...</div>
            <div class="cat_sub_link">
                <div class="cat_link_container">...</div> <!-- descendant of the element referenced by 3rd point, first-child of its own parent and so selected -->
            </div>
        </div>
    </div>
</div>

The revised selector that I have provided in answer will be interpreted as follows:

#menubox_container_box_body .categories:nth-child(2) .cat_link > .cat_link_container:nth-child(1)
  • Find the element with id='menubox_container_box_body'.
  • Under this element, find all descendant elements (children, grand-children etc) which are the 2nd child of its parent and also has class='categories'.
  • Under all the elements obtained in the previous point, find the element with class='cat_link'
  • Traverse all elements which are fetched in above point, find the element which is the 1st child of its the element referred to by point 3 and also has class='cat_link_container'. Note how it checks only for direct child and not descendants.
<div id="menubox_container_box_body"> <!-- 1st point in explanation -->
    <div class="categories">...</div>
    <div class="categories"> <!-- 2nd point in explanation -->
        <div class="cat_icon">...</div>
        <div class="cat_link"> <!-- 3rd point in explanation --> 
            <div class="cat_link_container">...</div> <!-- direct child, first-child of its parent and so selected -->
            <div class="cat_icon">...</div>
            <div class="cat_sub_link">
                <div class="cat_link_container">...</div> <!-- not direct link and hence not selected -->
            </div>
            <div class="cat_icon">...</div>
            <div class="cat_sub_link">
                <div class="cat_link_container">...</div> <!-- not direct link and hence not selected -->
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions