Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Adding mixin to modify appearance of selected text #201

wants to merge 1 commit into


None yet
2 participants

This mixin will allow users to modify the appearance of selected text via a @content block.

@plapier plapier commented on the diff Mar 24, 2013

@@ -0,0 +1,13 @@
+@mixin selection {
+ .selection {

plapier Mar 24, 2013


Why are you generating a .selection selector?


plapier commented Mar 24, 2013

Ugh, some of these css3 features suck. ::selection was drafted but then removed before it reached CR status. It's currently MIA from the w3c css specs. And on top of that, Firefox is the only one requiring a vendor-prefix.

Becuase it was removed from CSS3, I'm not sure it's worth implementing into Bourbon at the moment.

The .selection selector was intended to accomodate for IE8 (and below) compatibility using @extend. It's probably not necessary.

I didn't realize ::selection was dropped from the CSS3 spec, and it doesn't look like it's coming back any time soon. I wish it would though, as I find it pretty useful, and this code snippet is one of the first I copy into any new mixins file.


plapier commented Mar 25, 2013

Can you comment on what kind of rulesets you're creating with this mixin? Maybe an example or two of what you're using the mixin for?

Sure. An example ruleset would look nearly identical to the placeholder mixin already in Bourbon:

.text {
  @include selection {
    background: $background-color;
    color: $text-color;

For a real-world "usefulness" example, you can take a look at these these three pages and select the text with your cursor. The text selection background color matches the branding color for the rest of the page, and is done using this mixin.


plapier commented Jun 25, 2013

Because its missing from the CSS3 spec. im going to close this PR. Feel free to open it up if anything changes in the future. Thanks for the suggestion.

@plapier plapier closed this Jun 25, 2013

No problem. I'll keep an eye on it.

@derekblank derekblank referenced this pull request Jan 5, 2015


Add CSS3 selection mixin #544

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment