Sass - Selector Functions

The selector functions allow you to manipulate the CSS selectors in a stylesheet. All of the functions except selector-nest() prohibit the use of the parent selector &.

Function Description Examples
selector-nest($selectors) Returns a new selector containing a nested list of CSS selectors based on the list provided. selector-nest(p, h1, ".foo")
Result: "p" "h1" .foo"
selector-append($selectors..) Returns a new selector with the second and subsequent selectors appended to the first without spaces selector-append(p, ".foo")
selector-replace($selector, $original, $replacement) Returns a new selector with the selector(s) specified in $replacement in place of selector(s) specified in $original selector-replace("p .italics", ".italics", ".bold")
Result: "p" "bold"
is-superselector($super, $sub) Returns a Boolean value indicating whether the selector specified in $super matches all the elements specified in $sub is-superselector("p", "p.b")
Result: true
is-superselector("p", "p .b") false
simple-selectors($selector) Returns a list of the individual selectors contained in $selector, which must be a compound selector simple-selector("p.b")
Result: ("p", "b")
selector-parse($selector) Returns a list of strings contained in $selector using the same format as the parent selector & selector-parse("p .a .b .c")
Result: ('p' '.a' '.b' '.c')