Show and hide element using css not working

Question

I have an unordered list element contains list of elements like this.

<div class="menu">
<ul>
<li class="menu-x">x1</li><li class="menu-x">x2</li><li class="menu-x">x3</li>
<li class="menu-y">y1</li><li class="menu-y">y2</li><li class="menu-y">y3</li>
<li class="menu-z">z1</li><li class="menu-z">z2</li><li class="menu-z">z3</li>
</ul>
</div>

And in the css when using display: inline;.it is not showing or hiding the particular element.So this is my css.

div.menu li{
  display: inline;
  border-radius:2px;
  font-size:12px;
  margin:5px;
  box-shadow:0 0px 5px #FFFFFF;
  padding:7px 7px 0px 7px;
}
li.menu-y{
  display:none;
}
li.menu-z{
  display:none;
}

fiddle is here

you can use float:left instead of display:inline

Zubair sadiq
– Zubair sadiq

2016-04-13 06:07:47 +00:00
Commented Apr 13, 2016 at 6:07 — Zubair sadiq
– Zubair sadiq, Commented Apr 13, 2016 at 6:07

Harry · Accepted Answer · 2016-04-13 06:04:54Z

The display: none has no effect because the earlier selector div.menu li is more specific and so it takes precedence. Change the selector to something like div.menu li.menu-y.

The selector div.menu li has a specificity of 012 because it has 1 class selector and 2 element type selectors as part of it whereas the li.menu-y and li.menu-z selectors have a specificity of only 011 because it has only 1 class selector and 1 element type selector as part of it.

Changing the selector to div.menu li.menu-y would mean that the specificity becomes 022. Thus, it it will take precedence over div.menu li and so the display: none will take effect.

Or even .menu li-menu-y would be sufficient because its specificity is 021 (2 classes and 1 element type) but I prescribed the other because I felt it was more consistent with your earlier selector.

div.menu li {
  display: inline;
  border-radius: 2px;
  font-size: 12px;
  margin: 5px;
  box-shadow: 0 0px 5px #FFFFFF;
  padding: 7px 7px 0px 7px;
}
div.menu li.menu-y {
  display: none;
}
div.menu li.menu-z {
  display: none;
}

<div class="menu">
  <ul>
    <li class="menu-x">x1</li>
    <li class="menu-x">x2</li>
    <li class="menu-x">x3</li>
    <li class="menu-y">y1</li>
    <li class="menu-y">y2</li>
    <li class="menu-y">y3</li>
    <li class="menu-z">z1</li>
    <li class="menu-z">z2</li>
    <li class="menu-z">z3</li>
  </ul>
</div>

Ivin Raj · Accepted Answer · 2016-04-13 06:00:49Z

0

try this one:

div.menu li{
  display: inline;
  border-radius:2px;
  font-size:12px;
  margin:5px;
  box-shadow:0 0px 5px #FFFFFF;
  padding:7px 7px 0px 7px;
}
.menu .menu-y{
  display:none;
}
.menu .menu-z{
  display:none;
}

DEMO HERE

answered Apr 13, 2016 at 6:00

Ivin Raj

3,4312 gold badges34 silver badges70 bronze badges

1 Comment

Rayon Over a year ago

It is great that you have a solution but you should have a valid reason for that!

Prasad Khode · Accepted Answer · 2016-04-13 07:10:18Z

0

Try like this:

ul li .menu-y {
  display:none;  
}

ul li .menu-z {
  display:none;  
}

edited Apr 13, 2016 at 7:10

Prasad Khode

6,77712 gold badges48 silver badges62 bronze badges

answered Apr 13, 2016 at 6:02

Kartikeya Sharma

5531 gold badge5 silver badges22 bronze badges

Collectives™ on Stack Overflow

Show and hide element using css not working

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related