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
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.
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.
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.
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
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>
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With