11

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

* {
    &::selection { text-decoration: underline; }
}
0

5 Answers 5

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;
}
3
  • 3
    This is definitely much cleaner and more reusable than Peter's answer. Hope it rises to the top!
    – BoltClock
    Sep 2, 2013 at 20:54
  • @VitalyBatonov If your question is answered, mark it as it is :)
    – yckart
    Jul 19, 2014 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, 2014 at 4: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 ;)

2
  • 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 on Mozilla developer network.
    – Pierre
    Feb 10, 2013 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 2, 2013 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.

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;
      }
   }
}
0

With compass you could do it like the following:

@import "compass/css3/selection";
@include selection($highlightBackground, $highlightColor)
1
  • "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 8, 2015 at 13:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.