Multiple CSS3 ::selection

Question

Okay, I want to be able to have multiple backgrounds for various text on my page, as in, if the user highlights the text, the h1's should be a different color, h2's should be a different color, etc.

My default ::selection for all text on the page THAT can be selected otherwise

::-moz-selection { background:#fff; color:#fff; }
::selection { background:#fff; color:#fff; }

However I want some of my words that are a different color to have a different background ::selection

This is my html below:

<span class="bigblue bigblueselect">Snoop Lion</span>

CSS below:

   .bigblue {color:#69b5e1;} 

    .bigblueselect ::-moz-selection { background:pink; }
    .bigblueselect ::selection { background:pink; }

How can I get multiple CSS3 ::selection's on a page? Thanks, I could not figure it out and am turning here as a last resort. I want certain headings / text to have a different background color when selected, but I can't quite figure this out.

[`::-webkit-selection` does not exist](http://stackoverflow.com/questions/7545550/has-the-webkit-selection-selector-ever-been-supported) and `::-moz-selection` should ideally come before `::selection`, not after. Also, your selector is wrong - I don't see a `.bigblueselect` anywhere. — BoltClock, Aug 04 '12 at 22:39
Just fixed the code. Thanks for the webkit bit. my html is: Snoop Lion — mazing, Aug 04 '12 at 22:44

score 3 · Accepted Answer · answered Aug 04 '12 at 22:49

You need to remove the space between .bigblueselect and ::selection, as that is a descendant selector so it'll only apply to descendant elements and not your .bigblueselect itself:

.bigblueselect::-moz-selection { background:pink; }
.bigblueselect::selection { background:pink; }

Multiple CSS3 ::selection

1 Answers1