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
Post a Comment