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"])  

here's fiddle mess with

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

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -