4

I want to select the first and the last child with CSS but it does not work. Please take a look at my Fiddle and help me:

.area {
  height: 100px;
  width: 100px;
}

.area:first-child {
  background-color: red;
}

.area:last-child {
  background-color: green;
}
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>

https://jsfiddle.net/rbw8dpsb/1/

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
user5857398
  • 93
  • 5
  • Possible duplicate of [CSS last-child selector: select last-element of specific class, not last child inside of parent?](https://stackoverflow.com/questions/7298057/css-last-child-selector-select-last-element-of-specific-class-not-last-child-i) – scrappedcola Feb 05 '18 at 23:07

2 Answers2

5

I advise you to add a container as in your code they are childs of body BUT you don't know the last-child or the first-child of body as you may have other elements like script tags or other tags dynamically added (like in the snippet here or with jsfiddle or any other online coding tools).

.area {
  height: 100px;
  width: 100px;
}

.area:first-child {
  background-color: red;
}

.area:last-child {
  background-color: green;
}
<div>
  <div class="area">1</div>
  <div class="area">2</div>
  <div class="area">3</div>
  <div class="area">4</div>
</div>

Here is a screenshot to show what is inside your body when you run the snippet:

enter image description here

As you may clearly notice, there is a div added at the end which is the last-child of the body. Adding a container will avoid you dealing with random settings and hidden elements added.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thank you! But I dont get why the browser cant know what is the last child when there is no parent-div. Why the body is not enough parent-container? – user5857398 Feb 05 '18 at 23:13
  • @user5857398 last child consider all the child .. body is enough as container but it contain other element added after your code :) check dev tools and you will see them .. and thus last child won't be the last div of your code but the element added at the end – Temani Afif Feb 05 '18 at 23:14
  • but i selected only the childs with the class "area" ... sorry, i should sleep – user5857398 Feb 05 '18 at 23:18
  • 1
    Good catch! @user5857398 Your html/css will work on a complete standalone web page it just doesn't work in SO code snippet or fiddle because they insert some invisible tags into the dom. – Stickers Feb 05 '18 at 23:18
  • 1
    @user5857398 last-child don't consider classes ... it consider only elements – Temani Afif Feb 05 '18 at 23:20
  • 2
    ... also I believe OP is confused about class vs child vs type element selectors. – Stickers Feb 05 '18 at 23:21
  • @Stickers sure but even type selector will fail here as you can see in my screenshot .. but i guess he expected a child selector by classes : classic issue :) – Temani Afif Feb 05 '18 at 23:22
  • @user5857398 last-child doesn't work like that :) it doesn't select all the classes first then pick the last one ... last-child consider the last child element whatever it is – Temani Afif Feb 05 '18 at 23:23
  • ah that is my problem. and how can i select the last div with the class area? – user5857398 Feb 05 '18 at 23:23
  • @user5857398 unfortunately you cannot with CSS :/ you may refer to this link https://stackoverflow.com/questions/7298057/css-last-child-selector-select-last-element-of-specific-class-not-last-child-i and many more in SO to understand why and probably find some workaround – Temani Afif Feb 05 '18 at 23:26
  • True, I meant to say class vs element selectors. – Stickers Feb 05 '18 at 23:30
2

If you don't want to let all that divs in another structure you should use first-of-type and last-of-type instead of first-child and last-child

.area {
  height: 100px;
  width: 100px;
}

.area:first-of-type {
  background-color: red;
}

.area:last-of-type {
  background-color: green;
}
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>

As Temani Afif pointed, this solution is arbitrary and may not work in all the situations. As shown, it is not properly working on the code snippet but it does on JSFiddle for example. I.E. https://jsfiddle.net/vm1scerv/

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Drubio
  • 1,157
  • 3
  • 13
  • 30
  • so remove the extra div then :) and see that your code won't work ;) – Temani Afif Feb 05 '18 at 23:24
  • ya i realised :( – user5857398 Feb 05 '18 at 23:25
  • 1
    last-child and last-type both will fail here or can fail as you don't know the content added to the body at the end ... that's why in both cases we should better use a container :) – Temani Afif Feb 05 '18 at 23:27
  • It seems to work properly in a JSFiddle https://jsfiddle.net/vm1scerv/ @user5857398 – Drubio Feb 05 '18 at 23:30
  • 2
    @Drubio it's arbitrary so we should not rely on it ... the snippet here added a div at the end and jsfiddle does't in this case (but it may in other cases !). So better avoid this as it may behave differently in each situation and for each tool – Temani Afif Feb 05 '18 at 23:32