Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Sass Selector Functions


Sass Selector Functions

The selector functions are used to check and manipulate selectors. 

The following table lists all selector functions in Sass:

Function Description & Example
is-superselector(super, sub) Checks whether the super selector matches all the elements that sub matches.

Example:
is-superselector("div", "div.myInput")
Result: true
is-superselector("div.myInput", "div")
Result: false
is-superselector("div", "div")
Result: true
selector-append(selectors) Appends the second (and third/fourth etc.) selector to the first selector.

Example:
selector-append("div", ".myInput")
Result: div.myInput
selector-append(".warning", "__a")
Result: .warning__a
selector-extend(selector, extendee, extender)  
selector-nest(selectors) Returns a new selector containing a nested list of CSS selectors based on the list provided.

Example:
selector-nest("ul", "li")
Result: ul li
selector-nest(".warning", "alert", "div")
Result: .warning div, alert div
selector-parse(selector) Returns a list of strings contained in selector using the same format as the parent selector.

Example:
selector-parse("h1 .myInput .warning")
Result: ('h1' '.myInput' '.warning')
selector-replace(selector, original, replacement) Returns a new selector with the selectors specified in replacement in place of selectors specified in original.

Example:
selector-replace("p.warning", "p", "div")
Result: div.warning
selector-unify(selector1, selector2) Returns a new selector that matches only elements matched by both selector1 and selector2.

Example:
selector-unify("myInput", ".disabled")
Result: myInput.disabled
selector-unify("p", "h1")
Result: null
simple-selectors(selectors) Returns a list of the individual selectors in selectors.

Example:
simple-selectors("div.myInput")
Result: div, .myInput
simple-selectors("div.myInput:before")
Result: div, .myInput, :before