One More Quick nth-of-type Question

HTML & CSS
1

Just so I can wrap my head around this, is there any difference between these two selectors:


li:nth-child(odd)
li:nth-of-type(odd)
2

Nth of type is slightly more specific, but basically yes :). You can read up on it more here

3

The sitepoint references are where I got confused. On the nthoftype page, it says this:

The following example selector matches the second, fifth, eighth, and so on, paragraphs in a div element, ignoring any children that aren’t paragraphs:


div>p:nth-of-type(3n-1) {
  ⋮ declarations
}

But wouldn’t the following selector do the exact same thing:


div>p:nth-child(3n-1) {
  ⋮ declarations
}
4

If I do believe so, the nth of type, in that example, would only select <p>'s in that rule, where as if you did nth-child it would select any element that came across taht 3n-1 calculation :).

Basically, nth-of-type will only select the element that it’s connected to, where as nth-child will select whatever element it gets calculated to be :slight_smile:

5

So even if I write “p:nth-child(N)”, it will go with “*:nth-child(N)”?

Ugh.

6

If the N in your example was a 3, it would select the third element in that, and if it’s a <p> it would style it according to what you set.

So if your HTML was setup for p:nth-child(N) (for it to select the <p>) then yes, doing *:nth-child(N) would select the same thing.

This is really hard to explain. If you read their text you can get a clear idea.

This example selector will match any paragraph that’s the first child element of its parent element

p:nth-child(1) {
}
Kinda like first-child (this example from the reference)

I do hope I am making sense.

7

Okay, okay, okay, let me muddle through it.

Let’s say I have a div with all kinds of children. Let’s also say that I have a css rule I’d like to apply:


___ {
    background:red;
}

If I use a selector of “div > *:nth-child(odd)”, that will change the background of every other element, regardless of what kind of element it is, to red.

If the selector is “div > p:nth-child(odd)”, the background will only change on paragraphs that happen to be odd-numbered children of the div. If the third child is a span, the background will remain the same. If all of the odd children are paragraphs, then all of the paragraphs will have a red background.

If the selector is “div > p:nth-of-type(odd)”, then every other paragraph will have a red background. It doesn’t matter what numbered-child the paragraph is of the div, only that it’s the first or third (or fifth, or seventh, or etc.) paragraph in that div.

Right?

8

Yes - I think you nailed it :slight_smile:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
/*div > p:nth-child(odd) {background:red}*/
div > p:nth-of-type(odd) {
background:blue
}
</style>
</head>
<body>
<div>
    <p><span>test1</span><span>test2</span><span>test3</span><span>test4</span></p>
    <div>xxx</div>
    <div>xxx</div>
    <p><span>test4</span><span>test2</span><span>test3</span><span>test4</span></p>
    <div>xxx</div>
    <p><span>test1</span><span>test2</span><span>test3</span><span>test4</span></p>
    <div>xxx</div>
    <p><span>test1</span><span>test2</span><span>test3</span><span>test4</span></p>
    <p><span>test1</span><span>test2</span><span>test3</span><span>test4</span></p>
</div>
</body>
</html>

The above gives different results depending on which rule is active and confirms your findings:)