Open In App
Related Articles

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

Like Article
Save Article
Report issue
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:
  • 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

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
Share your thoughts in the comments
Similar Reads