Filter items with css only

Question

I want to filter a list of items with css only. The list should filter the items when a specific link is 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 want to place a div around the header links. But this wrapping div breaks the functionality. How can I achieve that?

Here is a JSFiddle Demo

You should include your CSS in the question; the (clever!) way you are achieving the filtering functionality - via a `:focus` pseudo-selector and a sibling selector - is currently non-obvious without following the JSFiddle link. I do not think it is possible today for you to achieve the functionality you want if you wrap the ``s in a `
`, because I do not think there is any way to write CSS that targets a `

cch · Answer 1 · 2015-03-23T16:40:51.587

0

It is possible to have a div around the a tags, but you will also need to have the li items in the same container. The reason for that is because there aren't parent selectors yet available in CSS.

Why do you want to have a div around the a headers?

If that is because of styling them, why not specifying the a classes you want for the heading links and then add CSS:

a.all, a.web, a.graphic, a.music {
  // Your heading css
}

Here is an example: http://codepen.io/anon/pen/xbPYNX

edited Mar 23 '15 at 16:40

answered Feb 01 '15 at 17:12

cch

3,067
5
29
58

Is it possible to add a block div around a tags? – dpn Feb 05 '15 at 06:19

Filter items with css only

1 Answers1