How can I correctly select the first or the last child with CSS?

by

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.

More Related Contents:

  1. Understanding CSS selector priority / specificity
  2. CSS Pseudo-classes with inline styles
  3. How can I select the last element with a specific class, not last child inside of parent?
  4. Are class names in CSS selectors case sensitive?
  5. Why doesn’t table > tr > td work when using the child selector?
  6. CSS selector by inline style attribute
  7. :last-child not working as expected?
  8. Using CSS :before and :after pseudo-elements with inline CSS?
  9. Using :before and :after CSS selector to insert HTML [duplicate]
  10. What is syntax for selector in CSS for next element?
  11. :nth-child(even/odd) selector with class [duplicate]
  12. How to CSS: select element based on inner HTML [duplicate]
  13. What is the performance impact of the universal selector?
  14. What are the priorities among CSS selectors
  15. Why is nth-child selector not working?
  16. CSS selector with period in ID
  17. Can a ::before selector be used with a ?
  18. Avoiding repeated constants in CSS
  19. What is the ::content/::slotted pseudo-element and how does it work?
  20. CSS Selector “(A or B) and C”?
  21. Why does the general-sibling combinator allow toggling pseudo-element’s content, but not the adjacent-sibling?
  22. How do I select an element that has a certain class?
  23. Selecting the last element among various nested containers
  24. Is there a reason to use a instead of a:link or a:visited in my stylesheet?
  25. Zebra striping a flexbox table with wrapping items
  26. CSS attribute selector does not work a href
  27. How to use nth-child for styling with a table with rowspan?
  28. CSS Selector for No-Children-But-Not-Empty
  29. How to select classes with spaces
  30. Targeting text nodes with CSS

Leave a Comment