SASS | Selector Functions (original) (raw)

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.

1. 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

2. 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')

3. 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

4. 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

5. 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

6. selector-replace($selector, original,original, 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

7. 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

8. selector-extend($selector, extendee,extendee, extendee,extender): This method extends the selectoras@extendrule.Itreturnsacopyofselector as @extend rule. It returns a copy of selectoras@extendrule.Itreturnsacopyofselector modified with the following @extend rule:

#{$extender} {
@extend #{$extendee};
}