Select First/Last Element of Specfic Class

Often, in our web projects, we come across the need to pick a particular or the first or last element of a group of elements having the same class. We will illustrate this with an example of creating a simple web development milestone progress bar.

We will classify the entire development process into the following five milestones: 1) Planning, 2) Designing, 3) Development, 4) QA/Testing and 5) Launch.

The markup is arranged as follows. The milestone texts are wrapped inside the <div/> elements which are siblings, and all have the common class milestone.

					
				<div class="milestone-wrapper">
					<div class="milestone">
						Planning
					</div>
					<div class="milestone">
						Designing
					</div>
					<div class="milestone">
						Development
					</div>
					<div class="milestone">
						QA/Testing
					</div>
					<div class="milestone">
						Launch
					</div>
				</div>
				
			

The <div/> elements are floated left and the milestone progress bar is set horizontally. We give some colour to the milestone backgrounds (). Here is the CSS.

				
				.milestone-wrapper {
					height: 30px;
					margin: 15px 0;
					text-align: left;
					width: 100%;
				}
				.milestone-wrapper .milestone {
					background-color: #1abc9c;
					border-right: 3px solid #fff;
					color: #fff;
					float: left;
					font-family: monospace;
					font-size: 12px;
				    margin: 0;
				    padding: 10px 0;
				    text-align: center;
				    width: 19%;
				}
				
			

Now suppose we need to round off the borders of the left and right side of the first and last milestones, or set a distinct colour to the current milestone, then we need to make a selection. The first <div/> element with class milestone can be selected with the :first-of-type selector and the last <div/> element with class milestone can be selected with the :last-of-type selector.

We use the above two selectors to round off the borders of the first and last milestones. We add two more CSS rules as follows.

				
				.milestone-wrapper .milestone:first-of-type {
					border-radius: 15px 0 0 15px;
				} 
				.milestone-wrapper .milestone:last-of-type {
				    border-radius: 0 15px 15px 0;
				} 
				
			

You can also use the nth-of-type(1) and the nth-last-of-type(1) selectors instead and they will produce the same effect.

				
				.milestone-wrapper .milestone:nth-of-type(1) {
					border-radius: 15px 0 0 15px;
				} 
				.milestone-wrapper .milestone:nth-last-of-type(1) {
				    border-radius: 0 15px 15px 0;
				} 
				
			

Now suppose you want to select the current milestone and highlight its background with a different colour. This, of course, can be any of the five. To select the nth element with class milestone, we choose the nth-of-type() selector. Suppose the current milestone is Development, then it can be selected with the nth-of-type(3) selector.

				
				.milestone-wrapper .milestone:nth-of-type(3) {
					background-color: #f9ca24;
				}