Selektory potomka – CSS – Fórum – Programujte.com

Zdravím, není mi jasná jedna věc ohledně selektorů v CSS. Proč nefunguje následující kód: (?)

p > h1 {color: red;}

Předpokládal bych, že přímý potomek (h1) elementu p by měl mít červenou barvu. V žádném prohlížeči to však nefunguje. Například ale:

ul > li {color: blue;}

funguje bez problému. Jak rozeznám, které elementy budou fungovat a které né? Díky!

Je nesmysl mít nadpis uvnitř odstavce. - Je to přímo nevalidní a tudíž předpokládám, že to prohlížeče nechtějí ani zobrazit.

#3 Kobi
Aji p uvnitř h1 není moc echt, ale určitě lepší než naopak :D

Doporučuji si přečíst desatero sémantických stránek a prací. Tvoje kombinace není logická, navíc je zcela zbytečná, představ si potom stylovat v tomto odstavci 2 různé nadpisy h2, ta kostra by byla dlouhá, nelogická a samozřejmě nefunkční. H1 - H6 jsou párové tagy, které ve validním a správně sémantickém webu se mají nacházet "volně" a postupně za sebou. 

Skvělá literatura o této problematice: 

http://www.semantika.name/index.html
http://polopate.jakpsatweb.cz/index.php?…
http://www.jakpsatweb.cz/…prehled.html

#4 Nefaritus
Souhlasím, rozhodně to není echt a ani (sémanticky, logicky) správně. H1 je párový a textový tag. K úpravě textů a potažmo textových tagů slouží tagy jako span, strong, small a v horším případě zkousnutelný font. Rozhodně nejlepším řešením by bylo stylovat nadpisy pomocí tříd a pokud je nutno rozlišovat h1 na různých stránkách tak identifikátory.

#6 null_while
a nebo vnořením do divu

#idetifikator h1 { .. }

#7 Nefaritus
Validně to správně je, nicméně sémanticky ne. Ovšem v dnešním světě, kdy skoro každý platí za funkčnost a optimalizaci pro prohlížeče svých zákazníků, návštěvníků, čtenářů je všem kód jedno a pokud neumí ohodnotit kód, neumí ohodnotit jeho cenu, pokud není kodér (kóder) správně ohodnocen je mu sémantičnost ukradená a tudíž na webu velmi často není nebo je naopak špatně.

Ne jeden webdesignér použije k opravení chyby se zobrazováním div - nejspíš je to styl :-). 

Osobně myslím, že nadpis umístěný v divu (#content) je naprosto v pořádku. Samozřejmě, pokud by to bylo řešeno:

<div id=".."><h1>....</h1></div>

Tak to je naprosto neprofesionální. Ale tento přístup se mi zdá ok:
 

<div id="content">
	<h1>...</h1>
	<p>....</p>
	<h2>...</h2>
	...
</div>

#9 Šťouchal
Myslel jsem to tak, jak to popisuješ v druhém případě. Ten k=od byl jen pro ilustraci.

#9 Šťouchal

Přesně tak. Souhlasím s druhým řešením. Na stránce by si měl člověk vystačit klidně i s jedním divem. Ovšem musíme rozlišovat projekty, kterým taková kostra něco dá a kde nikoliv, potom tohle není nutnost. Používat však první řešení v jakémkoliv případě je nesmysl.

Vzorná ukázka napsaná vzorem a ikonou českého webdesignu p. Lešetickým (Plaváček)
http://klient.plavacek.net/div/

Ok, tak to souhlasím.

Problém je ten, že se vzrůstajícími požadavky zákazníků a potenciálních uživatelů je řešení pomocí jednoho prakticky nereálné. Nejen, že grafika je čím dál tím komplikovanější, tak různé moduly (šoupátka, výsuvné boxy a podobné hračičky) se bez divů neobejdou.

#12 Šťouchal
Souhlasím, ale ne úplně. Problém je v tom, že každý neumí všechno. To znamená, že webový projekt, aplikace, ve směs cokoliv projde kupou lidí. Od grafika, kodéra, programátora, korektora až po administrátora. Každý může zasáhnout do kódu, přidat něco, apod. přičemž může (často přímo musí) dodržovat pouze optimalizaci a validitu, proto se na zbytek již moc nehledí. 

Sémantika je věc dobrá, ale dodržování stránek s jedním divem je opravdu velmi těžké, někdy nemožné. 

Dalším problémem jsou lepiči kódu, kteří vemou ajax formulář támhle, jquery menu támhle, php newsletter támhle a postaví to na šabloně z nějakého portálu. Potom je výsledek jaký je. 

Ale abych nepůsobil jak nějaký diktátor a propagátor sémantiky, web o jednom divu jsem udělal zhruba jednou - když jsem se snažil to vůbec dokázat.

Souhlasím.

Právě, že jsem měl na mysli velké projekty - řekněme eshopy (nikoliv krabicové verze, ale komplexní řešení). Tam (dle mých zkušeností) je nemožné, chtít po jednom chtít udělat celé řešení. Kdyby někdo takový byl, tak by se určitě ve firmě velice dobře uživil :-)

