CODEWITHSUNDEEP
htmlcss
Martyn Ball
Martyn Ball

Reputation: 4895

Using nth-child to style a div

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?

Upvotes: 0

Views: 82

Answers (2)

JJWesterkamp
JJWesterkamp

Reputation: 7916

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).

Upvotes: 4

Buksy
Buksy

Reputation: 12238

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

Here is jsFiddle

Upvotes: 1

Related Questions