pstein Posted October 17, 2016 Share Posted October 17, 2016 (edited) Lets start with an example: <div class="aaa bbb" ...> <p class="ccc" ....> firsttext </p> </div> <div class="aaa ddd" ...> <p class="eee"> secondtext </p> </div> and the corresponding CSS rules: .ccc { font-size: 18px; line-height: 18px }; .eee { font-size: 25px; line-height: 25px }; As far as I understand more special CSS rules (inside an element) overwrite always the more general CSS rules of the enclosing element.So if I define .aaa { font-size: 14px; line-height: 14px; }; then the .ccc and .eee rules win.Is there a way to overcome this priority rule hierachy so that all more special CSS rules inside are overwritten anyway by the outer CSS rule?"!important" does not work since it overwrites only possibly existing rules for the same class. So .aaa { font-size: 12px !important; line-height: 12px !important; }; only overwrites only the old .aaa rule but not the rules inside. However I could imagine that there is an option to brutally overwrite all every more special rule inside an element.How can I achieve this?Peter Edited October 17, 2016 by pstein Link to comment Share on other sites More sharing options...
Ingolme Posted October 17, 2016 Share Posted October 17, 2016 You have to target that element rather than one of its ancestors. In your case, since they're both <p> elements .aaa p would work as a selector. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now