css3 - How do I target a first-child that is visible (after children that are set to display:none), with only CSS -
i need target first <td>
element in table row visible--meaning not have inline styling of display:none
.
here's gotchyas:
- they not hidden
- sometimes more 1 hidden.
- i can't edit html or use javascript/jquery--this needs pure css solution (hopefully)
here quick sample of code looks like:
<table> <thead> <tr> <th style="display:none">header1</th> <th>header2</th> <th>header3</th> <th>header4</th> </tr> </thead> <tbody> <tr> <td style="display:none">body1</td> <td>body2</td> <td>body3</td> <td>body4</td> </tr> </tbody> </table>
i tried messing no avail:
table > tbody > tr > td:first-of-type:not([style*="display:none"])
thanks in advance.
if hidden elements @ beginning of row, can use direct sibling selector +
.
td:first-child, td[style*="none"] + td { color: red; }
<table> <thead> <tr> <th style="display:none">header1</th> <th>header2</th> <th>header3</th> <th>header4</th> </tr> </thead> <tbody> <tr> <td style="display:none">body1</td> <td>body2</td> <td>body3</td> <td>body4</td> </tr> <tr> <td>first</td> <td>second</td> <td>third</td> </tr> <tr> <td style="display:none">and</td> <td>here's</td> <td>an</td> <td style="display:none">edge</td> <td>case</td> </tr> </tbody> </table>
Comments
Post a Comment