unable to target specific css class

Question

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

span.product-price.on-sale { ... } should help.

emmanuel
– emmanuel

2015-02-23 16:36:59 +00:00
Commented Feb 23, 2015 at 16:36 — emmanuel
– emmanuel, Commented Feb 23, 2015 at 16:36

pulamc · Accepted Answer · 2015-02-23 16:38:02Z

2

With reference to your code this should work:

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

answered Feb 23, 2015 at 16:38

pulamc

701 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pattle · Accepted Answer · 2015-02-23 16:37:17Z

1

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

answered Feb 23, 2015 at 16:37

Pattle

6,0458 gold badges37 silver badges59 bronze badges

Comments

DaniP · Accepted Answer · 2015-02-23 16:43:42Z

0

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

answered Feb 23, 2015 at 16:43

DaniP

38.3k9 gold badges68 silver badges74 bronze badges

Comments

Domino · Accepted Answer · 2015-02-23 16:38:51Z

0

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.

answered Feb 23, 2015 at 16:38

Domino

6,8781 gold badge37 silver badges61 bronze badges

Collectives™ on Stack Overflow

unable to target specific css class

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related