Open In App

How to combine parent using ampersand (&) with type selectors in SASS ?

Improve
Improve
Like Article
Like
Save
Share
Report

Ampersand or “&” is a powerful feature of SASS. It enhances the readability of code by using nesting statements, which takes an edge over conventional CSS. We can nest the css class any number of times but most of the times it’s not required.

Syntax:




parent {
    some_styling;
   
    & .child_element {
        some_stylings;
    }
      
    /* :hover, :active, :visited etc.. */
    &:pseudo_selector {
        some_stylings;
    }
}


We can use any property of CSS by nesting a child element using the ampersand(&) symbol.

Example 1: SASS / SCSS:




.head {
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
  
    & .tagline {
        text-decoration: underline;
        background-color: rgb(29, 202, 29);
    }
  
    & .paragraph {
        font-size: 20px;
        color: rgb(45, 204, 204);
  
        & .read-more{
            color: rgb(113, 129, 129);
            font-size: smaller;
            border: 2px solid black;
        }
    }
}


Compiled CSS:

CSS




.head {
  font-family: 'Courier New', Courier, monospace;
  text-align: center;
}
  
.head .tagline {
  text-decoration: underline;
  background-color: #1dca1d;
}
  
.head .paragraph {
  font-size: 20px;
  color: #2dcccc;
}
  
.head .paragraph .read-more {
  color: #718181;
  font-size: smaller;
  border: 2px solid black;
}


Example 2 (using pseudo-selectors) SASS / SCSS:

SASS




a {
    text-decoration: none;
      
    &:hover {
        background-color: rgb(63, 168, 194);
        text-decoration: underline;
        font-weight: bold;
    }
  
    &:visited {
        color: rgb(157, 175, 53);
    }
  
    &:active {
        color: rgb(77, 77, 77);
    }
}


Compiled CSS:

CSS




a {
  text-decoration: none;
}
  
a:hover {
  background-color: #3fa8c2;
  text-decoration: underline;
  font-weight: bold;
}
  
a:visited {
  color: #9daf35;
}
  
  
a:active {
  color: #4d4d4d;
}




Last Updated : 22 Feb, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads