problem med css nth-child

Jag har ett upplägg som ser ut såhär..


Om jag skriver .news_thumb:nth-child(1) så ändrar den min första "news_thumb"-klass, ändrar jag (2) så händer inget, ändrar jag till (3) så ändrar den min andra news_thumb. Enkel, slutsats, den ändrar på udda tal...

Av någon anledning så vill dock ingenting hända när jag använder mig av varken (odd) eller (2n+1)

2*0+1 = 1
2*1+1 = 3
2*2+1 = 5
osv..

kan någon svara på vad som är fel här?
Tack på förhand!

Det är inget fel, det är by-design och du gör en tankevurpa.

a:nth-child(2n+1) targetar inte var (2n+1):e <a>-tagg i en container, utan den targetar vart (2n+1):e element i containern, om det elementet dessutom råkar vara en <a>-tagg.

Givet detta blir det rätt uppenbart varför din .news_thumb:nth-child(2) inte ger något resultat alls. Ty vilket är det andra child-elementet i containern?
Regeln .news_thumb:nth-child(2) targetar alltså det andra child-elementet i containern, men bara om det även har .news_thumb, vilket ju inte är fallet. Alltså händer inget.

.news_thumb:nth-child(3) ändrar din andra news_thumb säger du. Inte så konstigt - den diven är ju det tredje elementet i containern, och den har klassen .news_thumb.

Det gadzoox säger är korrekt.

Ett sätt att lösa det här problemet och även få lite bättre semantik och kontroll är ju att wrappa allt som är en nyhet (news_text, thumb osv..) med exempelvis en "news-entry" klass och sedan köra nth-child på den istället.


Då slipper du skriva om uttrycket i nth-child varje gång du lägger till eller tar bort ett element som representerar en nyhet.