| Autor | Zpráva | ||
|---|---|---|---|
| fridgei Profil |
#1 · Zasláno: 14. 6. 2011, 16:39:25
Dobrý den, mohl by mi někdo prosím vysvětlit, jaký je rozdíl mezi selektory:
:first-child a :first-of-type, :last-child a :last-of-type, :only-child a :olnly-of-type, Nemůžu si pomoct, ale připadá mi, že to vždy ve výsledku vybere to samé. |
||
| Chamurappi Profil |
#2 · Zasláno: 14. 6. 2011, 16:46:35
Reaguji na fridgeiho:
Pod tím type si představ název elementu a bude ti to jasné.
Krom toho je rozdíl v podpoře prohlížečů, takže selektory s -of-type půjde využít jako hack.
|
||
| dranel91 Profil |
#3 · Zasláno: 14. 6. 2011, 16:47:39
Chamurappi:
„Krom toho je rozdíl v podpoře prohlížečů, takže selektory s -of-type půjde využít jako hack.“ Dlouhodobě? Já jen aby při další verzi prohlížečů nebyla podpora sjednocená... |
||
| ShiraNai7 Profil |
#4 · Zasláno: 14. 6. 2011, 16:47:48
Není to to samé. První potomek je vždy první element, fist-of-type může být třeba až desátý v pořadí, ale je právě "první daného typu" (např. první odstavec v divu).
Taky tyto selectory nefungují v MSIE, což je dělá v praxi nepoužitelnými. |
||
| Chamurappi Profil |
#5 · Zasláno: 14. 6. 2011, 17:11:22
Reaguji na Dranela:
„Dlouhodobě?“ Samozřejmě, že ne. Hacky se píší vždy jen pro současné prohlížeče, protože nevíš, co budou další verze umět a jestli v nich bude nutné něco hackovat. |
||
| fridgei Profil |
#6 · Zasláno: 15. 6. 2011, 18:09:50
Já nevím, pořád mi ten rozdíl nějak uniká, u :only-child a :only-of-type jemi to jasné, ale pořád nechápu :last-child a :last-of-type.
Udělal jsem si příklad, ale ať se snažím jak chci pořád mi to vybírá to samé.
<html>
<head>
<title></title>
<style>
em:last-of-type {color: orange}
/* em:last-of-type {color: orange} , když smažu to první a dám dám tam to v komentáři výsledek je stejný*/
</style>
</head>
<body>
<p>
<em>hojogojo</em>
</p>
<p>
<em>něco výrazného</em>
<em>něco výrazného</em>
<em>něco výrazného</em>
<em>něco výrazného</em>
<em>něco výrazného</em>
</p>
<p>
<em></em>
<strong></strong>
<ul>
<li><em>výrazná věc v seznamu</em> a další <em>výrazná věc v seznamu</em></li>
<li><em>výrazná věc v seznamu</em></li>
</ul>
<strong><em>výrazná věc ve strongu</em></strong>
</p>
</body>
</html>
Kromě zmíněné podpory v prohlířečích se to v tomhle příkladu neliší. Pokud selektory zamění výsledek zůstává stále stejný. Prosím pokud máte čas napište mi alespoň jednoduchý příklad ze kterého bych to mohl pochopit. |
||
| ShiraNai7 Profil |
#7 · Zasláno: 15. 6. 2011, 18:12:48
fridgei:
„dyž smažu to první a dám dám tam to v komentáři výsledek je stejný*“ Mi připadá, že v komentáři je to samé jako ta definice hned nad ním :) |
||
| fridgei Profil |
#8 · Zasláno: 15. 6. 2011, 18:34:22
Jo, to se omlouvám, to sem jsem se upsal, samozdřejmě jsem to zkoušel s :last-child a :last-of-type
|
||
| ShiraNai7 Profil |
#9 · Zasláno: 15. 6. 2011, 19:02:06
Vyzkoušej si sám.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>CSS test</title>
<style type="text/css">
div > :last-of-type {color: red;}
div > :last-child {color: green;}
</style>
</head>
<body>
<div>
<p>Tento odstavec bude normální.</p>
<p>Tento odstavec bude červený, protože se jedná o POSLEDNÍ ODSTAVEC v divu.</p>
<div>Tento div bude červený, protože se jedná o POSLEDNÍ DIV v divu.</div>
<span>Tento span bude zelený, protože se jedná o POSLEDNÍ SPAN a zároveň POSLEDNÍ ELEMENT v divu (zelená přebije červenou).</span>
</div>
</body>
</html>Obrázek z Firefoxu: 
|
||
|
Časová prodleva: 5 dní
|
|||
| fridgei Profil |
#10 · Zasláno: 20. 6. 2011, 16:37:14
Mnohokrát díky, teď už to chápu.
|
||
|
Časová prodleva: 13 let
|
|||
0