Vzhledem k tomu, že se kvůli efektivitě práce často využívají různé doplňky od třetích stran (ať už jde o Facebook blbosti, či komponenty typu DataPickter z jQuery) je dodržení jednoho divu v prostředí kolem mě asi nemožné.

#14 Šťouchal
Je to i vcelku zbytečné se o něco takového snažit.

#14 Šťouchal
Říká se, že nic není nemožné a v tomto směru to určitě platí. Myslím si, že udržet to lze jen s kvalitním návrhem, kvalitní dělbou práce, omezením vstupu a spoustou peněz. 

Tak strašně jsem chtěl zvýraznit spoustou peněz, bohužel jde jen ztučnit text. :-( Budu si Curovi nejspíš stěžovat. :-D

#15 Nefaritus
Nejspíš ano. :-) 

Ale myslím si, že tak jako se hodnotí kvalita zdrojových kódu skriptovacích a programovacích jazyků, ať procedurálně nebo objektově psaných, může se hodnotit kvalita zdrojových kódu šablon, kaskád, apod. :-) 

Jj, spoustou peněz. :-D Navrhnout klientovi řešení, kde nebude vidět rozdíl ve výsledku, ale v požadovaných financích by nebylo dobré. - Spíš si umím představit reakci :-D

Přesto si však stále neumím představit udělat komponenty jako jsou dataPickter, různé scrolly, obrázkové promítače apd. udělat. Ale to může být způsobeno mou nedokonalostí. :-)

#18 Šťouchal
O tom to je, pokud nechceš mít na každém kousku své stránky napsáno copyright, copy by, designed by, license from, apod... je nejjednodušší řešení si zaplatit někoho kdo si v tom holduje. Není to způsobeno tvojí nedokonalostí. Znám spoustu dokonalých lidí, kteří dokázali dokonalé věci bez znalosti nedokonalých jazyků. (Nevím čím to je, ale ani jeden nezná mě.)

Tím chci říct, že tak jako jsou lidi, kteří rádi programují v PHP nebo kreslí ve photoshopu, jsou jedinci, kteří PHP a photoshop nesnáší a radši dělají jednorázovky v JavaScriptu, apod.

Trochu se nám tady ta diskuse odklonila od původního dotazu

#20 Kobi
Téma je označeno za vyřešené, navíc si myslím, že je dobře když členové komunikují i o věcech spojených s problémem. Fórum to potřebuje a zas takový offtopic to není. :-) 

#21 null_while
Nicméně nejlepší by bylo sepsat o sémantice nějaký článek, nechceš se toho ujmout?   

#22 Kobi
Proč to nezkusit. Nicméně bych začal nejdříve v pondělí. Pokud je nějaký kodex, pravidla pro psaní, apod. jako máme například na zdrojaku nebo v rootu, tak mi ho pošli do PM. Miluji výzvy...   

Když už o tom se píše, tak ono by stačilo dobře zviditelnit odkazy jenž null_white poslal na začátku. Myslím, že vystihují problematiku dokonale (sám mám první odkaz nastudován) :-)

#23 null_while
Super, rád si to přečtu ;)

#25 Šťouchal
Aby článek měl nějakou hodnotu, budu na něm určitě s někým spolupracovat, mám pár typů, kteří by mi ho mohli částečně přikořenit a udělat zajímavějším, rád bych je tam pak i uvedl. :-) Třeba napíšu i tobě. :-)

Ahoj, díky všem za odpovědi. Samozřejmě mi je jasné (i jsem to veskrze tušil), že problém bude v nepříliš logické kombinaci elementu h1 a odstavce p. Moje otázka však stále trvá - je nějaký způsob, jak bezpečně rozlišit elementy, které mohou být potomci jiných elementů? Nebo je to pouze otázkou sémantického citu?

#27 Ondřej Matoušek
Je to především ve znalosti. Pokud budeš znát pravý význam html tagů a jejich správné využití nebudeš vůbec nad tím, jaké ano a jaké ne přemýšlet. Bude ti potom jasné, že podobné operace by byly nelogické a zvolíš to jinak. Tabulky na to určitě existují, ovšem doporučuji spíše pochopit význam značek. 

#27 Ondřej Matoušek
Tvoji otázku jsem pochopil že chceš nastylovat nadpis např v:

<div id="content">
	<h1>....</h1>
	<p>... <span>...</span>...</p>
<div>

potom by byl styl takovýto:

#content h1 {
	/* styl pro nadpis uvnitř divu#content */
}
#content p span {
	/* styl pro span, který je umístěn uvnitř odstavce a ten je uvnitř divu */
	/* "fuj, něco takového popsat je náročné na mé prsty :-D, ale vidět to pak je hned" */
}