CSS ::selection inline

Question

I have a div, and I want to change the selection style.

It works fine like this:

<div>Text text</div>
<style>
div::selection {
    background: #FFF;
    color: #000;
}
</style>

The problem is that I want to send it in the email, so it has to be inline code.

(<div style=""></div>)

Is there any way to do that?

But you can add the same as an internal style that you have done above. So is that not working? — Nitesh, Nov 15 '13 at 10:59
@NathanLee Can you show me how to do that with `inline-style`? — HTMHell, Nov 15 '13 at 11:02

BoltClock · Answer 1 · 2013-11-15T11:13:31.813

2

Inline styles pertain to elements, not pseudo-elements, so you cannot do this with an inline style.

I'm not entirely sure which non-webmail clients support ::selection (other than Thunderbird with ::-moz-selection) anyway. But you should be able to get away with using an internal stylesheet, as you already are doing (except move the <style> element to <head> instead), depending on which clients you're supporting.

Personally I wouldn't bother with ::selection in an email at all. There's virtually no need for it, especially when you consider the poor CSS support that email clients are often known for.

edited Nov 15 '13 at 11:13

answered Nov 15 '13 at 11:02

BoltClock

700,868
160
1,392
1,356

I agree with not including ::Selection Most likely, only outlook and maybe a few others will support it. – KapteinMarshall Nov 15 '13 at 11:11

score 2 · Answer 2 · answered Nov 15 '13 at 11:04

The easiest way to do this is as follows. Inside the "head" tag of your email, simply include your style

<head>
<style>
div::selection {
    background: #FFF;
    color: #000;
}
</style>
</head>
<body>
    //your email body

I should also note here that Pseudo elements, such as div::selection, are selectors, and cannot be styled inline.

CSS ::selection inline

2 Answers2