Using nth-child to style a div

Question

I have got the following layout, I need to style the first and second div which has got the class threecolx but I need to style them differently without adding more classes to them.

HTML

<div class="threecolx mobile-hidden">
            <div class="contact-box">
              <span class="promo-text">Family run for over</span>
              <span class="promo-date">- 30 Yrs -</span>
           </div>
          </div>
          <div class="sixcolx">
            <!-- Desktop Logo -->
            <div id="hdr-logo">
              <a href="{SELF_URL}" title="{SITE_NAME}"><img src="/img-src/{v2_FOLDER}/theme/logo.png" alt="{SITE_NAME}" class="responsive-img"/></a>
            </div>
            <!-- // END Desktop Logo -->
          </div>
          <div class="threecolx">
            <div class="contact-box">
              <!-- Social Icons -->
                <div class="telephone"><a href="/contact.php" title="Contact Us"><span class="fa fa-phone"></span> {v2_TELEPHONE_NUMBER}</a></div> 
                <div class="email mobile-hidden"><a href="/contact.php" title="Email us"><span class="fa fa-map-marker"></span> Find Us</a></div>
              <!-- // Social Icons -->
            </div>
          </div>
          <div class="clearfix"></div>

Here are the styles im using which should work fine!

@media screen and (max-width:1200px) {
  #header .row {
    .threecolx:nth-child(1) .contact-box {
      float: right;
    }
    .threecolx:nth-child(2) .contact-box {
      float: left;
    }
  }
}

Currently only the first div with the class threecolx is being styled, am I using nth-child incorrectly?

Maybe you should use `nth-of-type` instead. http://stackoverflow.com/questions/3203313/nth-child-doesnt-respond-to-class-selector — Gavin Thomas, May 23 '16 at 09:40
you are using it correctly, there may be some other style which may be affecting this. Please check it some tool like firebug. If it is in some online page please share the url i will check and let you know. — yogihosting, May 23 '16 at 09:42
Possible duplicate of [css styling using the :nth-child and :not](http://stackoverflow.com/questions/13929997/css-styling-using-the-nth-child-and-not) — madcrazydrumma, May 23 '16 at 09:47

score 4 · Accepted Answer · answered May 23 '16 at 09:45

Yes, nth-child does not 'filter' on the selector you have it prefixed with.

For example, when you type .threecolx:nth-child(2) that means that your target element should have a class threecolx AND should be the second child of its parent (not the second element with class threecolx in a parent element!)

In your example, threecolx:nth-child(3) should match your target, since it's the third child of its parent. (.sixcolx is the second child).

score 1 · Answer 2 · answered May 23 '16 at 09:43

1

You have <div class="sixcolx"> in between the .threecolx divs, so your second .threecolx isn't second but third child

Here is jsFiddle

answered May 23 '16 at 09:43

Buksy

11,571
9
62
69

Using nth-child to style a div

2 Answers2