изменение css текущего активного абзаца в html

Question

Я только что понял, как сделать div редактируемым. Теперь я пытаюсь создать собственный редактор, используя тот же. Я уже сделал contentEditable на том же самом. Теперь проблема, с которой я столкнулась, - это то, что я хочу сосредоточиться только на текущем пара <p>, который пользователь пытается изменить. Например, в HTML код, как

<div id = "editor"> 
    <p> 
     this is first para 
    </p> 
    <p> 
     this is second para 
    </p> 
</div> 

Теперь то, что я хочу, если пользователь редактирует содержимое внутри первого р теге цвет шрифта то же должен быть черным, а все остальное содержание р обратились к незначительный черный. Как я могу это сделать, также это можно сделать в чистом css?

Answer 1

Вы не можете сделать это полностью, используя только CSS. Вам также понадобится JS. Вот фрагмент кода для эффекта, который вы пытаетесь применить.

$('#editor2 p').click(function(){ 
 
    $('#editor2 p').removeClass('active'); 
 
    $(this).addClass('active'); 
 
});

p{ 
 
\t color:blue; 
 
} 
 

 
#editor[contenteditable="true"] p{ 
 
\t color: red; 
 
} 
 

 
#editor2[contenteditable="true"] p{ 
 
\t color: green; 
 
} 
 

 
#editor2[contenteditable="true"] p.active{ 
 
\t color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id = "editor" contenteditable="true"> 
 
    <p> 
 
     this is first para 
 
    </p> 
 
    <p> 
 
     this is second para 
 
    </p> 
 
</div> 
 

 
<div id = "editor2" contenteditable="true"> 
 
    <p> 
 
     this is first para 
 
    </p> 
 
    <p> 
 
     this is second para 
 
    </p> 
 
</div>