2

Sure this is a too easy question but incredibly I did not understande why this code does not run as desired.

HTML:

<div>
  <div class="remember">
    <a class="foo">INSIDE text (Should be black)</a>
  </div> 
</div>

<br>
<a class="foo">OUTSIDE text (Should be red)</a>

CSS:

div:not(.remember) .foo
{
  color:red;
}

Here the JsFiddle.

I would like that every item with class .foo OUTSIDE a parent with class .remember will be red, but it seems that "not" clause does not fire.

Where is my error?

Luca Detomi
  • 5,564
  • 7
  • 52
  • 77
  • Give `:not(.remember) > .foo` a try. `:not(.remember)` also selects the ``, `` and `` elements as well, hence the nested `.foo` was treated by `:not(.remember) .foo`. – Hashem Qolami Nov 26 '14 at 09:28

3 Answers3

1

Your upper most <div> doesn't have .remember, it passes your selection and so .foo has styles changed. Use the child combinator.

Your selection requires that the parent that isn't .remember is also a <div>, because you haven't given your second .foo a parent, in this case, its parent will be <body>. If you don't make this restriction, it is black in colour, as expected.

:not(.remember) > .foo {
    color:red;
}
<div>
  <div class="remember">
    <a class="foo">INSIDE text (Should be black)</a>
  </div> 
</div>

<br>
<a class="foo">OUTSIDE text (Should be red)</a>
George
  • 36,413
  • 9
  • 66
  • 103
  • The first should be black. It isn't because of the parents parent div which doesn't have the class `remember` – Turnip Nov 26 '14 at 09:27
  • Thanks George, your solution is perfect for my problem. I did not think about fact that "upper most
    doesn't have .remember, it passes selection". It is very specific and not so general like Ivaylo's one but perfect and very compact for my specific need.
     – Luca Detomi Nov 26 '14 at 09:46
1

Here is a working jsfiddle

  • The a.foo was not inside a div, it is fixed. The div:not(.remember) .foo expects the link to be inside of a div.

    <div>
  <div class="remember">
    <a class="foo">INSIDE text (Should be inherited)</a>
  </div> 

  <br>
  <a class="foo">OUTSIDE text (Should be red)</a>    
</div>

  • There was no style for div.reminder .foo, it should specifically inherit from the parent style. 

    div:not(.remember) .foo
{     
    color:red;
}
div.remember .foo { color: inherit; }

In the above fiddle, I added the first line which should represent any styles already set to the page (parent containers and etc). Its purpose is to play with it in order to see how the inner content behaves. You can remove it safely, the behavior will be as expected. The div.remember .foo will simply inherit them rather than force something else. However

Ivaylo Slavov
  • 8,839
  • 12
  • 65
  • 108
  • I don't want to FORCE black color to item inside `.remember` div to override more general declaration. I would like to "apply red color to all elements EXCEPT those child of a container with `.remember` – Luca Detomi Nov 26 '14 at 09:31
  • I'm sorry but it not the solution. Again you are specifing colors twice. In addition my example use "color" declaration but problem is more general and should be solved with any declaration like "display:none" for example. – Luca Detomi Nov 26 '14 at 09:39
  • @LucaDetomi, see my update. The fist css line is optional, I added it so I can play with the fiddle, and you too if you wanted. The `color: inherit` is the thing that makes it work, so you cannot skip it in my solution. You can use `inherit` with whatever other styles you have in the same manner – Ivaylo Slavov Nov 26 '14 at 09:42
  • @Luca, as I said, the first line in the fiddle is to play with it, I updated it - http://jsfiddle.net/Lp8v118z/3/, now it is green, remove it and it will be black. Also, the code in the post is what you actually need :) – Ivaylo Slavov Nov 26 '14 at 09:45
  • Thanks Ivaylo, I voted up your solution even if at the end I accepted George's one. Yours is more general and it runs correctly not regarding hierarchy of child elements of `.remember` tag, but others is more compact and perfect for specific situation explained in question. Thanks anyway for your help :-) – Luca Detomi Nov 26 '14 at 09:49
  • 1
    @LucaDetomi, glad I helped. My solution was intentionally based on your initial example. – Ivaylo Slavov Nov 26 '14 at 09:56
0
a.foo{color:red;}
.remember a.foo{color:black;}

This will cause all .foo elements to be red, unless it is nested inside the parent .remember, it will then be black.

http://jsfiddle.net/92gnt7qt/

Gezzasa
  • 1,443
  • 8
  • 17
  • Please read other comments on other answers: I don't want to FORCE black color to item inside `.remember` div to override more general declaration. I would like to "apply red color to all elements EXCEPT those child of a container with `.remember`" – Luca Detomi Nov 26 '14 at 09:42
  • 1
    You should update your question instead of having people read other answers. Will have another look for you. – Gezzasa Nov 26 '14 at 09:50
  • Check out this question http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – Gezzasa Nov 26 '14 at 09:54