I have not used a class like this very often and I’m clearly missing something. I have a site with 5 staff members on it. Each staff member has a div, inside of which is all their info. I would like to alternate the background colors to set them off from one another. I tried using “:nth-child(odd)” but it either targets all 5 of them or none. So, I tried “:nth-child(4)” and it targets the 2nd of the 5. I don’t get it. I can post the HTML if someone prefers, but I thought it might be more useful to comment a screen shot of the inspector on top of the site (see attached).
I think the problem is that elements with the class .staff are not the only children of the parent element.
So the first instance of .staff is actually the second child, and the second is actually the fourth.
That would explain why odd did not work and 4 targets the fourth.
Hey Sam. Thanks for you reply. This seems correct, but I’m still not sure how to accomplish what I’m trying to do.
I thought that using .staff:nth-child(odd) would target the 1st, 3rd and 5th instance of elements with the class .staff regardless of where they appeared on the page. Why isn’t that the case? How would I write a declaration that does that?
Also, I have looked inside the .staff divs and there are no other elements with that class. It’s just the 5 I highlighted. I have even pulled the entire .listing-page div and placed it in a local file so that I’m just working on this part of the document and the behavior is the same.
I also tried this: .listing-page > .staff:nth-child(odd)
You are using nth-child, the first or second child of an element is still the first or second child regardless of class. The class in the selector is only filtering which elements are selecting, it does not change the number or order of elements within the parent.
I would structure the html differently, possibly using a list element.
I would have the heading and the pagination outside of the parent element.
The separators could either be ::after pseudo elements, or placed within the child elements.
OK. Well, that is clearly what is going on here. Consider this test:
<style>
p:nth-child(odd) {
border:1px solid blue;
}
</style>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<div>This is a waist banner or something else</div>
<p>Paragraph 3</p>
<p>Paragraph 4 </p>
If you try it, Paragraph 1 and Paragraph 4 have borders. So, it’s really a matter of changing how we describe this declaration. I thought that this declaration p:nth-child(odd) would be described like this:
Target every other paragraph element.
It would be more accurately be described like this:
Target every other element IF it’s a paragraph.
That seems pretty silly to me. No wonder I’ve never used this. The HTML structure is part of the Wordpress theme that the client picked. I can rework it but this seems like something CSS should be able to do easily: “Hey CSS, please apply these styles to every other element with _____ class”. Doesn’t seem that hard.
Anyway, thanks very much for your help Sam. I really appreciate it.
