Comments on: :first-child

By: Chi

Chi — Fri, 15 Jun 2018 08:41:30 +0000

Any idea how to target the first child (that is not an element) of unspecified div. Like this : some text ..
I want to change the styling of ‘some text’ only.
Yep, that happens

By: Fabio Guerreiro

Fabio Guerreiro — Wed, 19 Jul 2017 08:48:40 +0000

In reply to Mike Henry. you don't have to specify the type, drop the asterisk use it like: div > :first-child

By: Mike Henry

Mike Henry — Wed, 26 Apr 2017 16:24:41 +0000

Any thoughts on why you have to specify the type of element that should be targeted by :first-child? in other words, why can't we just say: div *:first-child to mean any element, of unspecified type, that is the first element in the div?

By: Tom

Tom — Wed, 14 Dec 2016 17:47:10 +0000

In reply to Wayan Wirka. I recommend you do the following: article div.sticky:first-child This way you make it explicit that you want the first div with class sticky. If you add another div later on you might run into problems if you're using Chris Hardwick's answer. It's not a bad answer, don't get me wrong.

By: Uncle Jesse

Uncle Jesse — Thu, 04 Feb 2016 15:24:43 +0000

In reply to Chris. The author's name is at the top of the article, along with the date published.

By: Justin

Justin — Fri, 15 Jan 2016 14:37:48 +0000

Hey Chris,

This is supported in IE7. You have it listed as 9+. I just learned this recently as well – that :last-child is only supported in IE9+, but :first-child is supported in IE7+. I thought this was awesome information to come accross btw!

http://www.w3schools.com/cssref/sel_firstchild.asp

Thanks,
Justin

By: Chris

Chris — Tue, 07 Apr 2015 08:22:22 +0000

Not sure who wrote this particular article, but the browser information is completely wrong. :first-child was introduced in CSS2 and works in IE7+. http://www.w3schools.com/cssref/sel_firstchild.asp. This post is a few years old so hopefully it gets updated soon to avoid misinforming readers.

By: Christian

Christian — Tue, 27 May 2014 04:21:24 +0000

I was having trouble with fisrt-child using it with tag but i discover the the firts-of-type pseudo-class. Thanks a lot :)

`article.mapa{
display: inline-block;
width: 390px;
margin: 0px;
padding: 0px;
}

article.mapa:first-of-type{margin-right:16px;}`

By: Neviton

Neviton — Thu, 21 Nov 2013 12:14:34 +0000

In reply to Mitică.

Indeed!
What about to update the info?
Tks

By: Chris Hardwick

Chris Hardwick — Sat, 16 Nov 2013 02:06:01 +0000

In reply to Wayan Wirka.

How can I style only the first of div.sticky?

How about nth-child? You can specify the type of element and it's position in relation to its siblings, within the scope of the parent. Like so: article div:nth-child(2) This targets the second div (not the second child) inside the article tag. See Chris's great article on nth-child for some clever solutions to seemingly complicated targeting of elements. -Chris

By: Wayan Wirka

Wayan Wirka — Fri, 08 Nov 2013 02:29:54 +0000

Hi, Greats tutorial, thanks. I have a problem regarding to the above code, this CSS is not running out on Chrome( I don't check in other browser yet).

    `p:last-child {
      font-size: 0.75em;
      font-style: italic;
    }`

Also I had a question if the HTML elements is like this:

    `<article>
      <p>First paragraph...</p>
      <div>Consectetur adipisicing...</div>
      <div class="sticky">Lorem ipsum...</div>
      <div class="sticky">Dolor sit amet...</div>
    </article>`

How can I style only the first of div.sticky? Best Regards, Wirka

By: Mitică

Mitică — Thu, 04 Jul 2013 11:08:25 +0000

Hi.

:first-child works in IE 7+* and it was introduced in CSS2**.

You’re probably referring to advanced selectors*** in CSS3 like :first-of-type.

http://caniuse.com/css-sel2
** http://www.w3.org/TR/CSS2/selector.html#first-child
*** http://caniuse.com/css-sel3

—
Mitică