select the last element having some style property - css

Question

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 is just example here note that th and tr are dynamically set with the values.
hi guys i wan to select only last th of the which having the style"display:table-cell" property only
now i have tried little bit with using last-child
here i can get the all th with the style"display:table-cell" property only but could not find last th among them
using only css
.heade_class th[style*="display: table-cell"]:last-child {
}

Answer 1

In short, you cannot do this with CSS alone.
The Problem
First of all, spaces are important. You cannot have a space after th and the style attribute must match exactly the same as the style defined in the HTML. So for it to be valid it should be as follows:
.heade_class th[style*="display:table-cell"]
However, you still won't get what you want because last-child doesn't work as you think. In order for it to match it must be the last child, not just the last element that matches your other specification.
So if you consider this:
.heade_class th[style*="display:table-cell"]:last-child
What it means is as follows:
Is a th element
And the style attribute contains display:table-cell
And it is the last child element
For this you will notice none of your elements match all three conditions and that is why it doesn't work.
Other Options
Some other options, but they are probably not quite what you are looking for:
You could try nth-last-child as follows, but it relies on you knowing how many elements are going to be hidden after it, which probably isn't what you want:
.heade_class th[style*="display:table-cell"]:nth-last-child(2)
An alternative, depending on how you render your HTML, would be to either omit the hidden ones completely, or change the hidden ones to td. If you change them to td then you can use last-of-type like so:
.heade_class th:last-of-type
But you may want to check the browser support for that before using it.