ekad,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
[contenteditable]>div.active {
border: 4px red solid;
}
#out{
color: #0000CD;
}
</style>
</head>
<body>
<output id="out"></output>
<div id="pt_text" contenteditable="true">
<div>111</div>
<div>111</div>
<div>(тут курсор)</div>
</div>
<script>
let edit = document.querySelector('#pt_text'),
div_active;
const deactivate = () => {
edit.querySelectorAll('.active').forEach(div => div_active === div || div.classList.remove('active'));
document.querySelectorAll('#pt_text > div').forEach((div, i) => div.id = `n${++i}`);
out.value = div_active ? `Курсор в ${div_active.id}` : ``;
};
deactivate();
document.addEventListener('selectionchange', () => {
if (document.activeElement === edit) {
let el = window.getSelection().focusNode;
if (el.nodeType === 3) el = el.parentNode;
div_active = el;
deactivate();
div_active.classList.add('active');
}
});
edit.addEventListener('focusout', ()=>{div_active=null,deactivate()})
edit.addEventListener('keyup', deactivate)
</script>
</body>
</html>