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:
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:
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:
Output:
myInput.disabled
Example 2:
Output:
NULL
simple-selectors($selector): This method returns a list of the individual selectors present in "selector", which should be a compound selector.
Example:
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:
Output:
true
Example 2:
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:
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:
Output:
div.myInput
Example 2:
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:
