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

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.

Syntax:

  • For Last Child Selector:
    :last-child
  • For the Last of Type:
    :last-of-type

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



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Sass Code:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
   
<head>
    <title>
        :last-of-type selector
    </title>
</head>
   
<body>
    <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>
   
    <p>
        <b>Note:</b> Internet Explorer 8
        and earlier versions do not support
        the :nth-last-of-type() selector.
    </p>
</body>
   
</html>

chevron_right


Sass Code:

filter_none

edit
close

play_arrow

link
brightness_4
code

$bk: yellow
p:last-of-type 
  background-color: $bk

chevron_right


Output:
CSS Code:

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

output 3

References:

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


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.