Manipulate ::selection pseudo-element in developer tools

Question

Is it possible to adjust the properties of the :selection pseudo-element in Developer Tools?

I'd like to be able to test different background and font colors for selections without modifying the source CSS file, but I cannot find the pseudo-element anywhere when inspecting the page.

Laicize

Answer 1

You can accomplish this in Internet Explorer and Firefox by right-clicking inside the Styles panel and selecting New Rule.

1. Right-click in Styles panel
2. Select Add New Rule from context menu
3. Write new ::selection rule and add properties

Chrome has a small icon in the Styles panel that you can click to create a new Rule.

1. Click New Style Rule button in Styles panel
2. Write new ::selection rule and add properties

Soliloquy

Cool! Thanks for that. However, this only seems to work (in Chrome, at least) if there isn't an existing ::selection rule in the stylesheet. – Laicize

@Mute You can give your selection rule higher specificity. Apply it directly to the element you wish p::selection, or set !important after the value for testing purposes. – Soliloquy

Right on. !important will work well in this instance. – Laicize

Answer 2

The ::selection pseudo element is available in Chrome's dev tools as the last style in the styles pane - almost as if it were the least specific style. To view it, make sure you have it defined in your stylesheet, then select some text and inspect one of the selected words/areas.

As was mentioned by @Sampson, you can also add ::selection styles using just ::selection or a more specific selector, like p::selection or span::selection. Keep in mind, however, that according to the spec, you can only affect the color, background-color, cursor, outline, text-decoration, text-emphasis-color and text-shadow with the ::selection pseudo element.

Another consideration when using the ::selection pseudo is that you may be affecting accessibility by creating selections that lack in contrast. You also may be affecting visibility of links. In such cases, you can test your contrast using a contrast examiner tool and you can create more specific ::selection styles for links - something like:

span::selection {
    background-color: #b3d8fd;
}

a.footnote span::selection {
    color: #920000;
}

Iasis