Text Selection

Type: Mixin

@include text-selection();

* You can call mixins with or without gls- namespace (e.g. @include gls-text-selection();).

Text Selection Sass mixin helps you to style the portion of a text (or element) that is selected by a user.

Arguments

Name	Type	Description
`$value`	`string`	Accepts `only` value. It is used only when it wants to be applied for one specific HTML element.

If you call it in a selector with no value passed the style rules will be applied to this element and its children.

.element{
  @include text-selection{
    color: pink;
    background-color: red;
  }
}

//CSS Output
.element::selection,
.element *::selection {
  color: pink;
  background-color: red;
}

Pass the only value as an argument to apply the style rules to only one specific HTML element.

.element{
  @include text-selection(only){
    color: pink;
    background-color: red;
  }
}

//CSS Output
.element::selection {
  color: pink;
  background-color: red;
}

Call the mixin at the root of your stylesheet to target all the HTML elements.

@include text-selection{
  color: pink;
  background-color: red;
}

//CSS Output
::selection {
  color: pink;
  background-color: red;
}