css - select the last element having some style property -

table {      border-collapse: collapse;      border : 1px solid #e2e2e2;  }  caption, th, td {      text-align: left;      line-height: 1.4;      padding: 8px;  }  tr {      border-bottom: 1px solid #ccc;      vertical-align: top;  }

<table>      <caption>optional table caption.</caption>      <thead>          <tr class="heade_class">              <th>#</th>              <th style="display:table-cell">first name</th>              <th style="display:table-cell">last name</th>              <th style="display:none">username</th>          </tr>      </thead>      <tbody>          <tr>              <th scope="row">1</th>              <td>mark</td>              <td>otto</td>              <td style="display:none">@mdo</td>          </tr>          <tr>              <th scope="row">2</th>              <td>jacob</td>              <td>thornton</td>              <td style="display:none">@fat</td>          </tr>          <tr>              <th scope="row">3</th>              <td>larry</td>              <td>the bird</td>              <td style="display:none">@twitter</td>          </tr>      </tbody>  </table>

code here example here note th , tr dynamically set values.

hi guys wan select last th of having style"display:table-cell" property

now have tried little bit using last-child here can th style"display:table-cell" property not find last th among them

using css

   .heade_class th[style*="display: table-cell"]:last-child {  	  }

in short, cannot css alone.

the problem

first of all, spaces important. cannot have space after th , style attribute must match same style defined in html. valid should follows:

.heade_class th[style*="display:table-cell"] 

however, still won't want because last-child doesn't work think. in order match must last child, not last element matches other specification.

so if consider this:

.heade_class th[style*="display:table-cell"]:last-child 

what means follows:

1. is th element
2. and style attribute contains display:table-cell
3. and last child element

for notice none of elements match 3 conditions , why doesn't work.

other options

some other options, not quite looking for:

you try nth-last-child follows, relies on knowing how many elements going hidden after it, isn't want:

.heade_class th[style*="display:table-cell"]:nth-last-child(2) 

an alternative, depending on how render html, either omit hidden ones completely, or change hidden ones td. if change them td can use last-of-type so:

.heade_class th:last-of-type 

but may want check browser support before using it.