Open In App

How to create a combined child selector in SASS ?

Improve
Improve
Like Article
Like
Save
Share
Report

Introduction: Lets first talk about the various types of Combinators available in CSS.

Combinator: A combinator is something that explains the relationship between the selectors. A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS:

  • Descendant selector (space)
  • Child selector (>)
  • Adjacent sibling selector (+)
  • General sibling selector (~)
  1. Descendant Selector: The descendant selector matches all elements that are descendants of a specified element.

    The following example selects all <p> elements inside <div> elements:

    div p {
     background-color: red;
    }
    
  2. Child Selector: The child selector selects all elements that are the children of a specified element.

    The following example selects all <p> elements that are children of a <div> element:

    div > p {
     background-color: red;
    }
    
  3. Adjacent Sibling Selector: The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. Sibling elements must have the same parent element, and “adjacent” means “immediately following”.

    The following example selects all <p> elements that are placed immediately after <div> elements:

    div + p {
     background-color: red;
    }
    
  4. General Sibling Selector: The general sibling selector selects all elements that are siblings of a specified element.

    The following example selects all <p> elements that are siblings of <div> elements:

    div ~ p {
     background-color: red;
    }
    

Now let’s talk about creating a combined child selector in SASS.

There are several ways to create a combined child selector in SASS.

See the examples given below.

Without the combined child selector you would probably do something like this:




card {
 outer {
   inner {
     color: red;
   }
 }
}


If you want to produce the same syntax with >, you can do this:

card {
 > outer {
   > inner {
     color: red;
   }
 }
}

Output:

The above code compiles to the given code in CSS:

card > outer > inner {
 color: red;
}

Or in SASS, it compiles to:

card
 > outer
   > inner
     color: red

Last Updated : 15 Oct, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads