0

I have question how work first-child and last-child with elements and classes?

Look on my example

And for it I have some question:

  1. Why this rule not working:

    p.test1:first-child{
    color: green;
}

  2. How then change color of first element with class test1?

  3. Why this rule working if is similar to example 1:

    p.test1:last-child{
    color: white;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
WooCaSh
  • 5,180
  • 5
  • 36
  • 54
  • 4
    You can think of CSS selectors are of the same priority: `.test` and `:first-child` are two separated, same "level" selectors, both apply to `p` "parallely", so `p.test:first-child` means "`p` which is of class `test`, and also is the first child". – Passerby May 09 '13 at 03:18
  • @Passerby thanks. Nice and short answer. But how in my case select first element with `test1` class? – WooCaSh May 09 '13 at 03:21
  • In your very specific situation, this can work: http://jsfiddle.net/Ac9t6/12/ (for IE>=9). But it has quite some limitation. – Passerby May 09 '13 at 03:44

2 Answers2

2

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.

The :last-child CSS pseudo-class represents any element that is the last child element of its parent.

References:

http://developer.mozilla.org/en-US/docs/CSS/:first-child
http://developer.mozilla.org/en-US/docs/CSS/:last-child

1- In your example p.test1 is not a first child element of its parent, so the selector doesn't select any element.

2- .test1:nth-of-type(4) Update, replaced 4 instead of 1, not quiet a solution, Ref:http://www.w3.org/TR/css3-selectors/#nth-of-type-pseudo

3- Because it is the last child element of its parent.

Note: the parent here in your example is the body tag.

Example in question for future reference:

<p>test</p>
<p>test</p>
<p>test</p>
<p class="test1">test</p>
<p class="test1">test</p>
<p class="test1">test</p>
<p class="test1">test</p>
Arbel
  • 30,599
  • 2
  • 28
  • 29
  • All fine but `.test1:nth-of-type(1)` not working. Working only when I write `.test1:nth-of-type(4)` where 4th element is first with class `test1`... It's weird. – WooCaSh May 09 '13 at 03:19
  • 1
    `.test1:nth-of-type(1)` does not do what you think it does. See http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class/8539107#8539107 for an explanation. – BoltClock May 09 '13 at 03:53
  • @WooCaSh seems that is the way for now. – Arbel May 09 '13 at 04:53
  • Thank you guys for explain. @BoltClock you should add answer with this link from your comment or can I mark Arbel answer as good? – WooCaSh May 09 '13 at 11:52
1

The first-child/last-child is in relation to the parent element. In your example there is no p.test-element that is the first child of its parent element (The JsFiddle container). Instead the first-child is a plain p-element. If you set the .test-class on the first p-element it turns green.

Whistletoe
  • 573
  • 2
  • 10