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.

  1. selector-nest($selectors…): This method returns a new selector containing a nested list of CSS selectors based on the list given.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      selector-nest(".warning", "alert", "div")

      chevron_right

      
      

    • 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:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      selector-parse("h1 .myInput .warning")

      chevron_right

      
      

    • 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:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

    • Output:
      myInput.disabled
    • Example 2:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      selector-unify("p", "h1")

      chevron_right

      
      

    • 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:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      simple-selectors("div.myInput")

      chevron_right

      
      

    • 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:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

    • Output:
      true
    • Example 2:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

    • 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:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      selector-replace("p.hello", "p", "q")

      chevron_right

      
      

    • 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:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

    • Output:
      div.myInput
    • Example 2:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

    • 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};
    }



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.