html - How can I ignore inherited styles without using "!important"? -


i don't know if it's possible, know how can ignore inherited css styles in new class without using !important 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 ignore inherit class without use !important} .sub-text span {i want ignore inherit class without use !important} 

if want target span, h2 , p within .text , not within .sub-text should use selector >

like this:

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

that target h2 direct child of .text.

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

and demo.


Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -