Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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.




<!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>


Sass Code:




$myColor: lime
$bkc: black
$pad: 5px
p:last-child 
  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>
<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>


Sass Code:




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


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


Last Updated : 18 Nov, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads