Autor Zpráva
Milan1236000
Profil
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
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
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
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
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
juriad:
Nečakal som hodnotnú odpoveď. Ďakujem za zdroj, zajtra si čas určite nájdem.
Chamurappi
Profil
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
Chamurappi:
Stará klasická Opera nic a aktuální Chrome taky nic.
bubák
Profil *
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
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.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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