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.

Answer 1

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