CSS - Two CSS file having same class not loading properly

Question

I have two css files having the following class definition

default.css ( Loaded First )

#order-standard_cart .products .product header {
    background: #f8f8f8 none repeat scroll 0 0;
    border-radius: 3px 3px 0 0;
    margin: 0 1px;
    padding: 10px 20px;
    position: relative;
}

custom.css ( Loaded 2nd )

#order-standard_cart .products .product header {
    background: #7EBBF3 none repeat scroll 0 0;
}

Even after loading second, the background property is not getting applied on any of the browsers and only the first CSS file is being applied.

Can you create a minimal reproducible example that demonstrates the issue? Preferably as a snippet here in the question. The website itself contains too many elements and styles to pinpoint the problem, and besides, since you're currently working on it, it may soon no longer match the problem description in the question. In addition, creating a minimal reproducible example may well help you solve the case yourself. — Mr Lister
– Mr Lister, Commented Jan 29, 2017 at 18:07
Yes, the offending line is indeed in a later stylesheet than the one you think it is in. @Banzay, why not post that as an answer? — Mr Lister
– Mr Lister, Commented Jan 29, 2017 at 18:16

Banzay · Accepted Answer · 2017-01-29 18:24:49Z

1

line 213 in your html code overrides your custom styles

at the header of page file all.css is loaded from payments/templates/six/css/ relative path

line 213 loads file all.css from /payments/templates/orderforms/standard_cart/css/

answered Jan 29, 2017 at 18:24

Banzay

9,4802 gold badges32 silver badges46 bronze badges

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

1 Comment

Prateek Over a year ago

Yup! I see it. Thanks a lot :)

Constantin Galbenu · Accepted Answer · 2017-01-29 18:24:05Z

1

You include the file all.min.css?v=6235b7 a second time on line 213 and thus the selector from this file has greater priority and overwrite the selector from custom.css

answered Jan 29, 2017 at 18:24

Constantin Galbenu

17.8k3 gold badges41 silver badges57 bronze badges

2 Comments

Prateek Over a year ago

Thanks a lot for your help, but @Banzay provided the solution first so his answer was accepted :)

Constantin Galbenu Over a year ago

I lost a few seconds because I tried to provide you with a printscreen then changed my mind.

Collectives™ on Stack Overflow

CSS - Two CSS file having same class not loading properly

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related