Is it possible to use CSS alone to filter a list of items based on specific links being clicked? I have a list that should display only certain items when corresponding links are clicked.
HTML:
<!-- Header links -->
<a href="#" class="all" tabindex="-1" title="All" >All</a>
<a href="#" class="web" tabindex="-1" title="Web">Web</a>
<a href="#" class="graphic" tabindex="-1" title="Graphic">Graphic</a>
<a href="#" class="music" tabindex="-1" title="Music">Music</a>
<!-- Content -->
<li class="web"><a href="#">Web</a></li>
<li class="music"><a href="#">Music</a></li>
<li class="graphic"><a href="#">Graphic</a></li>
<li class="web"><a href="#">Web</a></li>
<li class="music"><a href="#">Music</a></li>
<li class="graphic"><a href="#">Graphic</a></li
<li class="music"><a href="#">Music</a></li>
<li class="graphic"><a href="#">Graphic</a></li>
CSS
a[class="web"]:focus ~ li:not([class="web"]) {
height:0px;
width:0px;
border:none;
margin:0;
display:none;
}
a[class="graphic"]:focus ~ li:not([class="graphic"]) {
height:0px;
width:0px;
border:none;
margin:0;
display:none;
}
a[class="music"]:focus ~ li:not([class="music"]) {
height:0px;
width:0px;
border:none;
margin:0;
display:none;
}
I am trying to wrap a div around the header links, but this seems to interfere with the functionality. How can I make this work seamlessly?
Check out the JSFiddle Demo