CSS / Show not the class which is not class

Question

Is it possible to hide all elements of an class which are not the same as the class. i tried the code below but its not working.

li.show *>:not(.show) {
 display: none !important;
}

what do you want exactly? something like this http://jsfiddle.net/victor_007/e1s2qsw1/? — Vitorino fernandes, Nov 06 '15 at 09:25
Current code is targeting the child of the show class, not the show class itself. — m4n0, Nov 06 '15 at 09:26
There is a
with multiple classes.
and
and
I want to hide every
which is not — Jörn Matthes, Nov 06 '15 at 09:28
classes and ids cannot start with num http://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors you will not be able to target them — Vitorino fernandes, Nov 06 '15 at 09:30
The side is http://zweiundvierzig.de/klinikum/ It is at the bottom of the Screen. every code i tried caused that the whole jobblock is hidden. — Jörn Matthes, Nov 06 '15 at 10:23

score 1 · Answer 1 · answered Nov 06 '15 at 09:39

do you want like this.?

ul.hello>li:not(.hello){
    display : block;
    border:1px solid grey;
}
ul.hello>li.hello{
    display : block;
    border:1px solid red;
}

<ul class="hello"> 
    <li>with multiple classes.</li>
    <li class="hello"> and</li>
    <li class="aetw"> and</li>
    <li class="hello"> I want to hide every </li> 
    <li class="sdf"> and</li>
    <li class="hello"> I want to hide every </li> 
</ul>

here is jsfiddle Demo

score 1 · Accepted Answer · answered Nov 06 '15 at 10:05

The problem in your fiddle is that you write <div> instead of </div> everywhere, which causes all the content to end up in the first div in the li.

Solution: correct all the errors, then it will work as expected.

.show1 :not(.show1),
.show2 :not(.show2) {
  display: none
}

<ul>
  <li class="show1">
    <div class="show1">show1</div>
    <div class="hide">hide</div>
    <div class="hide">hide</div>
    <div class="hide">hide</div>
  </li>

  <li class="show2">
    <div class="hide">hide</div>
    <div class="show2">show2</div>
    <div class="hide">hide</div>
    <div class="hide">hide</div>
  </li>
</ul>

score 0 · Answer 3 · answered Nov 06 '15 at 09:34

0

Try to use:

li.show *:not(.show) {
    color:red;
    /*display: none;*/
}

jsfiddle example

answered Nov 06 '15 at 09:34

Aminesrine

2,082
6
35
64

CSS / Show not the class which is not class

3 Answers3