11

I tried to do the following, but it does not work:

* {
    &::selection { text-decoration: underline; }
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Vitaly Batonov
  • 1,112
  • 3
  • 12
  • 21

5 Answers5

32

That's the way I do it:

// define it
@mixin selection {
    ::-moz-selection { @content; }
    ::selection { @content; }
}

// use it
@include selection {
    color: white;
    background: black;
}

Update

I recommend to just use ::selection {} with autoprefixer instead of a mixin. This will make your code thinner and your brain lighter :)

In this case, autoprefixer will transform this:

::selection {
    color: white;
    background: black;
}

...(depending on your target browsers/configuration) into something like that:

::-moz-selection {
    color: white;
    background: black;
}

::selection {
    color: white;
    background: black;
}
Andy Merskin
  • 153
  • 1
  • 10
yckart
  • 32,460
  • 9
  • 122
  • 129
  • 3
    This is definitely much cleaner and more reusable than Peter's answer. Hope it rises to the top! – BoltClock Sep 02 '13 at 20:54
  • @VitalyBatonov If your question is answered, mark it as it is :) – yckart Jul 19 '14 at 12:19
  • Sadly, I don't think that's going to happen - the OP hasn't been on the site since even before you posted this answer. Your answer has already risen to the top, however, so there's that at least. – BoltClock Jul 20 '14 at 04:32
11

Mixins work with pseudo element selectors ;) see my mixin:

$prefixes: ("-moz-", "");
@mixin selection($color, $background) {
    @each $prefix in $prefixes {
        ::#{$prefix}selection {
            color: $color;
            background: $background;
        }
    }
}

how to use:

@include selection(white, black);

of course you can make it far more flexible, but it was sufficient for me ;)

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Peter
  • 946
  • 9
  • 23
  • 1
    ::selection has only a -moz prefix, and it's worth to note that it's a non standard and should not be used, check this [page](https://developer.mozilla.org/en-US/docs/CSS/::selection) on Mozilla developer network. – Pierre Feb 10 '13 at 18:02
  • @Peter: Strange that I missed it when I edited this answer the first time. I usually pay close attention to these things. (And yes, I know you're not the same Peter.) – BoltClock Sep 02 '13 at 20:51
7

While the ::selection pseudo-element was still in the draft spec, text-decoration was not stated as one of the allowed style properties. Given that browsers implement it anyway, they should be following the rules according to that document, disallowing text-decoration as such.

That said, there's nothing wrong with your selector, although it's worth noting that Firefox uses the vendor-prefixed version ::-moz-selection instead. You'd have to repeat the rule to support that browser, along with Chrome, Safari and Opera (see this answer for info).

So in SCSS, you'd do this:

* {
    &::-moz-selection { /* Style any selection */ }
    &::selection { /* Style any selection */ }
}

You might be able to reduce that using mixins, but I'm not sure if mixins work with pseudo-element selectors.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
1

Great mixin, I have changed to work inside a rule by adding "&", it works better for me. I have also added a empty prefix to get the rule with no prefix.

@mixin selection($color, $background) {
   $prefixes: ("-moz-", "-webkit-", "-o-", "-ms-", "");
   @each $prefix in $prefixes {
      &::#{$prefix}selection {
        color: $color;
        background: $background;
      }
   }
}
dieppon
  • 71
  • 1
  • 4
0

With compass you could do it like the following:

@import "compass/css3/selection";
@include selection($highlightBackground, $highlightColor)
dude
  • 5,678
  • 11
  • 54
  • 81
  • "Just use someone else's library" does not explain how one would go about writing a similar feature that doesn't exist in said library. – cimmanon Jul 08 '15 at 13:42