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;
}