2

I have a table looks like this (below) after using css nth-child(2n).

tr:nth-child(2n) {background-color: #f0f3f5;}

enter image description here

After doing some hidden on the vID,ID,MO_Sub tr

<tr style="display:none">

The table now looks like this below, with backgroung on "MO" and "MODEL".

enter image description here

I have done somthing like (below) and it doesn't seem to work.

tr:not(.isotope-hidden):nth-child(2n)

Anyone got any idea applying css after the hidden tr? Thanks for any helps! =)

EDIT: add snippet

tr:not([style*="display:none"]):nth-child(2n){
    background-color: #f0f3f5;
}

tr:hover{

    background-color: cadetblue;

}
 <table id="form_tb">
                    <tr style="display:none">
                        <td><label>vvID :</label></td>
                        <td><input type="text" name="vvID" placeholder="vvID" readonly></td>
                    </tr>
                    <tr style="display:none">
                        <td><label>vID :</label></td>
                        <td><input type="text" name="vID" placeholder="vID" readonly></td>
                    </tr>
                    <tr style="display:none">
                        <td><label>vID_sub :</label></td>
                        <td><input type="text" name="vID_sub" placeholder="vID_sub" readonly></td>
                    </tr>
                    <tr style="display:none">
                        <td><label>ST :</label></td>
                        <td><input type="text" name="Station" placeholder="Station" readonly></td>
                    </tr>
                    <tr style="display:none">
                        <td><label>SortID :</label></td>
                        <td><input type="text" name="SortID" placeholder="SortID" readonly></td>
                    </tr>
                    <tr>
                        <td><label>MO :</label></td>
                        <td data-key='MO'><input id=MO type="text" name="MO" placeholder="MO" readonly></td>
                    </tr>
                    <tr style="display:none">
                        <td><label>MO_Sub :</label></td>
                        <td><input type="text" name="MO_Sub" placeholder="MO_Sub" readonly></td>
                    </tr>
                    <tr>
                        <td><label>PART :</label></td>
                        <td data-key='text'><input type="text" name="Part_number" placeholder="PART" readonly></td>
                    </tr>
                    <tr>
                        <td><label>MODEL :</label></td>
                        <td><input type="text" name="Model" placeholder="MODEL" readonly></td>
                    </tr>
                    <tr style="display:none">
                        <td><label>Class :</label></td>
                        <td><input type="text" name="Product_Class" placeholder="Class" readonly></td>
                    </tr>
                    <tr>
                        <td><label>Side :</label></td>
                        <td><input type="text" name="Side" placeholder="Side" readonly></td>
                    </tr>
                    
                </table>

Result for the snippet should look like this.(below)

enter image description here

Doggy
  • 90
  • 1
  • 12
  • 1
    Your CSS selector `tr:not(.isotope-hidden):nth-child(2n)` should work just fine. Try using the `.isotope-hidden` class to hide your the table row instead of an inline `display: none`. – Ryan Tsui Jun 05 '17 at 03:05
  • 2
    Code snippets instead of images would be better, that way we can fiddle around to get it working without having to create everything ourselves – myfunkyside Jun 05 '17 at 03:17
  • 1
    inline css takes precedence over classes. But using `!important` should override inline if it's not already using it – A. L Jun 05 '17 at 03:27
  • added the code snippets – Doggy Jun 05 '17 at 03:33
  • Is expected result for only `` having `` with text set to `"PART"` to have `background` property applied? – guest271314 Jun 05 '17 at 04:57
  • @guest271314 yes, something like that. For only `` having `` which it's 2n to have background. – Doggy Jun 05 '17 at 05:06

1 Answers1

3

The n-th child selector only selects children that are the nth child of the parent. In your case, it selects table.children[n] such that n is even. Counterintuitively, it doesn't match the even values of the filtered results.

To fix the :hover problem, you could add :not(:hover) to the first css selector, but this doesn't fix everything.

I think this question and this question are both questions that deal with the same issue.

Might be better to use JavaScript, in this case.

Darrennchan8
  • 192
  • 4
  • 8