Using nth class on nested div

HTML & CSS
21

I think you will need to make a demo (or codepen) of the html structure you are trying to style so we can see what’s happening and see what you want exactly:)

22

I am using masonry. So every div that has class of news. I want it to have different colors, as per my css (generally 4 colors)

23

Still doesn’t help.

Can you please take a sample of the html generated by your sever side code, and post it into a demo page (or codepen) along with the appropriate css as you have it right now. There’s still a piece missing that we’re not seeing because the answers you’ve been supplied thus far should have worked.

24

yea sure, i will do. I will have to setup

25

Here, we go with almost near to my example, now you can see my div are nested, and one nested div has nth(an+b), but it is not working. In some cases it work only when i give it 1n, but as my layout can be different every time page loads, i want the textual to have random background.

Edit:> i read of SE,

You are targetting the wrong element for nth-child. Currently you are targetting <div name> but that will always be odd because there is only one of this element within its scope.

26

Yeah, I think the specificity is killing you as the nth-child (and nth-of-type) deal with the occurrence within the parent. Since technically, the news div was it’s parent, it’s not finding the other occurrences. I tried to include more specificity by including the column and news classes, but it didn’t seem to grab them.

Perhaps @PaulOB can find the drilldown you need, but I think in this case, it might just be easier to add an additional class to the box declaration, and style that differently.

27

.boxes are the only child in their block so nth-child is of no use because there is only ever one of them in the same context.

The columns are the siblings you should be targetting.

e.g.

.col-lg-4:nth-child(3n+4) .boxes
{
	background-color:#f7931e;
}
.col-lg-4:nth-child(2n+3) .boxes
{
	background-color:#542389;
}

Note that in your codepen you had a comma at the end of the selector so your example wouldn’t work anyway.

28

Da-- it! That’s the one combination I didn’t think to try. Makes perfect sense now that you posted that,

(goes looking for brick wall to bang head for missing the obvious)

29

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.