SASS | Selector Functions
Last Updated :
11 May, 2020
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:
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.
- selector-unify($selector1, $selector2): This method returns a new selector that matches only elements matched by both selector1 and selector2.
- Example 1:
selector-unify( "myInput" , ".disabled" )
|
- Output:
myInput.disabled
- Example 2:
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:
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:
is-superselector( "div" , "div.myInput" )
|
- Output:
true
- Example 2:
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:
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:
selector-append( "div" , ".myInput" )
|
- Output:
div.myInput
- Example 2:
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};
}
Share your thoughts in the comments
Please Login to comment...