CODEWITHSUNDEEP
htmlcsscss-selectors
rs19
rs19

Reputation: 667

unable to target specific css class

trying to target .product-price on-sale to change the color to green but i'm not able to.

HTML

<h2 id="product-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  <meta itemprop="priceCurrency" content="USD" />
  <link itemprop="availability" href="http://schema.org/InStock" />
  <span class="product-price on-sale" itemprop="price">$ 1</span>&nbsp;<del class="product-compare-price"></del>
</h2>

CSS

section#buy h2.product-price-on-sale span {
   color:green  !important;
}

Upvotes: 1

Views: 329

Answers (4)

DaniP
DaniP

Reputation: 38252

A few problems with your selector:

section#buy h2.product-price-on-sale span

  • First part:

    section#buy

    It's ok assuming you have an extra wrapper with id buy

    <section id="buy">

  • Second part

    h2.product-price-on-sale

    Wrong since element h2 doesn't have a classname of product-price-on-sale instead has an id product-price, must be at this point:

    section#buy h2#product-price

  • Third part:

    span

    It's ok since the span element is inside the h2, but if you want to target the one with class product-price and on-sale your final selector must be:

    section#buy h2#product-price span.product-price.on-sale

Upvotes: 0

Domino
Domino

Reputation: 6768

class="product-price on-sale"
... h2.product-price-on-sale

You wrote it as two classes in the html and as one class in css (space vs dash). The css for two class selection is .class1.class2.

You also are not targeting the right tag, as pointed by other answers.

Upvotes: 0

pulamc
pulamc

Reputation: 70

With reference to your code this should work:

h2#product-price span.product-price.on-sale{
 color:green;
}

Upvotes: 2

Pattle
Pattle

Reputation: 6016

Your CSS selector is wrong because your .product-price-on-sale class is on your span element not your h2. It should be

section#buy h2 .product-price.on-sale {
    color:green  !important;
}

Upvotes: 1

Related Questions