Version: 1.1.alpha.0
Source on Github

Compass Text Selection

Styles text selection foreground and background color with CSS.

This file can be imported using: @import "compass/css3/selection"


  1. Browser Support – Provides configuration options for the Compass Browser Support Matrix.
  2. Color – Utilities for working with colors.

Configurable Variables help


The prefixed support threshold for ::selection. Defaults to the $graceful-usage-threshold.


view source

=selection($background-color: null, $color: contrast-color($background-color))
  +with-each-prefix(css-selection, $selection-support-threshold)
    $selector: ""
    @if $current-prefix != null
      $selector: $current-prefix + "-"
    $selector: "&::#{$selector}selection"
      color: $color
      background-color: $background-color
@mixin selection($background-color: null, $color: contrast-color($background-color)) {
  @include with-each-prefix(css-selection, $selection-support-threshold) {
    $selector: "";
    @if $current-prefix != null {
      $selector: $current-prefix + "-";
    $selector: "&::#{$selector}selection";
    #{$selector} {
      color: $color;
      background-color: $background-color;

Style selected text.

At this time, only two CSS properties are supported in most browsers during selection: color and background-color. Firefox supports the text-shadow property.

At the stylesheet root, include the mixin within the * selector.

* {
  @include selection(#fe57a1, #fff)

If a specific element or selector's selection is being styled you can use that selector instead. For example:

.hot-pink {
  @include selection(#fe57a1, #fff)

These properties can be passed as arguments or you can set them via mixin content.

For future-forward compatibility with other properties and aesthetic freedom, a mixin content block can be passed to this mixin in addition to or in place of passing arguments.

.hot-pink {
  @include selection {
    background: #fe57a1;
    color: #fff;

When $background-color is specified, but $color is not, this mixin styles the foreground color like the contrasted mixin. To specify only the background-color, you should pass an explicit null value for $color or use mixin content.