1

I'm still in the process of learning the difference between :first-child and :first-of-type pseudo classes using live examples.

I copied some HTML/CSS code from another website added it to: http://codepen.io/muygalan/pen/RroQNp.

Question: When I remove the following code from my CSS file:

#blog article:first-of-type {
background: green;
}

Why doesn't the text nested within the <article> tag turn red?

Isn't...

#blog article:first-child {
color: red;
}

...supposed to turn the text color red if the previous :first-of-type has been removed from the code?

MuyGalan
  • 61
  • 1
  • 2
  • 10
  • The selector `article:first-child` isn't selecting anything because that `article` element isn't the first child element (the `
    ` is the first child). The `:first-of-type` pseudo-class will select the first element by its *type*, which is why the `article:first-of-type` set the background to green.
     – Josh Crozier Dec 30 '15 at 03:18
  • 5
    Does [this](http://stackoverflow.com/questions/24657555/css-first-child-versus-first-of-type) clear things up for you? – BoltClock Dec 30 '15 at 03:51
  • @JoshCrozier made sense of my confusion. Thank you! – MuyGalan Dec 31 '15 at 03:58

1 Answers1

2

Here's a great explanation on CSS Tricks. Basically, the first child of the #blog div is not an article element; it's a header element. :first-child will match an element if it's the first element in the parent container. :first-of-type will match an element if it's the first element of its type in the parent container regardless of whether or not there are other elements preceding it.

Matt
  • 455
  • 3
  • 13