1

Hi,

I am having problems with first-child selector. This is my html code

<div> 
 <div></div>
 <article class="portfolio"></article>
 <article class="portfolio"></article>
 <article class="portfolio"></article>
</div>

I want to select the first article from the list so I do this

article.portfolio:first-child {}

but it wont work. Only if I remove the div above it it will select it. I thought first-child would select the first ARTICLE from inside the parent div but instead its counting the div above it as the first child.

What kind I do so first-child selects considering only the articles while ignoring all other element types?

Thank you.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Cain Nuke
  • 2,843
  • 5
  • 42
  • 65
  • You're looking for `article:first-of-type { ... }` – Tyler Roper May 30 '18 at 03:41
  • will that select the first article of its parent or the first of the whole document? – Cain Nuke May 30 '18 at 03:48
  • It will select the first `
    ` element in every section. You can do `article.portfolio:first-of-type` if need be.
     – Tyler Roper May 30 '18 at 03:49
  • See this post for all about `first-of-type` vs `first-child` and their limitations: https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class – cjl750 May 30 '18 at 03:49
  • And https://stackoverflow.com/questions/24657555/what-is-the-difference-between-first-child-and-first-of-type (linked to from my answer to the above question) which actually focuses on the difference between these two pseudos specifically. – BoltClock May 30 '18 at 05:31

1 Answers1

1

There is no element that has that class and is the first child. If you want the first element with that class, use .portfolio:first-of-type.

Jim Cote
  • 1,746
  • 3
  • 15
  • 26