How to create a combined child selector in SASS ?

15 Oct, 2020
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 (~)
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;
}
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;
}
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;
}
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;
}

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;
}

The following example selects all <p> elements inside <div> elements:
div p {
 background-color: red;
}

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;
}

The following example selects all <p> elements that are children of a <div> element:
div > p {
 background-color: red;
}

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;
}

The following example selects all <p> elements that are placed immediately after <div> elements:
div + p {
 background-color: red;
}

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;
}

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

CSS-Misc
SASS
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners