Nth-of-type to specify n vs. no n

HTML & CSS
1

Is an ‘n’ required, or is it not required to be specified?

a:nth-of-type(14)
a:nth-of-type(14n)

a:nth-of-type(15)
a:nth-of-type(15n)

a:nth-of-type(8)
a:nth-of-type(8n)
2

Try it for yourself and see what the difference is.

http://www.topdesignagencies.com/nth-test/

More reading:

4 Likes
3

I don’t see a difference at all between any of these, how come?

.nav li:nth-of-type(8n) a {
  background: red;
}

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

https://jsfiddle.net/t930tdx5/24/

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

https://jsfiddle.net/t930tdx5/25/

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

Did you try the nth-of-type tester that TechnoBear posted?

It is immediately clear that (8n) is selecting every 8th item through the whole selection.
(8) on the other hand only selects number 8 and no others.

Now go back and try the tester with your eyes open :slight_smile:

3 Likes
5

How come there’s no difference when the background color of the square is changed?

What’s the reason for this?

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

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

I see the difference now.

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

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

What are you talking about?

You only have 15 items and 8 will only go into 15 once. If you had 16 items then two squares would be red.

You are already using (5n) to remove the margin on every 5th item (i.e. 5, 10 and 15 …). If you just used (5) then only item number 5 would have the margin removed and not 10 or 15.

3 Likes
8

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