Question 195379 in Shopify Question posted in
The Shopify help center can be found here.

Shopify – How Can I Target This <span> in CSS?

I’m trying to add a line through style to the ‘original’ price on a shopify site when the sale/compare at price is used.

I’m a bit stumped at how to target this for styling. I’m guessing it’s something simple, would appreciate the help!

I’m trying to select the text and style with:

text-decoration: line-through !important;

See Below HTML

<div class="col-span-1">
        <h1 class="text-md">
          THE BLACK PREMIUM SELVEDGE
          <span data-product-price>
            $375.00
          </span>
          <div data-price-wrapper>
            
            <span class="visually-hidden" data-compare-text="">Regular price</span>
            <div data-compare-price="">
               $625.00 
            </div>

I’ve tried all kinds of variations of selectors/nth child etc. and nothing seems to work.

I’ve only been able to successfully target the col-span-1 and text-md classes.

The span I’m trying to select has

data-price-wrapper

in it, but as it’s not a class or id I’m unsure how to select it!

Tags:

2

Answers


  1. 0

    This is a job for attribute selectors.

    P.S. Don’t use !important because it will hurt you in the long run.

    [data-price-wrapper] {
   text-decoration: line-through;
}
    Login or Signup to reply.
  2. 0

    Try:

    .visually-hidden + div {
  text-decoration: line-through; 
}

    This code selects the <div> right after the element with the visually-hidden class.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search