Reputation: 4895
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
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
Reputation: 12238
You have <div class="sixcolx">
in between the .threecolx
divs, so your second .threecolx
isn't second but third child
Upvotes: 1