1

I don't know if it's possible, but does anyone know how can I ignore all the inherited CSS styles in a new class without using !important for each one?

My HTML code:

<div class="text">
   <h2>Title</h2>
   <span>Date</span>
   <p>Text here...</p>
   <div class="sub-text">
      <p>More text!</p>
      <span>Thanks!</span>
   </div>
</div>

CSS:

.text {width:100%; float:left;}
.text h2 {font-size: 20px;}
.text span {font-size: 12px; font-style: italic;}
.text p {font-size: 12px;}

.sub-text {width: 100%; float: left;}
.sub-text p {I want to ignore all inherit class without use !important}
.sub-text span {I want to ignore all inherit class without use !important}
1
  • 2
    You should probably use more specific selectors or refactor your DOM structure. You should aim to use !important as little as possible. Aug 23, 2013 at 18:56

3 Answers 3

5

If you only want to target the span, h2 and p within .text and not within .sub-text you should use the selector >

Like this:

.text > h2 { font-size: 20px; }

That will target all h2 that are a direct child of .text.

Also check http://www.w3schools.com/cssref/css_selectors.asp,

And this demo.

0
0

use the following:

.text {width:100%; float:left;}
.text > h2 {font-size: 20px;}
.text > span {font-size: 12px; font-style: italic;}
.text > p {font-size: 12px;}

.sub-text {width: 100%; float: left;}
.sub-text p {/* there is nothing inherited now */}
.sub-text span {/* there is nothing inherited now */}

So the > means that only direct children of .text get the css...

0

CSS uses precedence, so any css written after the before css should overwrite. If it doesn't then that means you aren't being specific enough with your statements.

Your Answer

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

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