Understanding :first-child and :last-child Pseudo Class

Continuing from the previous tutorial about pseudo-class selector,  today we’ll discuss pseudo-class named :first-child and :last-child, just like another pseudo class, this pseudo-class will save our day because we don’t need to define a class name for the element, especially when the element is generated by a server-side programming language like PHP.

:first-child and :last-child Pseudo Class Selector

:first-child that was introduced in CSS 2, is used to select the first direct child element of a parent. CSS 2, you know, it means that it supported by old browser (IE >= 7). Despite having a similarity function with :last-child we have to wait for a long time until this selector exists, because it was available CSS 3, CSS 3, you know, it means that it supported by modern browser, (IE >= 9). As the name implies, this selector is used to select the last direct child element of a parent. Noteworthy that these elements will impact to each parent in an of group element, consider the following example:

  • List 1
  • List 2
    • List 2.1
    • List 2.2
    • List 2.3
      • List 2.3.1
      • List 2.3.2
      • List 2.3.3
  • List 3
  • List 4
  • List 5

In the above example, each <li> element that is in the first position of its parent will be colored blue, while the last position is red. The reason why the color of List 2.3.2 and 2.3.3 is red because it inherit from the List 2.3 style (:last-child) and none of style applied to it, different from List 2.3.1 which is styled using :first-child so it ‘s color is blue.

Real World Example Of Uses Of :first-child and :Last-Child

Example 1: List of Articles

These pseudo classes are often used when displaying sequentially elements both vertically and horizontally, for example: when displaying a list of recent articles that are separated by horizontal line, we don’t want the line appear at the very bottom of article,  so in this case, :last-child pseudo class come into play, for examples:

HTML Code:

<ul class="list-article">
	<li><a href="#">Understanding :first-child and :last-child Pseudo Class Selector</a></li>
	<li><a href="#">Understanding :nth-child and :nth-last-child Pseudo Class Selector</a></li>
	<li><a href="#">Add Javascript and CSS Files to Spesific Post or Pages in WordPress</a></li>
	<li><a href="#">How To Migrate WordPress Blog – A Step By Step Guide</a></li>
</ul>

CSS Rule:

.list-article {
	border: 1px solid #D0D0D0;
	border-top: 5px solid #CCCCCC;
    margin: 0;
    padding: 0 15px;
	width: 220px;
	list-style-type: none;
}
.list-article li a {
	color: #000000;
    display: block;
    padding: 10px;
    text-decoration: none;
	transition: all .3s;
}
.list-article li a:hover {
    color: #FF7007;
}
.list-article li {
    border-bottom: 1px solid #D4D4D4;
	margin: 0;
}
.list-article li:last-child {
    border-bottom: none;
}

In the above example, we eliminate the border of the last <li> element using .list-content li: last-child selector.

Example 2: Horizontal Menu

Another example of uses of the :first-child and :last-child pseudo class is when creating a horizontal menu with border, here is an example:

 HTML Code:
<nav>
	<ul class="main-menu">
		<li><a href="#">Home</a></li>
		<li><a href="#">Category</a></li>
		<li><a href="#">About Us</a></li>
	</ul>
	<div class="clear"></div>
</nav>

CSS Rule:

.thumbnail {
	border: 1px solid #BBBBBB;
	display: table;
    margin: 0;
	padding: 15px;
	list-style-type: none;
	text-align: center;
	width: auto;
}
.thumbnail li {
	float: left;
	margin-right: 10px;
	width: 90px;
	height: 90px;
	background-color: #BBBBBB;
	line-height: 90px;
}

In the above example, we eliminate the right border of the last <li> element using .main-menu li:last-child selector.

Example 3: Thumbnail Gallery

The next example of uses of these pseudo classes are when we arrange thumbnail for a gallery, as the following example:

HTML Code:

<ul class="thumbnail">
	<li>1st Image</li>
	<li>2nd Image</li>
	<li>3rd Image</li>
</ul>

CSS Rule:

.thumbnail {
	border: 1px solid #BBBBBB;
	display: table;
    margin: 0;
	padding: 15px;
	list-style-type: none;
	text-align: center;
	width: auto;
}
.thumbnail li {
	float: left;
	margin-right: 10px;
	width: 90px;
	height: 90px;
	background-color: #BBBBBB;
	line-height: 90px;
}

The Result:

  • 1st Image
  • 2nd Image
  • 3rd Image

In the above example, the distance of the third image with the right border is too much, it caused by the right margin of the Image itself (10px) plus an extra padding of the ul element (15px), in this case, :last-child pseudo-class come into play, let’s add a rule to our previous css:

.thumbnail li:last-child {
	padding-right: 0;
}

The Result:

  • 1st Image
  • 2nd Image
  • 3rd Image

If the thumbnail that we arrange caused more than one line (eg: 9 images), then we can use :nth-child selector, for more details please visit this page:

Example 4: Styling Article

Another example of the use of these pseudo classes are when styling our article so it becomes more interesting, for instance, an article that consists of several paragraphs and we want to add specific style to the first and last paragraphs:

While styling our HTML document, the usage of CSS pseudo-class selector will save our days a lot, because we don’t need to define a specific class name to each element that we want to apply a style to it, previously it can only be done by writing a specific class name to the element.

:first-child is a pseudo class selector that will match the first direct child element of its parent, as well as :last-child which will match the last direct child element of its parent.

By: WebDevCorner Team

Browser Support

:first-child() Pseudo Class

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 4.0 3.0 (1.9) 7[1] 9.5 4

Source: Mozilla Developer Network

:last-child() Pseudo Class

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 9.0 9.5 3.2

Source: Mozilla Developer Network

Subscibe Now

Loves articles on webdevzoom.com? join our newsletter to get quality article right to your inbox. Nothing else, just quality stuff!!!

Related Post

Leave a comment

Like Us

Newsletter

Great information from webdevzoom.com right to your inbox

We value your privacy

Social