Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS3 ::selection selector not working properly on anchor tags

Tags:

html

css

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

like image 700
Shiva Avatar asked Dec 18 '13 12:12

Shiva


People also ask

How do you prevent the user from selecting the text rendering inside the following element?

You can use the user-select property to disable text selection of an element. In web browsers, if you double-click on some text it will be selected/highlighted. This property can be used to prevent this.

How do you exclude tags in CSS?

In CSS, to exclude a particular class, we can use the pseudo-class :not selector also known as negation pseudo-class or not selector. This selector is used to set the style to every element that is not the specified by given selector.

How do I select a selector in CSS?

The CSS id Selector The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.


2 Answers

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

like image 154
SW4 Avatar answered Oct 18 '22 13:10

SW4


There's an old bug report on bugzilla which relates to your problem. As you can see in comment 26 a selection is actually an extra anonymous element, that's why text-decoration of the surrounding anchor won't change its color since the selector only applies for this "child": <span>The word <span::selection>select</span::selection> is selected</span>.

like image 3
Simon Avatar answered Oct 18 '22 13:10

Simon