CSS not last of type Selector

In this article, we will discuss css not last of type. It is used to select all the HTML elements except last element. It is one of the pseudo-class selectors.

For ex: If you have 3 <p> tags called p1, p2, and p3, If you use a last-of-type selector for that only the p1 and p2 tag will be selected and p3 tag will not be selected.

Syntax:

HTMLelement:not(:last-of-type){
declaration list;
}

Example:
HTML:

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div>DIV 1</div>
<div>DIV 2</div>
<div>DIV 3</div

Here, we have 3 <p> tags and 3 <div> tags.

Select single not last of type selector like :

p:not(:last-of-type){
border: 2px solid black;
width: 40%;
}

It selects all the <p> tags except the last <p> tag. So, the output will look like this:

selecting multiple not last of type selector like :

p,div:not(:last-of-type){
border: 2px solid black;
width: 40%;
}

We need to put a comma (,) between two elements is called multiple not the last of the type selector. It selects all the <p> and <div> tags except placed on the last <div> tag. So, the output will look like this: