Селектор CSS со многими условиями (nth-child, нет и видимость)

Question

У меня есть таблица с n строк. На этих п строк мне нужно установить некоторые CSS стиль, следуя этим правилам:

• СМЧ следует применять только на нечетных строках
• СМЧ НЕ следует применять на первой и последней строки (или эти строки с .excludeme класса)
• СМЧ должны применяться только на видимых строк

HTML

<table> 
    <tr class="excludeme"><td>first</td></tr> 
    <tr><td>Hello</td></tr> 
    <tr><td>Hello</td></tr> 
    <tr class="showhide"><td>show/hide</td></tr> 
    <tr><td>Hello</td></tr> 
    <tr><td>Hello</td></tr> 
    <tr><td>Hello</td></tr> 
    <tr><td>Hello</td></tr> 
    <tr class="showhide"><td>show/hide</td></tr> 
    <tr class="showhide"><td>show/hide</td></tr> 
    <tr><td>Hello</td></tr> 
    <tr class="excludeme"><td>last</td></tr> 
</table> 

CSS

.showhide{ 
    display: none; 
} 
table tr:nth-child(odd):not(.excludeme){ 
    background: orange; 
} 

JS

//--- #test is a button 
$("#test").on("click", function(){ 
    $(".showhide").toggle(); 
}); 

вы можете найти скрипку HERE

Как вы можете видеть, когда некоторые строки являются Hidde, то even/odd окраска не соблюдается. Я пробовал этот селектор

table tr:nth-child(odd):not(.excludeme):visible{ 
    .... 
} 

но не работает .. Можно ли это сделать только с помощью CSS?

Спасибо

Answer 1

$(document).ready(function(){ 
    $("#test").on("click", function(){ 
     $(".showhide").toggle(); 
     if($(element).is(":visible")){ 
      // color odd rows 
     } 
    }); 
}); 

Вы должны проверить видимость элементов перед тем окраска их. Только цветные видимые нечетные элементы, а не все элементы в DOM (видимые или нет).

Я надеюсь, что помогает, есть хороший день :)

Answer 2

вы можете использовать следующие CSS (использование градиента CSS) без изменения каких-либо другой код:

* { 
    margin: 0; 
    padding: 0; 
} 
table { 
    padding: 0; 
    margin: 0; 
    border: none; 
    width: 100%; 
    background-image: 
    repeating-linear-gradient(white, white 1.2em, hotpink 1.2em, hotpink 2.4em); 
    border-collapse: collapse; 

} 
td,tr { 
    border: none; 
    padding: 0 5px; 
    line-height: 1.2em; 
    margin: 0; 
    border-collapse: collapse; 
} 
.showhide { 
    display: none; 
} 

.excludeme { 
    background: white; 
}