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

9. 10. 2015 08:56:06

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

(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

Roman Koloničný

(1 hodnocení)

9. 10. 2015 09:32:58

To co říkáš není pravda, jelikož mám strukturu

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

Smazaný účet m5u2DKRief

(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

Roman Koloničný

(1 hodnocení)

9. 10. 2015 09:40:14

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

(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

(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

Roman Koloničný

(1 hodnocení)

9. 10. 2015 09:53:12

Napsal Fido123;1231879
Já bych upravil html, ale jestli ti nevadí, že to bude takové „zfušované“, tak můžeš použít selektor
a:nth-of-type(3n+4)
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

(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

Smazaný účet m5u2DKRief

(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

Roman Koloničný

(1 hodnocení)

9. 10. 2015 10:01:27

Děkuji všem za odpovědi.

Zeptám se, dá se nějak aplikovat :nth na určitý class?

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