CSS selector overriding
css, css-selectors
Solution
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/
Problem
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> ```