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