CODEWITHSUNDEEP
htmlcsscss-selectors
Michael Yaeger
Michael Yaeger

Reputation: 824

How to style the first occurance of a class anywhere in a page/element

How can I add the style text-decoration:line-through to the first span class="price" element in my table ?

I have the following HTML structure:

<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>

Note: I have reviewed the answers here, but they do not apply as my class is not in the same parent element: CSS selector for first element with class

Example (doesn't work):

#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}

I should, also, note that class="price" is used several times in the page. I just need to target the first one inside the table.

Upvotes: 2

Views: 183

Answers (2)

satwick
satwick

Reputation: 139

        .chartKeyListItem {
            margin-left: 60px !important;
                }

              .chartKeyListItem ~ .chartKeyListItem {
               margin-left: 0 !important;
                  }

if you are using Dom elements use this

       event.target.className.split(" ")[0];

Using the classList property of DOM elements which return a DOMTokenList Object of classes(already split by space)

       event.target.classList[0];

Upvotes: 0

user663031
user663031

Reputation:

You will need JS for this:

document.getElementById('product-attribute-specs-table')
  .querySelector('span.price')
  .classList.add('line-through');

Upvotes: 2

Related Questions