2

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.

Community
  • 1
  • 1
Michael Yaeger
  • 756
  • 12
  • 32
  • I don't think `css` can do that in this context – Mark Perera Aug 16 '16 at 03:23
  • any luck trying `span:first-of-type` ? – Gauthaman Sahadevan Aug 16 '16 at 03:26
  • `span:first-of-type` styles both "price" elements as they are both the first in their parent container. – Michael Yaeger Aug 16 '16 at 03:28
  • how about using JS? or as a workaround placing them under different `div` or giving a different class name? – Gauthaman Sahadevan Aug 16 '16 at 03:40
  • I was able to modify the HTML output to wrap the first one in another container that I could style separately. However, I was hoping I could just add 2 lines of CSS and be done... :/ JS would have worked, but would have added more weight to the site than I wanted. But, if that's the only option, then that's the only option. – Michael Yaeger Aug 16 '16 at 04:19
  • Your example is right, your selector is just nesting too deep. The sibling selector is based on the last nesting level it arrived at. So you need to make it more general. `#product-attribute-specs-table tbody > tr td.data .price {text-decoration:line-through} #product-attribute-specs-table tbody > tr ~ tr td.data .price {text-decoration:none}` – probablyup Aug 16 '16 at 04:33
  • @yaycmyk I tried your suggestion, but both lines select both elements: https://jsfiddle.net/hn89cp55/ – Michael Yaeger Aug 16 '16 at 04:44
  • @MichaelYaeger Why you can't add additional class with first `span.price`? I think it will be easiest way to fix it. – Mohammad Usman Aug 16 '16 at 05:29
  • @MuhammadUsman, I did just that. However, editing the source code took twice as long as I was hoping would happen with just a small CSS update. We'll have to push scenarios like this into #CSS4! :) – Michael Yaeger Aug 16 '16 at 18:59

2 Answers2

2

You will need JS for this:

document.getElementById('product-attribute-specs-table')
  .querySelector('span.price')
  .classList.add('line-through');
0
        .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];
satwick
  • 135
  • 9