Autor | Zpráva | ||
---|---|---|---|
anon Profil * |
#1 · Zasláno: 14. 2. 2021, 10:28:21
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 |
#2 · Zasláno: 14. 2. 2021, 10:38:41
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 * |
#3 · Zasláno: 14. 2. 2021, 11:08:35
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 |
#4 · Zasláno: 14. 2. 2021, 23:14:10
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 * |
#5 · Zasláno: 15. 2. 2021, 07:25:06
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é. :-) |
||
Časová prodleva: 3 roky
|
0