Zadejte hledaný výraz...

Problém s :nth-child(3n)

Dobrý den,
řeším momentálně jednu úpravu na webu gtstore.cz a to takovou, že přiřadím .imgSmall:nth-child(3n), ale nikdy se to neaplikuje na každý třetí selector s třídou .imgSmall, ale třeba někdy na druhý, někdy na první...
viz. zde: http://www.gtstore.cz/mx-komplet-faction-slate-pant-orange-blue/ (vpravo miniatury pod hlavním obrázkem)
nevíte, kde dělám chybu? Toto řeším na více webech.
děkuji za odpovědi
s pozdravem
Roman
9. 10. 2015 08:56:06
https://webtrh.cz/diskuse/problem-s-nth-child3n/#reply1145397
Fido123
verified
rating uzivatele
(13 hodnocení)
9. 10. 2015 09:28:13
Tak, jak to máš, ten selektor vybere prvky, které jsem třetím potomkem svého rodiče (bez ohledu na třídu!!!) a zároveň mají třídu imgSmall. Což splňuje jenom ten první malý obrázek, protože šestý a deváty potomek jsou divy, ale ty zase nemají třídu imgSmall. Pokud chceš pracovat se selektorem nth-child, dej si všechny obrázky pod jednoho rodiče jak máš, ale nemíchej už je s jinýma prvkama na stejné úrovni.
9. 10. 2015 09:28:13
https://webtrh.cz/diskuse/problem-s-nth-child3n/#reply1145396
To co říkáš není pravda, jelikož mám strukturu
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
A já to chci aplikovat na co třeti prvek, a je mi jedno co budu dělat potom s potomkem. Chci proste obrazky imgSmall:nth-child(3), tak by to snad mělo vybrat řádek 4 a 8, ne?
9. 10. 2015 09:32:58
https://webtrh.cz/diskuse/problem-s-nth-child3n/#reply1145395
Ondrej Vertat
verified
rating uzivatele
(48 hodnocení)
9. 10. 2015 09:39:07
:nth-child chápeš špatně. :nth-child(3n) znamená jakýkoli každý třetí potomek rodiče. A jelikož ty máš v rodiči .obrazky nejprve .imgMain, dále .clr a poté .imgSmall, aplikuje se to na něj jakožto na třetího potomka (i když je to první .imgMain). Další třetí potomek vychází div .clr, jenže ty míříš na potomky s třídou .imgSmall, takže na něj se pravidlo neaplikuje.
Musíš použít :nth-of-type nebo upravit strukturu html.
9. 10. 2015 09:39:07
https://webtrh.cz/diskuse/problem-s-nth-child3n/#reply1145394
Napsal Ondřej Veřtát;1231873
:nth-child chápeš špatně. :nth-child(3n) znamená každý třetí potomek rodiče. A jelikož ty máš v rodiči .obrazky nejprve .imgMain, dále .clr a až poté imgSmall, aplikuje se to na něj.
Děkuji za odpověď a šlo by to nějak udělat myšlenkou, kterou mám?
9. 10. 2015 09:40:14
https://webtrh.cz/diskuse/problem-s-nth-child3n/#reply1145393
Petr Pojer
verified
rating uzivatele
(9 hodnocení)
9. 10. 2015 09:45:45
Místo "nth-child" použij "nth-of-type", tzn. "obrazky a:nth-of-type(3)".
9. 10. 2015 09:45:45
https://webtrh.cz/diskuse/problem-s-nth-child3n/#reply1145392
Fido123
verified
rating uzivatele
(13 hodnocení)
9. 10. 2015 09:51:58
Já bych upravil html, ale jestli ti nevadí, že to bude takové „zfušované“, tak můžeš použít selektor
Ten vybere co třetí element „a“ počínaje čtvrtým (4,7,10,13,...).
9. 10. 2015 09:51:58
https://webtrh.cz/diskuse/problem-s-nth-child3n/#reply1145391
Napsal Fido123;1231879
Já bych upravil html, ale jestli ti nevadí, že to bude takové „zfušované“, tak můžeš použít selektor
Ten vybere co třetí element a počínaje čtvrtým (4,7,10,13,...).
Upravit HTML nemůžu, nedělal jsem to já.
9. 10. 2015 09:53:12
https://webtrh.cz/diskuse/problem-s-nth-child3n/#reply1145390
Fido123
verified
rating uzivatele
(13 hodnocení)
9. 10. 2015 09:55:52
Napsal Kolonicny;1231881
Upravit HTML nemůžu, nedělal jsem to já.
No, tak to pak nemáš moc na výběr.
9. 10. 2015 09:55:52
https://webtrh.cz/diskuse/problem-s-nth-child3n/#reply1145389
Ondrej Vertat
verified
rating uzivatele
(48 hodnocení)
9. 10. 2015 10:00:32
Co se tam vlastně snažíš vymyslet? Třeba to ani nepotřebuješ.
9. 10. 2015 10:00:32
https://webtrh.cz/diskuse/problem-s-nth-child3n/#reply1145388
Děkuji všem za odpovědi.
Zeptám se, dá se nějak aplikovat :nth na určitý class?
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
A já to chci aplikovat na co třetí prvek imgSmall. Chci prostě co třetí imgSmall, řádek 4 a 8, a chci aby to fungovalo případně i kdybych změnil strukturu, prostě vždy co třetí imgSmall...
9. 10. 2015 10:01:27
https://webtrh.cz/diskuse/problem-s-nth-child3n/#reply1145387
David Musil
verified
rating uzivatele
(68 hodnocení)
9. 10. 2015 10:01:52
Podle me mu jde o ten pravy okraj (border) kazdeho tretiho obrazku, ktery splyva s vedlejsim rameckem...
9. 10. 2015 10:01:52
https://webtrh.cz/diskuse/problem-s-nth-child3n/#reply1145386
Napsal Ondřej Veřtát;1231887
Co se tam vlastně snažíš vymyslet? Třeba to ani nepotřebuješ.
Potřebuji co třetímu imgSmall dát jiné parametry (např. odstranit pravý border)
---------- Příspěvek doplněn 09.10.2015 v 10:03 ----------
Napsal musil.david;1231889
Podle me mu jde o ten pravy okraj (border) kazdeho tretiho obrazku, ktery splyva s vedlejsim rameckem...
Ano, a chci najít OBECNÝ způsob, takže když tam přibude např. další clear, nebo se tam něco přidá tak aby TO VŽDY vyhledalo co třetí imgSmall
9. 10. 2015 10:01:57
https://webtrh.cz/diskuse/problem-s-nth-child3n/#reply1145385
Fido123
verified
rating uzivatele
(13 hodnocení)
9. 10. 2015 10:04:33
Napsal Kolonicny;1231888
Zeptám se, dá se nějak aplikovat :nth na určitý class?
Ne.
9. 10. 2015 10:04:33
https://webtrh.cz/diskuse/problem-s-nth-child3n/#reply1145384
Tak to je docela špatné... :(
9. 10. 2015 10:24:14
https://webtrh.cz/diskuse/problem-s-nth-child3n/#reply1145383
Pro odpověď se přihlašte.
Přihlásit