...
  • ...
  • Geek asks and answers

    Select any class element using css3

    Given ulwith a structure like this:

    <ul>
    <li class="product">...</li>
    <li class="product">...</li>
    <li class="product">...</li>
    <li class="product">...</li>
    <li class="spot">...</li>
    <li class="product">...</li>
    <li class="product">...</li>
</ul>

    Is there any way, using CSS3, to target every other event lion a class product.

    I tried to use both nth-of-child and nth-of-type in various configurations so that no luck, both seem to target any other li element no matter what class it has.

    +3
    source share
    3 answers

    This cannot be done using simple CSS (in any way that I don't know about yet), however a simple JavaScript solution is pretty simple:

    var​ lis = document.querySelectorAll('li.product');

for (var i=0,len=lis.length;i<len;i++){
    if (i%2 == 0){
        lis[i].className = 'oddProduct';
    }
}​

    JS Fiddle demo .

    jQuery ( , , JavaScript), , , .

    +1

    , CSS3. nth-child , . , li:nth-child(even) , .product:nth-child(even) .

    jQuery.

    +8

    ( )? , .

    :

    .ul_class li:nth-child(even) {
    background: #CCC;
}

.spot {
    background: green;
}

    , , - , 2 . , .

    , :

    li.product:nth-child(even) {
    background: #ccc;
}
    +2
    source

    More articles:


    All Articles