How to create a combined child selector in SASS ?
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;
}
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
Share your thoughts in the comments
Please Login to comment...