Gerillass
v2.1.0Type: Mixin
@include text-selection();
* You can call mixins with or without the gls- namespace (e.g. @include gls-text-selection();).
The Text Selection Sass mixin helps you style the portion of text (or an element) that a user has selected.
Arguments
| Name | Type | Description |
|---|---|---|
$value | string | Accepts the only value. Use it when you want to apply the styles to one specific HTML element. |
Examples
Select the text in the result below. If you call it inside a selector without passing a value, the style rules apply to that element and its children.
.element{
@include text-selection{
color: pink;
background-color: red;
}
}.element::selection,
.element *::selection {
color: pink;
background-color: red;
}Result
Select the text in the result below and compare it with the example above. 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;
}
}.element::selection {
color: pink;
background-color: red;
}Result
Call the mixin at the root of your stylesheet to target every element on the page. Select either line in the result below.
@include text-selection{
color: pink;
background-color: red;
}::selection {
color: pink;
background-color: red;
}Result