Skip to content
Related Articles

Related Articles

Last-child and last-of-type selector in SASS
  • Last Updated : 18 Nov, 2019

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

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :