Open In App

SASS | Selector Functions

Improve
Improve
Like Article
Like
Save
Share
Report

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:




      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:




      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:




      selector-unify("myInput", ".disabled")

      
      

    • Output:
      myInput.disabled
    • Example 2:




      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:




      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:




      is-superselector("div", "div.myInput")

      
      

    • Output:
      true
    • Example 2:




      is-superselector("div.myInput", "div")

      
      

    • Output:
      false
  6. 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
  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:




      selector-append("div", ".myInput")

      
      

    • Output:
      div.myInput
    • Example 2:




      selector-append(".warning", "__a")

      
      

    • Output:
      warning__a
  8. 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};
    }


Last Updated : 11 May, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads