CODEWITHSUNDEEP
htmlcss
Nickool
Nickool

Reputation: 3702

how to select a class which is children of many elements

<div class="rightsidebox">
    <div class="item-info-list">
        <p>Model: AIDCU</p>
        <div class="product-details">
            <p></p>
            <div class="price-box"> <span class="regular-price" id="product-price-1617-related">
      <span class="price">$8.99</span></span>
            </div>
            <p></p>
        </div>
    </div>

I want to make a style for price and make the color green just in a case it is in the rightbox div and I want to use css , I cannot change the structure because it is a theme and it should not have conflict with other prices in other themes

I can use div.rightsidebox>div.item-info-list

but I cannot go further because of the paragraph in there how can I solve it? I have weakness in using ">" and multiple classes in each other

Upvotes: 0

Views: 59

Answers (5)

TheFrozenOne
TheFrozenOne

Reputation: 1715

.rightsidebox .price { color: green !important; } // important to override other styles

EDIT: Usage of > - selectorr

The element>element selector is used to select elements with a specific parent. Note: Elements that are not directly a child of the specified parent, are not selected. More info

Upvotes: 0

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

.rightsidebox .item-info-list p {
  /* code */
}

This would go down to the paragraph element inside the classes defined there inside the stylesheet (above off course).

You don't need to be using div.rightsidebox that is required only if you're having class names for multiple elements. Otherwise only .rightsidebox is OK.

You can learn more about the CSS child selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

Upvotes: 0

Ian Ryan Clarke
Ian Ryan Clarke

Reputation: 278

If you merely just want to select the price and make it green if it is contained by rightbox:

.rightsidebox .price {
     color: green !important;
}

Upvotes: 1

SimplyAzuma
SimplyAzuma

Reputation: 25594

This I believe is what you are looking for: 

div.rightsidebox>div.item-info-list>div.product-details {
    background:#ff0000;
}

JSFiddle: http://jsfiddle.net/RF5e7/

Upvotes: 2

user1180790
user1180790

Reputation: 

div.rightsidebox>div.item-info-list .price{
    color: green;
}

JSFiddle example.

Upvotes: 0

Related Questions