Kaytee Frei

Web Developer

Hello there! I'm Kaytee Frei, a web developer located in Central WI. I have a broad range of web skills, but my true passion lies in creating simple and visually appealing experiences.


Pseudo-element Gotcha

One of the subtle touches I like to add to the sites I work on is changing the text selection background color and text color. You can override the browser default (white text on blue background) with colors that blend well with your color scheme.

To accomplish this you must use the pseudo-element ::selection, and for Firefox ::-moz-selection. The catch is that you can't combine these two when you define the style (which I seem to forget frequently) because the browser will ignore the entire style block of a selector it doesn't recognize or support.

Example (Incorrect solution)

// INCORRECT
::selection,
::-moz-selection {
    background-color: #5d14bd;
    color: #000;
}

Say for example you are using Google Chrome, once it reaches the ::-moz-selection line it will skip over the rest of that style block, therefore leaving your selected text a boring white on blue. You instead have to do this:

Correct solution*

// CORRECT
::selection {
    background-color: #5d14bd;
    color: #000;
}
::-moz-selection {
    background-color: #5d14bd;
    color: #000;
}

*If you're feeling bad about breaking the DRY principle, look into using a CSS preprocessor such as Sass or Less.

You can check out my full example on CodePen.

comments powered by Disqus