5

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>
2

4 Answers 4

15

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/

2
  • This is the right answer. CSS hacking like this is always fun! :) Nov 26, 2012 at 10:52
  • The right answer? my answer was exactly the same and posted before, just doesn't have the jsfiddle so it's not wrong
    – dsgriffin
    Nov 26, 2012 at 10:53
4

You just need a selector more specific than body.mine div, so that it overrides the less specific selector. Try something like:

body.mine div.blue-border {border:1px solid blue}
2

This could also be a perfect use case for !important.

.blue-border {border:1px solid blue !important}

I realise that the use of !important is often frowned upon, but .blue-border is obviously a utility class that only does one thing, which means that the class shouldn't be used if the intented result is a red border.

In this instance I would prefer !important over the use of an over qualified selector, because over qualified selectors could have a major performance impact.

0

If you desire to change any property in all elements with css, do NOT define this property in specific elements:

html body div#very .specific { 
  /*  Any prop that is NOT the ones you want to apply generally  */ 

   margin: ...
   font-weight: ...

  /* NOT color, nor background, etc */
}


/* These now will catch in the above too */
.blue{ 
   color: blue;     
}
.back-yellow{   
   background: #ff0;
}

Explanation: the color and background will apply on all elements that don't have a more specific definition of color/background.

So, only define color in specific CSS path if you want to override the general rules.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.