using the last-of-type css selector to remove a border from the last item in a list

i find using the last-of-type css selector quite useful when there is a list or re-occuring items and the last one has to be slightly different from the other ones. 

This allows me to target the last item called a-list-item in my list, so if additional items are added or removed the last-of-type will still target the last one. 

You can also see that in the My List 2 area it starts the selector again which is terminated by its parent, so this rule will still apply as long as they are segrigated. 

HTML

<!-- -->
<h3>My List</h3>
<div class='my-list'>
  <div class='a-list-item'>An Item in the List</div>
  <div class='a-list-item'>An Item in the List</div>
  <div class='a-list-item'>An Item in the List</div>
</div>

<h3>My List 2</h3>
<div class='my-list-2'>
  <div class='a-list-item'>An Item in the List</div>
  <div class='a-list-item'>An Item in the List</div>
  <div class='a-list-item'>An Item in the List</div>
</div>

CSS

.a-list-item {
	border-bottom:3px solid #999;
  	margin-bottom:10px;
  	padding-bottom:10px;
}
.a-list-item:last-of-type {
	border-bottom:0px solid #999;
}

My List

An Item in the List
An Item in the List
An Item in the List

My List 2

An Item in the List
An Item in the List
An Item in the List

Other Items in css

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 69 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹

Random Quote
All of humanity's problems stem from man's inability to sit quietly in a room alone, wrote Blaise Pascal.
Unknown