Выберите категоризированные элементы без Javascript

Question

Я хотел бы создать единую страницу с состоянием отображения категоризированных элементов, установленных в зависимости от выбора пользователя. В идеале, я хотел бы, чтобы это была глава/хеш (: цель), но также было бы хорошо с состоянием флагов.

Как упражнение, я стараюсь избегать использования Javascript для этой цели. Однако это не представляется возможным, но я бы очень хотел, чтобы меня доказали неправильно.

Чтобы уточнить: этот конкретный пример использования включает сбор элементов на странице, каждая из которых может принадлежать одной или нескольким категориям. Пользователь выберет категорию, а затем все элементы, соответствующие этой категории, будут иметь состояние display, установленное в block. Если одна из категорий элемента не выбрана, она будет скрыта (display: none). Например, если вы могли бы выбрать класс вместо ID с :target, это может выглядеть следующим образом:

<a href="#category1>Category 1</a> 
<a href="#category2>Category 2</a> 
<a href="#category3>Category 3</a> 

<span class="category1 category2">Item 1</span> 
<span class="category2 category3">Item 2</span> 
<span class="category3">Item 3</span> 

и CSS:

span { 
    display: none; 
} 
:target { 
    display: block; 
} 

(Это легко сделать в Javascript, поэтому нет необходимости чтобы указать это.)

Answer 1

Вы не можете использовать <a>, потому что у нас нет селектора css для (un) щелчка по элементу. Но с флажками, у нас есть :checked

<input type="checkbox" value="1" id="cat1" name="category">Category 1</label> 
<input type="checkbox" value="2" id="cat2" name="category">Category 2</label> 
<input type="checkbox" value="3" id="cat3" name="category">Category 3</label> 

<span class="category1 category2">Item 1</span> 
<span class="category2 category3">Item 2</span> 
<span class="category3">Item 3</span> 

и CSS

#cat1:checked ~ span.category1 { display:block!important; } 
#cat2:checked ~ span.category2 { display:block!important; } 
#cat3:checked ~ span.category3 { display:block!important; } 

span { display:none; } 

увидеть его вживую: http://jsfiddle.net/FV2Eq/7/

Немного объяснение ~

Этот родственный комбинатор похож на X + Y, однако, он менее строг. В то время как смежный селектор (ul + p) будет выбирать только первый элемент, которому сразу предшествует предыдущий селектор, он более обобщен. Он будет выбирать, ссылаясь на наш пример выше, на любые p элементов, если они следуют за ul.

Значит, вы должны держать их в одном контейнере, как в примере.