Jednoduché filtrování dat v čistém CSS

Jak?

Využívá se:

1. selektoru :checked (pro vybraný formulářový prvek radio nebo checkbox),
2. selektoru ~ (libovolný sourozenec),
3. obyčejných tříd – každá položka má třídy podle příslušné skupiny (jedna položka může (ale nemusí) patřit do více skupin).

   <li class="ferrari mercedes">Michael Schumacher</li>

Na začátku se všechny položky skryjí (display: none) a při

input#id-inputu:checked ~ ul .nazev-prislusne-tridy {display: list-item}

… se opět objeví.

Důležité je, aby se bylo jak dostat z input:checked na jednotlivé položky, <input> proto nemůže být hlouběji zanořen.

Starší prohlížeče

Aby se v nepodporovaných prohlížečích zobrazil alespoň seznam bez možnosti filtrování, položky se schovávají přes :not(:checked). Pokud je tedy prohlížeč dokáže skrýt, dokáže je i zobrazit.

Vyřešit funkčnost pro starší Explorery a jiné by mohl vyřešit jednoduše JS:

• Při kliknutí na <input> nastavit pro jeho rodiče (this.parentNode) třídu (className) třeba dle identifikátoru (this.id),
• zjednodušit CSS a položky zobrazovat při .trida-rodice .trida-skupiny {}.

A nebo vytvořit plnohodnotný formulář a data posílat vyfiltrovat na server.

Vyhledávání textu na stránce

Se špetkou JavaScriptu je možné na webu vyhledávat.