2

I have a simple problem. I have exact same divs (without texts) inside another. I want to style outer csseffect with children, but not inside cssffect.

Let me show you.

Example CSS:

.cssEffect .bold{font-weight: bold;}
//Super Secret Faraday Code

Example HTML:

<div class="cssEffect effected">
    <span class="bold">Hey I'm Red!</span>
    ~~ some random stuff ~~

    <div class="cssEffect faraday">
        <span class="bold">I shouldn't be bold.</span>
        ~~ some random stuff ~~
    </div>

</div>

And I expect something like this:

Hey I'm Bold

I shouldn't be bold.

But I cant figure out how. I thought I can do something like this:

.cssEffect .bold + .cssEffect.faraday{
    //I dont really know what I should write here for not styling here
}

And I thought if I could change the code like this it would solve:

.cssEffect:not(.faraday) .bold{font-weight: bold;}

But the outer div effects inner one. I couldnt figure out how to solve this.

Any Ideas?

Thanks for your help!

Edit: And no, I know "!important" means. I dont want to ignore all styles, I just want to make that inside a div.

  • 1
    This doesn't seem to be a duplicate. The other question wants to ignore all styles, this one just asks about the parent styles. – KWeiss Apr 27 '16 at 14:18
  • 1
    I see someone has already pointed it out in a answer, but nesting css in SASS would be an clean way of doing this. I can code a example if you wish. – Beep Apr 27 '16 at 16:54

1 Answers1

0

Your inner div will always inherit inheritable properties (like font-weight) from its parent. If you want these properties to be different, you will have to overwrite them explicitly:

.effected .bold {
    font-weight: bold;
}

.effected .faraday .bold {
    font-weight: normal;
}

Here's a list of inheritable properties: Which CSS properties are inherited?

Community
  • 1
  • 1
KWeiss
  • 2,954
  • 3
  • 21
  • 37
  • Well, the properties are not known to me. This was just an example for that. I am on a client-side project. The user defines them. –  Apr 27 '16 at 14:23
  • You can only give your inner `div` a defined style for each property, there is no way in CSS to tell the element "ignore your inherited rules" – KWeiss Apr 27 '16 at 14:45
  • Well, I found **all:unset;** but it doesnt work as i expected. If I go with !important, it blocks everything. And If I dont go with !important, it does not effect at all. –  Apr 27 '16 at 14:47
  • 1
    `all: unset` only unsets properties that are *not* inherited - the opposite of what you want. – KWeiss Apr 27 '16 at 14:49