Ashis Biswas Ashis Biswas - 5 months ago 11
CSS Question

How to hide first level span element by CSS ">" selector

Here is my HTML code



.wrapper.mini-menu .sidebar-nav li > span{
display: none;
}

<div class="wrapper mini-menu">
<div class="header"></div>
<div class="sidebar">
<ul class="sidebar-nav">
<li>
<a href="#">
<i class="fa fa-home"></i>
<span>Hide Item1</span>
<i class="fa arrow pull-right"></i>
</a>
<ul class="sub-menu">
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 1</span>
</a>
</li>
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 2</span>
</a>
</li>
</ul>
</li>

<li>
<a href="#item1">
<i class="fa fa-dashboard"></i>
<span>Hide Item2</span>
</a>
</li>
<li>
<a href="#item1">
<i class="fa fa-cogs"></i>
<span>Hide Item3</span>
</a>
</li>
</ul>
</div>
</div>





I want to hide hide
item1
, hide
item2
and hide
item3
. But I don't want to hide
show
items. If I don't use
>
selector it hides all span elements. How to select only those item by CSS
>
selector?

Answer

What your current CSS selector is saying is:

Hide all spans that are children of li that are descendants of .sidebar-nav. If you only want to target first level li elements do this instead:

.wrapper.mini-menu .sidebar-nav > li > a > span {
  display: none;
}