CODEWITHSUNDEEP
htmlcsscss-selectors
Andy
Andy

Reputation: 443

css styling using the :nth-child and :not

I have a list of divs that I want to style using the nth-child selector. I also want to be able to exclude a div if it has a certain class, i.e:

<style>
 .a:not(.b):nth-child(2n) {
    color: hotpink;
 }
</style>

<div class="a"> Test </div>
<div class="a b"> Test </div>
<div class="a"> I should be pink, as i am the 2nd child that doesnt have a "b" class </div>
<div class="a"> Test </div>
<div class="a"> Test </div>
<div class="a"> Test </div>
<div class="a"> Test </div>
<div class="a"> Test </div>
<div class="a"> Test </div>

http://jsfiddle.net/BF7GY/

Upvotes: 3

Views: 256

Answers (1)

Moseleyi
Moseleyi

Reputation: 2859

I think the best way would be to use jQuery and two filter() calls like: 

$('.a').filter(function(){
        return !$(this).hasClass('b');
     }).filter(
    function(i){
        return (i+1)%2 == 0; 
    }
).css('color','hotpink');

:not and :nth-child are not as flexible as we would like (unfortunately)

Upvotes: 3

Related Questions