Nth-child vs. nth-of-type

HTML & CSS
1

Can someone on here please explain to me what the difference is between these 2 rule-sets.

As far as I can tell, they can work using either.

But, how are you supposed to know which to use?

Type means what?

Child means what?

nth-of-type
nth-child

nth-of-type

.nav a:nth-of-type(5n) {
  margin-right: 0;
}

.nav a:nth-of-type(15) {
 background: red;
}

nth-child


.nav a:nth-child(5n) {
  margin-right: 0;
}

.nav a:nth-child(15) {
 background: red;
}
2

This is stuff you can look up very easily for yourself you know. The answers are in the opening couple of lines.

nth-of-type() - https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-of-type

nth-child() - https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child

4 Likes
3

Another good resource which I keep linking to for you is this:

3 Likes
4

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