Span destroys selection background

[Traveller]

One Definition and Usage for the HTML <span> Tag on w3schools is:

The <span> tag provides no visual change by itself.

 

This may be true for unselected text, but it is wrong for selected texts where selection background styles are applied to.

Here is a Fiddle were you can see what I mean. Please select the text in the Result window.

 

Is there a way to prevent this behaviour?

[Ingolme]

It appears selection styles aren't inherited. The solution would be to apply the selection style to the span elements as well.

[dsonesuk]

Create outer container, remove class from paragraph and apply it to this outer element and use .selectionBgYellow ::-moz-selection.

[Traveller]

Thank you both for your quick replies.I tried to create 2 new fiddles based on your suggestions.

 

According to Ingolme, "Apply the selection style to the span elements as well", I created this fiddle.

This seems to me to be a good workaround.

 

According to dsonesuk, "Move .selectionBgYellow::-moz-selection to a new outer container", I created another fiddle.

I don't know why, but the .selectionBgYellow::-moz-selection has no effect on the outer div.

 

 

[dsonesuk]

LOOK carefully at my solution and try again with my selector exactly

[Traveller]

Thank you dsonesuk.

The space between .selectionBgYellow and ::-moz-selection makes it to a descendent selector, doesn't it?

I didn't know that before. I'm a beginner to CSS .

Here I have tried this concept with 2 different background colors.

A realy nice solution.

The descendent selector makes the style to be applied to the span like to any other element in the same container.

[Traveller]

I’m satisfied with the proposed solutions.However, it’s still my opinion that the browsers have a faulty implementation of the definition “The <span> tag provides no visual change by itself”.When you have access to the sources of the web pages, it’s no problem to apply the proposed workarounds.When the sources are less accessible, e.g. when you make a browser add-on, I guess you would need JavaScript and libraries like JQuery just to implement the workarounds.

[dsonesuk]

Depends how you read

 

The ::selection selector matches the portion of an element that is selected by a user.

 

If you go by this! the portion of element you applied p::selection to was the paragraph element only, the span is a separate element which you had not targetted, While using .selectionBgYellow ::-moz-selection would target ALL child descendants elements of parent using class '.selectionBgYellow'. If you where to have <em>, <u> tags as well in your first example you would have the same problem.

 

https://jsfiddle.net/ox749jem/1/

Edited June 23, 2015 by dsonesuk

[Traveller]

Your jsfiddle shows very clearly, that other elements also have the same behavior like the span.

It’s not what I was expecting, but that's the way it is.Thank you very much for your help.