CSS selector with many conditions (nth-child, not and visibility)

Question

I have a table with n rows. On these n rows I need to set some CSS style, following this rules:

the CSS should apply only on odd rows
the CSS should NOT apply on the first and the last row (or on those rows with .excludeme class)
the CSS should apply only on visible rows

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(); 
});

you can find a fiddle HERE

As you can see, when some rows are hidde, the even/odd colouring is not respected. I tried this selector

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

but is not working.. Is it possible to accomplish this only using CSS?

Thank you

This is not possible by CSS, you need to use JavaScript to handle this. — Hashem Qolami, Jan 20 '14 at 11:37
Instead of hidding the element, try removing/creating them (the `.showhide` elements). — Vucko, Jan 20 '14 at 11:38
A useful similar topic: http://stackoverflow.com/a/8539107/1725764 — Hashem Qolami, Jan 20 '14 at 11:41
@HashemQolami is there some sort of limit on the number of concatenated selector in CSS? — BeNdErR, Jan 20 '14 at 11:42
@BeNdErR: No, the problem is that there is no `:visible` selector in CSS. — BoltClock, Jan 20 '14 at 12:22

score 0 · Answer 1 · answered Jan 20 '14 at 11:44

0

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

You have to verify the visibility of elements before coloring them. Only color the visible odd elements, not all elements in DOM (visible or not).

I hope that helps, have a good day :)

answered Jan 20 '14 at 11:44

dustfeather

86
1
8

I'm looking for a CSS solution, I prefer not to use JS if possible. Thank you anyway! – BeNdErR Jan 20 '14 at 11:46

score 0 · Answer 2 · answered Jan 20 '14 at 12:03

0

you can use following CSS(use of gradient CSS) without changing any other code:

* {
    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;
}

answered Jan 20 '14 at 12:03

Dipali Vasani

2,526
2
16
30

What if the line height grows if the content is very long and multi line? – BeNdErR Jan 20 '14 at 12:07
you can use colors according to line-height. Suppose it is X then you need to add Css like : repeating-linear-gradient(white, white X, hotpink X, hotpink 2X); – Dipali Vasani Jan 20 '14 at 12:10
I have no control or prediction on the line height :\ – BeNdErR Jan 20 '14 at 12:11
you can add line-height as you want. and you can specify width also. – Dipali Vasani Jan 20 '14 at 12:13

CSS selector with many conditions (nth-child, not and visibility)

2 Answers2