What does the `:last-child` selector do?

The :last-child selector in CSS targets the last element among a group of sibling elements within a parent. It’s a way to style only the last child element. For example, if you want to set a border line on a vertical list of items:

Bananas
Berries
Apples
Grapes

What does the `not:last-child` selector do?

The not:last-child selector in CSS allows you to style all child elements except the last one within a parent. For instance, if you you want to center a list of elements with a margin between them:

Bananas
Berries
Apples
Grapes

HTML

<ul class="demo-list demo-list-last-child">
 <li>Bananas</li>
 <li>Berries</li>
 <li>Apples</li>
 <li>Grapes</li>
</ul>


<ul class="demo-list demo-list-not-last-child">
 <li>Bananas</li>
 <li>Berries</li>
 <li>Apples</li>
 <li>Grapes</li>
</ul>

CSS

.demo-list {
  list-style-type: none;
  margin: 2rem 0;
  padding: 0;
} 

.demo-list-last-child li {
  background: #F0F0F0;
  padding: 2px;
  border-top: 1px dotted #C06800;
}

.demo-list-last-child li:hover, 
.demo-list-not-last-child li:hover {
  background: #CFCECE;
  cursor: pointer;
}

.demo-list-last-child li:last-child {
  border-bottom: 1px dotted #C06800;
}

.demo-list-not-last-child {
  text-align: center;
}

.demo-list-not-last-child li {
  display: inline-block;
  text-align: center;
  border: 1px dotted #C06800;
  padding: 1rem;
}	
	
.demo-list-not-last-child li:not(:last-child) {
  margin-right: 20px;
}

HTML and CSS

Last Child and Not Last Child

What does the `:last-child` selector do?

What does the `not:last-child` selector do?

HTML and CSS

Last Child and Not Last Child

What does the :last-child selector do?

What does the not:last-child selector do?

What does the `:last-child` selector do?

What does the `not:last-child` selector do?