Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

Last-child and last-of-type selector in SASS

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

SASS is also called Syntactically Awesome Stylesheet. It is a programming language that is interpreted into CSS. The Last Child selector is a selector that allows the user to target the last element inside the containing element. This selector is also known as a Structural Pseudo class which means it is used for styling content on the basis of parent and child content.
The Last type of selector is used to match the last occurrence of an element within the container. Both selectors work in the same way but have a slight difference i.e the last type is less specified than the last-child selector.


  • For Last Child Selector:
  • For the Last of Type:

Example: This example implements the :last-child selector.

<!DOCTYPE html>
<html lang="en">
        <h1>Welcome To GeeksForGeeks.</h1>
        <p>A Computer Science Portal For geeks!</p>

Sass Code:

$myColor: lime
$bkc: black
$pad: 5px
  color: $myColor
  background-color: $bkc
  padding: $pad

Output: After compiling the SASS source code you will get this CSS code.
CSS Code:

p:last child {
  color: lime;
  background-color: black;
  padding: 5px;

output 2

Example: last-of-type A Sample Example Is Shown Below

<!DOCTYPE html>
        :last-of-type selector
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
    <p>The fourth paragraph.</p>
    <p>The fifth paragraph.</p>
    <p>The sixth paragraph.</p>
    <p>The seventh paragraph.</p>
    <p>The eight paragraph.</p>
    <p>The ninth paragraph.</p>
        <b>Note:</b> Internet Explorer 8
        and earlier versions do not support
        the :nth-last-of-type() selector.

Sass Code:

$bk: yellow
  background-color: $bk

CSS Code:

p:last-of-type {
  background-color: yellow;

output 3


Supported Browser: The browsers supported by :last-child and :last-of-type selector in SASS are listed below:

  • Google Chrome 4.0
  • Edge 9.0
  • Firefox 3.5
  • Safari 3.2
  • Opera 9.6

My Personal Notes arrow_drop_up
Last Updated : 18 Nov, 2019
Like Article
Save Article
Similar Reads
Related Tutorials