SASS | Selector Functions

The selector functions help in checking and changing the CSS selectors in the style-sheet. All of the functions except selector-nest() prevents the use of the parent selector.

selector-nest($selectors...): This method returns a new selector containing a nested list of CSS selectors based on the list given.
- Example:
  CSS
  selector-nest(".warning", "alert", "div")
- Output:
```
.warning div, alert div
```
selector-parse($selector): This method returns a list of strings contained in "selector" using the same format as the parent selector.
- Example:
  CSS
  selector-parse("h1 .myInput .warning")
- Output:
```
('h1' '.myInput' '.warning')
```
selector-unify($selector1, $selector2): This method returns a new selector that matches only elements matched by both selector1 and selector2.
- Example 1:
  CSS
  selector-unify("myInput", ".disabled")
- Output:
```
myInput.disabled
```
- Example 2:
  CSS
  selector-unify("p", "h1")
- Output:
```
NULL
```
simple-selectors($selector): This method returns a list of the individual selectors present in "selector", which should be a compound selector.
- Example:
  CSS
  simple-selectors("div.myInput")
- Output:
```
div, .myInput
```
is-superselector($super, $sub): This method returns a Boolean value telling whether the selector given in "super" matches all the elements given in "sub".
- Example 1:
  CSS
  is-superselector("div", "div.myInput")
- Output:
```
true
```
- Example 2:
  CSS
  is-superselector("div.myInput", "div")
- Output:
```
false
```
selector-replace($selector, $original, $replacement): This method returns a new selector with the selector given in "replacement" in place of selector given in "original".
- Example:
  CSS
  selector-replace("p.hello", "p", "q")
- Output:
```
q.hello
```
selector-append($selectors): This method returns a new selector with the second and next selectors appended to the first without any spaces.
- Example 1:
  CSS
  selector-append("div", ".myInput")
- Output:
```
div.myInput
```
- Example 2:
  CSS
  selector-append(".warning", "__a")
- Output:
```
warning__a
```
selector-extend($selector, $extendee, $extender): This method extends the $selector as @extend rule. It returns a copy of $selector modified with the following @extend rule:
```
#{$extender} {
    @extend #{$extendee};
}
```

SASS | Selector Functions

Explore