Shiva Shiva - 2 months ago 7
CSS Question

CSS3 ::selection selector not working properly on anchor tags

I am using the CSS3

::section
Selector like this

::selection{
color:red;
background-color:pink;

}
::-moz-selection {
color:red;
background-color:pink;

}


So when some element is selected it should change its color to red and the background to pink.

It works as expected for everything other than the Anchor tag
<a>
.

When an anchor text is selected, it applies the style to the link text but not on the line beneath the anchor text.

JSFiddle: http://jsfiddle.net/GcBT2/1/

So how can we apply the style to the underline also?

PS: Browsers tested: chrome 31 and firefox 25.0.1

SW4 SW4
Answer

Note that per MDN

Only a small subset of CSS properties can be used in a rule using ::selection in its selector: color, background, background-color and text-shadow. Note that, in particular, background-image is ignored, like any other property.

The line on your link is part of text-decoration which is not taken into consideration by the pseudo selector. Your best bet would perhaps be to remove it using

a{
 text-decoration:none;
}

You may want to also note:

Though this pseudo-element was in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase (link)

The ::selection pseudo-element currently isn't in any CSS module on the standard track. It should not be used in production environments.

Further information

Comments