Help with some CSS: Restricting it to effect only that inside a htm stack!

1

My CSS skills have run out!

I have the following CSS…

.btn-group .btn {
	font-family: Open Sans !important;
    margin: 0px 2px !important;
    background-color: #000000 !important;
    color: #fff !important;
    border-radius: 0px;
    font-size: 13px !important;
}

.btn-group .btn:hover {
	font-family: Open Sans !important;
    margin: 0px 2px !important;
    background-color: #fff !important;
    color: #000 !important;
    border-radius: 0px;
    font-size: 13px !important;
}

.text-warning  {
	color: #ED1C24 !important;
}

.scContainer.scMyCartContainer  {
    margin: 0px !important;
    background-color: #000000 !important;
    }

These classes are used twice on the page, but I only want the custom CSS to be applied to one instance. The classes are used in a script that is being added to the page with an HTML stack.

I’ve added the custom class of cart-blockto the HTML stack I want affected, but for the life of me I can’t work out how to add the class cart-block to the custom CSS above.

I’ve tried putting it before, after, with a space, without, none work. Where am I going wrong?

Tav has taught me all this, but for the life of me I can’t remember it all!

2

I’m not sure I understand the question. Does .cart-block apply to the parent or child of an element specified by the classes here? Surely you can just define it as another class?

.cart-block {
does:whatever;
}

3

Yes, I described it poorly, I’ll try again, but it’ll most likely still be bad!

A php script is used to add a cart to the page. This script using various classes. I’m adding this script to the page twice, although displaying different elements in each.

In HTML stack A the class.btn-group .btn the default background colour of white is applied. This is fine. But the script in HTML stack B also uses the same class, but in this instance I want the background to be black.

Using the css above I change change the default background to black, but if I add this css to the page, it changes the backgrounds in both HTML stacks, whereas I only want to change it in HTML stack B.

I thought I could just add the custom class cart-block to HTML stack 2 and add that class to the beginning (or end) of the default class: .btn-group .btn, so making it something like .cart-block.btn-group .btn, but that ain’t working.

So I’m trying to work out how to do that.

Make sense?

4

This addresses a button inside an element with both the classes of cart-block and btn-group

So far as I understand, your button group is a child of your cart-block (HTML stack) and so you should use the decendent selector - i.e. a space

.cart-block .btn-group .btn

This says (read right to left) a class of button that is a child (inside) of an element with a class of btn-group that is itself a child (inside) of an element with a class of cart-block

3 Likes
5

Bingo!

You know, I did try that. With a space, without a space, with a dot, without a dot, with a hash, with a hash… None worked. But of course now, it does work!

I bet this is an instance of RW and it’s love for caching!

Many thanks.