Autor Zpráva
anon
Profil *
Ahoj všem,

narazil jsem na pěkný příklad čistého použití css k filtrování položek: Jednoduché filtrování dat v čistém CSS

Ovšem není mi jasné dědičnost u těch selektorů, kdybych chtěl třeba napozicovat či jinak nastylovat jen ty checkboxy / inputy - řekněme, že bych je obalil do divu s nějakou třídou... Jenže pak to nefunguje. Trochu jsem to zkoušel měnit CSS aby to šlo a nedaří se mi to nijak jinak. Zde pro pochopení nefunkční živá ukázka s nastylovanými čudlíky; stačí odstranit z html ten div a fungovat zas začne!

Jaké by mělo být CSS aby to šlo i s tím divem? Lámu si nad tím hlavu a nejde mi to!
lionel messi
Profil
anon:
stačí odstranit z html ten div a fungovat zas začne!

Je to kvôli tomu, že ~ je selektor ľubovoľného súrodenca. Všimni si v odkázanom linku slová ve stejné úrovni.
anon
Profil *
lionel messi:
Ale to já vím, jenže co to prakticky znamená? Když odstraním ~ tak to nefunguje. Jde mi o to: jak upravit CSS, aby tam mohl zůstat div?
Keeehi
Profil
anon:
jak upravit CSS, aby tam mohl zůstat div?
To nelze. V CSS můžeš lézt do struktury hlouběji, nebo můžeš i zaměřit sourozence. Co ale nejde je jít o úroveň výše. Což je ale přesně ten tvůj problém. Aby jsi se z toho inputu dostal na tu položku seznamu, musel bys v tom stromu elementů jít nahoru přes ten div co jsi tam přidal. Můžeš obalit do něčeho ten seznam, ale čudlíky obalit nemůžeš. O této podmínce je v tom článku psáno.
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.

Co tedy musíš udělat, je upravit kreativně html a css tak, aby to splňovalo ta omezení, ale vypadalo to jak ty chceš. Vím, že tvůj příklad je primitivní a v reálu to bude těžší dosáhnout toho co budeš potřebovat, ale pro ukázku jsem tvoji nefunkční ukázku upravil tak, aby fungovala (splňovala podmínku na strukturu) a zároveň vypadala jak ta nefunkční. Živá ukázka
anon
Profil *
Keeehi:
Díky moc, už rozumím! Ani mi teď nešlo o nějakou konkrétní implementaci, protože bych vystačil i s nenastylovaným inputem, ale trápilo mě nepochopení toho problému.
Že nemůžu jít v zaměření "nahoru" jsem nějak podvědomě možná tušil, ale nikdy jsem si to tak jasně neformuloval.
Teď je to už jasné. :-)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0