O webu
Filtrování dat v CSS
  • Michael Schumacher
  • Fernando Alonso
  • Kimi Räikkönen
  • Lewis Hamilton
  • Jenson Button
  • Sebastian Vettel
  • David Coulthard
  • Mark Webber

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.