Autor | Zpráva | ||
---|---|---|---|
Milan1236000 Profil |
#1 · Zasláno: 27. 7. 2015, 23:34:33
Zdravím, mám na mysli něco v tomhle smyslu
sup :hover {table {background-color: rgb(255,255,0);}} |
||
juriad Profil |
Milan1236000:
Jde to, ale musí být buď potomek, pozdější sourozenec nebo potomek pozdějšho sourozence. Na ukázce můžeš vidět, co vše lze ovlivnit. Jiné prvky lze ovlivnit pomocí JS nebo nepřímo, že to tak jen bude vypadat. |
||
Milan1236000 Profil |
#3 · Zasláno: 28. 7. 2015, 00:01:01
juriad:
Díky za příklad, ale obávám se, že to asi nepůjde, protože já to mám asi takhle: Matka0 má syna0 a dceru0, syn0 má syna1; dcera0 má dceru1. Po najetí na syna1 potřebuji obarvit dceru1. Jestli to tedy správně chápu, půjde to jedině přes JS? |
||
juriad Profil |
#4 · Zasláno: 28. 7. 2015, 00:04:45
Ano, obecně jen pomocí JS. Existují však triky, jak to udělat elegantně; často stačí jen přidat/odebrat třídu.
|
||
lionel messi Profil |
#5 · Zasláno: 28. 7. 2015, 00:05:50
Milan1236000:
> já to mám asi takhle: > Matka0 má syna0 a dceru0, syn0 má syna1; dcera0 má dceru1. Po najetí na syna1 potřebuji obarvit dceru1. A nie je to prípad, ktorý spomínal juriad: „potomek pozdějšho sourozence. “? Nájdi v zmienenej ukážke na BB a sleduj zmeny CC, resp. DD. |
||
juriad Profil |
lionel messi:
Není, musíš mít navěšený hover na syna1 a CSS selektorem můžeš zacílit jen jeho potomky a sourozence. Nikoli sourozence a jiné potomky svého rodiče. |
||
Tomáš123 Profil |
#7 · Zasláno: 28. 7. 2015, 06:25:42
juriad:
Prečo ešte neprišiel do obehu symbol < v selektore? :-)
|
||
juriad Profil |
Tomáš123:
Nejspíše z filosofických a výkonostních důvodů. Dokud selektor může zacílit jen něco uvnitř nebo dále (tedy vždy ve stejném podstromu), lze dělat různé optimalizace, které by jinak nešlo. Máš-li čas přečti si článek www.html5rocks.com/en/tutorials/internals/howbrowserswork. Popisují se tam struktury, které se používají pro reprezentaci pravidel CSS. |
||
Tomáš123 Profil |
#9 · Zasláno: 29. 7. 2015, 00:22:19
juriad:
Nečakal som hodnotnú odpoveď. Ďakujem za zdroj, zajtra si čas určite nájdem. |
||
Chamurappi Profil |
#10 · Zasláno: 29. 7. 2015, 00:46:02
Možná existuje řešení, za cenu trošku ošklivějšího HTML. Nedávno jsem si všiml, že minimálně v některých prohlížečích (nevím, kde všude a jak spolehlivě) umí
<label> zpropagovat události myši na formulářový element, ke kterému se váže, včetně událostí způsobujících :hover . Byl bych rád, kdyby to někdo důkladněji otestoval: Živá ukázka
Reaguji na Tomáše123: V návrzích selektorů CSS 4, které jsem pročítal před třemi roky, byla plánovaná speciální syntaxe, kterou by se uvnitř selektoru poznačila ta jeho část, která má být celým selektorem zacílená. Selektor $div h1:hover by zaměřil <div> , pokud by se v něm najelo na <h1> . Později se syntaxe změnila z dolaru na vykřičník, následně vypadla úplně… nebo jsem si možná jen nevšiml jejího přetvoření na pseudotřídu :has() .
|
||
Bubák Profil |
#11 · Zasláno: 29. 7. 2015, 01:01:37
Chamurappi:
Stará klasická Opera nic a aktuální Chrome taky nic. |
||
bubák Profil * |
#12 · Zasláno: 29. 7. 2015, 06:19:38
Ve Firefoxu 19 ukázka funguje a v aktuálním Firefoxu 29 zase nic. Nechce se mi zjišťovat, kdy došlo ke změně.
|
||
Tomáš123 Profil |
Chamurappi:
Vedel by si mi vysvetliť, ako to vlastne funguje? Povedal by som, že s druhým blokom to nijako nesúvisí. :has() vie pravdepodobne zamerať rovnaké elementy ako staršie verzie. V kombinácii s :not() to bude fakt šikovné. Prečítam si aj ostatné plány do CSS4.
Niekedy ma trochu štve, ako to všetko zjednodušujú. O chvíľu už programátor/kóder bude môcť byť úplne každý. Kedysi keď chcel niekto napríklad vytvoriť layout s rovnako vysokými stĺpcami, musel sa dlho zamýšľať nad riešením (myslím ešte pred tým, než sa metóda obrázku dostala do povedomia snáď všetkých, čo sa tomu chvíľu venujú), čoskoro bude flexbox natoľko podporovaný (nie že by už teraz nepodpora vadila „technologicky pokročilým“), že um nebude potrebný. Inak ukážka funguje aj v najnovšom Exploreri. bubák: Mozilla má v sebe nejaký nástroj na prepínanie verzií alebo ich máš proste nainštalovaných viacero? |
||
Bubák Profil |
#14 · Zasláno: 30. 7. 2015, 17:02:36
Tomáš123:
Aktualizoval jsem Firefox v Live Linuxu. |
||
Chamurappi Profil |
Reaguji na Bubáka:
„a aktuální Chrome taky nic“ Hm, Webkit nemá rád, když je <input> neviditelný. Řekl bych, že zviditelnění asi pomáhá (+ odpozicování pryč).
Klasické Opeře ale asi není pomoci. Reaguji na Tomáše123: „Vedel by si mi vysvetliť, ako to vlastne funguje?“ V některých prohlížečích umí <label> vyvolávat :hover na elementu, ke kterému se váže atributem for . Takže v druhém bloku je <label> , v prvním je skrytý <input> – při najetí na <label> zapůsobí input:hover a tedy i selektor input:hover + něco umí zaměřit sourozence <input> u.
„ :has() vie pravdepodobne zamerať rovnaké elementy ako staršie verzie.“
Ano, pokud mají dva elementy společného (což vždycky nějakého mají), tak selektorem rodič:has(selektor1) selektor2 jde zaměřit druhý selektor v závislosti na tom, zda byl trefený ten první, který s ním nemusí mít vůbec nic společného. Bude to všemocné… a asi i náročné na výkon.
„Niekedy ma trochu štve, ako to všetko zjednodušujú.“ Tento pocit velmi dobře znám. Geniální finty minulosti jsou nové generaci k smíchu a člověk se během několika málo let stává lamentujícím důchodcem svého oboru, v dobrém vzpomínajícím na těžké časy a objevování samozřejmého. K tomu se ještě přidávají permanentní nářky začátečníků, jak je kódování složité… :-) Důležité je neulpívat. Ale zároveň nezavrhovat vlastní zkušenosti a udržet si zdravý rozum, ono to tempo vývoje není zase tak splašené. Stejně vysoké sloupce jdou už docela dlouho vyřešit přes tabulkové hodnoty display , ale vždy se najde nějaká nová výzva… třeba ta, o které je toto vlákno.
|
||
Časová prodleva: 9 let
|
0