Menu
I'm trying to merge two CSS files from different vendors. The first one defines
body.mine div {border:1px solid red}
The second one
.blue-border {border:1px solid blue}
In the generated HTML, you can find
<div class="blue-border">hello</div>
This looks red, not blue. I can't modify the HTML, nor the first CSS code. My only "hope" is to modify the second CSS. Any hints? Thank you very much!
Example:
<html>
<head>
<style>
body.mine div {border:1px solid red}
.blue-border {border:1px solid blue}
</style>
</head>
<body class="mine">
<div>hallo</div>
<div class="blue-border">hello</div> <- looks red, not blue as I want
</body>
</html>
617
Just make the selector more specific:
body.mine div.blue-border {border:1px solid blue}
This tells the browser to look for a much more specific element: A div with a class of blue-border that is a child of a body element that has a class of mine.
Yours just said "select anything that has a class of blue-border" and this was way less specific than the previous selector.
http://jsfiddle.net/Kyle_Sevenoaks/tcWK5/
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
