Style inner element of contenteditable block by focus on that child element

Question

I need to style inner span element which is inside of contenteditable block by focus on that inner span, it has to be highlighted when is focused. Is that even possible somehow?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="block" contenteditable="true" data-id="123">
        <p>
            Lorem ipsum dolor sit amet <span>consectetur</span> adipisicing elit. Non facere 
            atque aspernatur, pariatur architecto inventore explicabo eligendi 
            <span>maxime</span> laudantium corrupti esse ab nostrum, 
            at quis <span>quas</span> temporibus eum? Asperiores, iste.
        </p>
    </div>
    <style>
        .block {
            outline: none;
        }
        .block span {
            background-color: antiquewhite;
        }
        .block span:focus {
            background-color: red;
        }
    </style>
</body>
</html>

Can you please specify which inner element you have to style on the focus of `` — Random COSMOS, May 04 '20 at 17:54
Focus is used mainly on a input, textarea or button. Which element are you going to focus? Maybe you need hover? — focus.style, May 04 '20 at 17:56
`span` is inside of contenteditable block. When the cursor is inside of that `span` - `span` has to be highlighted. — Nazariy, May 04 '20 at 18:21

reymon359 · Accepted Answer · 2020-05-04T19:53:38.323

In order to highlight just the span element when you focus it try this in your stylesheet :)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="block" contenteditable="true" data-id="123">
        <p>
            Lorem ipsum dolor sit amet <span>consectetur</span> adipisicing elit. Non facere 
            atque aspernatur, pariatur architecto inventore explicabo eligendi 
            <span>maxime</span> laudantium corrupti esse ab nostrum, 
            at quis <span>quas</span> temporibus eum? Asperiores, iste.
        </p>
    </div>
    <style>
        .block {
            outline: none;
        }
        .block span {
            background-color: antiquewhite;
        }
     
        [contenteditable="true"] span:active {
           background-color: red;
      }
       
    </style>
</body>
</html>

I added a simple script so the element keeps being red when the mouse leaves. Have a look :)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="block" contenteditable="true" data-id="123">
    <p>
      Lorem ipsum dolor sit amet <span>consectetur</span> adipisicing elit. Non facere atque aspernatur, pariatur architecto inventore explicabo eligendi
      <span>maxime</span> laudantium corrupti esse ab nostrum, at quis <span>quas</span> temporibus eum? Asperiores, iste.
    </p>
  </div>
  <style>
    .block {
      outline: none;
    }
    
    .block span {
      background-color: antiquewhite;
    }
  </style>
  <script>
    let selectedElement = null;
    const setFocus = e => {
      if (selectedElement)
        selectedElement.style.backgroundColor = 'antiquewhite';

      selectedElement = window.getSelection().focusNode && window.getSelection().focusNode.parentNode;

      if (selectedElement && selectedElement.tagName == 'SPAN')
        selectedElement.style.backgroundColor = 'red';
    };
    document.onkeyup = setFocus;
    document.onmouseup = setFocus;
  </script>
</body>

</html>

Ok, as you requested no JavaScript and I already invested a lot of time in this question, this is my last answer. I know it is not entirely correct but it is not entirely wrong either.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="block" data-id="123">
    <p contenteditable="true">
      Lorem ipsum dolor sit amet </p><span contenteditable="true">consectetur</span>
    <p contenteditable="true"> adipisicing elit. Non facere atque aspernatur, pariatur architecto inventore explicabo eligendi
    </p><span contenteditable="true">maxime</span>
    <p contenteditable="true"> laudantium corrupti esse ab nostrum, at quis </p><span contenteditable="true">quas</span>
    <p contenteditable="true"> temporibus eum? Asperiores, iste.
    </p>
  </div>
  <style>
    .block {
      outline: none;
    }
    
    .block span {
      background-color: antiquewhite;
    }
    
    .block span:focus {
      background-color: red;
    }
    
    p,
    span {
      display: inline;
    }
  </style>
</body>

</html>

Similar case here: CSS: :focus of elements within contenteditable

@Nazarly I edited my answer with a proper solution for you. hope it helps :) — reymon359, May 04 '20 at 18:19
@Nazarly I reedited the answer, should work now. sorry for the first edit. — reymon359, May 04 '20 at 18:41
Works only when mouse is pressed on the `span`. Should be red when the cursor is on `span` — Nazariy, May 04 '20 at 18:45
@Nazariy I added a simple script so the element keeps being red when the mouse leaves. Have a look :) — reymon359, May 04 '20 at 19:14
@Nazariy I added another submission. I know it is not totally right but it works as you requested no JS. — reymon359, May 04 '20 at 19:55

Kumar Gaurav · Answer 2 · 2020-05-04T18:54:09.183

You can use tabindex in span tags. that will solve your problem.

you can read more about tabindex here enter link description here

and focus will work when you use your keyboard. in this case, use your tab to get focus in span tags.

body {
  font-size: 1.2rem;
  line-height: 2rem;
}

.block {
  outline: none;
}
.block span {
  background-color: antiquewhite;
}
.block span:focus,.block span:hover {
  background-color: red;
  color: white;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="block" contenteditable="true" data-id="123">
      <p>
        Lorem ipsum dolor sit amet <span tabindex=0>consectetur</span> adipisicing elit.
        Non facere atque aspernatur, pariatur architecto inventore explicabo
        eligendi <span tabindex=0>maxime</span> laudantium corrupti esse ab nostrum, at
        quis <span tabindex=0>quas</span> temporibus eum? Asperiores, iste.
      </p>
    </div>
  </body>
</html>

@Nazariy It is working fine. for focus in your span tags, use tab key. — Kumar Gaurav, May 04 '20 at 18:55
Uhh I understand. But it’s not an option for me. Has to be by cursor. — Nazariy, May 04 '20 at 19:07

Style inner element of contenteditable block by focus on that child element

2 Answers2