How can I apply css styles to text that I highlight? Like highlighting in MSWord then clicking bold

Question

I am creating a graphic user interface with a drop down menu filled with css styles (bold, italics, changing color of words, etc). The problem I am running into is when I apply these styles, it applies to the entire paragraph and not the individual words. How can I code it to recognized what is highlighted and applying the formatting specifically to that.

I would like to apply span to just the highlighted portion. How?

Ex:

    <style>
    .red { 
    color: red; 
    }
    </style>

    <body>
    <p>This <span class="red">is a</span> test.</p>
    </body>

This is the only way I know of to apply span but would like to learn how to have it apply to what the user highlighted. Is there code that detects what user highlighted?

Edit: The goal is to highlight, apply a css style to what is highlighted, remove highlight and style is still there.

The initial answers saying to use `::selection` are missing the boat. `::selection` allows you to set the style of the _currently selected text_. As soon as the selection changes those styles no longer apply. To select text and change it "permanently" you have to find what is currently selected, then manipulate the DOM via Javascript to surround that text with a `` (or "strong" or "em" as appropriate) — Stephen P, Oct 31 '18 at 21:23

score 2 · Answer 1 · answered Oct 31 '18 at 21:08

2

I think you are looking for ::selection

https://developer.mozilla.org/en-US/docs/Web/CSS/::selection

::selection {
  background: cyan;
}

Some text

answered Oct 31 '18 at 21:08

Kushtrim

1,899
6
14

2

This would set the cyan background to the selected text, but as soon as the text was unselected it would go away. OP wants: 1. Select some text 2. Pick "bold" 3. Text stays bold even after the text is deselected. – Stephen P Oct 31 '18 at 21:17
The purpose is for site editors to make quick formatting edits buy highlighting what they want to edit and clicking on a premade list of css styles available. I was playing around with that code earlier but was stumped on how to apply the premade css styling to what is selected or highlighted. Edit: Yes exactly what Stephen said – user5329697 Oct 31 '18 at 21:19
My bad. But I don't think that is possible without using javascript. – Kushtrim Oct 31 '18 at 21:24

score 0 · Answer 2 · answered Oct 31 '18 at 21:11

0

If you want to highlight only the span.red, use the ::selection pseudo-element like so:

span.red::selection { background-color: red }

<p>Hello, <span class="red">RED HIGHLIGHT</span>!</p>

answered Oct 31 '18 at 21:11

Rafael

7,605
13
31
46

score 0 · Answer 3 · answered Oct 31 '18 at 21:11

Try this out. It should work for you. We have an a span with an id bg-span on which we apply our styling.

<!DOCTYPE html>
<html>
<head>
<style>

#bg-span {
    background-color: #f18973;
}
</style>
</head>
<body>

<p>Set a <span id="bg-span">background</span> color for only a part of a text.</p>

</body>
</html>

score 0 · Answer 4 · answered Oct 31 '18 at 21:35

I searched and found one solution to get selected/highlighted text by JavaScript and hide it.
You can use this solution and change code to wrap selected text with span and add selected class to that span.

JQuery selector for highlighted text

Good Luck

How can I apply css styles to text that I highlight? Like highlighting in MSWord then clicking bold

4 Answers4