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)
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)
Nth of type is slightly more specific, but basically yes :). You can read up on it more here
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
}
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
So even if I write “p:nth-child(N)”, it will go with “*:nth-child(N)”?
Ugh.
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.
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?
Yes - I think you nailed it
<!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:)