One More Quick nth-of-type Question

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


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 :slight_smile:

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


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:

___ {

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.


Yes - I think you nailed it :slight_smile:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">
<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) {

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