Is it possible to apply the style text-decoration:line-through to the initial instance of the span class="price" element within my table?
The HTML structure in question is as follows:
<table class="data-table" id="product-attribute-specs-table">
<colgroup>
<col width="25%">
<col>
</colgroup>
<tbody>
<tr class="first odd">
<th class="label">Style Number</th>
<td class="data last">2403</td>
</tr>
<tr class="even">
<th class="label">Style Name</th>
<td class="data last">Easy Option Berber</td>
</tr>
<tr class="odd">
<th class="label">Rating</th>
<td class="data last">3.5</td>
</tr>
<tr class="even">
<th class="label">Retail Price</th>
<td class="data last"><span class="price">$2.23</span></td>
</tr>
<tr class="odd">
<th class="label">Price</th>
<td class="data last"><span class="price">$1.44</span></td>
</tr>
<tr class="even">
<th class="label">Roll Price Begins At</th>
<td class="data last">125</td>
</tr>
<tr class="odd">
<th class="label">Face Weight</th>
<td class="data last">50</td>
</tr>
...
</tbody>
</table>
Please note that although solutions have been proposed, they do not specifically address cases where the class does not share a parent element: CSS selector for first element with class
Attempted solution (unsuccessful):
#product-attribute-specs-table tbody > tr td.data .price {text-decoration:line-through}
#product-attribute-specs-table tbody > tr td.data .price ~ tr td.data .price {text-decoration:none}
Furthermore, it is important to mention that class="price" is used multiple times on the page. The objective is to target only the initial occurrence within the table.