Как сделать так чтобы параграф менял цвет при нажатии на него и оставался таким пока фокус не перейдёт на другой параграф?

Question

[JohnDoe116]

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

Comments

[Rustam Bainazarov]

p:hover,
p:focus {
   color: red;
}

[Максим]

Рустам Байназаров tabindex добавь в каждый p

[Rustam Bainazarov]

Максим Ленский, да, он тоже нужен, спасибо!

JohnDoe116, добавьте ещё и его + значение относительно других элементов (чем выше значение, тем выше приоритет).

[JohnDoe116]

Рустам Байназаров, псевдокласс :focus почему то не работает, c :hover всё понятно

[Rustam Bainazarov]

JohnDoe116, теперь работает после добавления tabindex, как сказал Максим Ленский.

Я про него забыл. Точнее, без него тоже бы работало, но я поднял приоритет с помощью значения tabindex="1". Теперь они в первую очередь выделяются.

Answer 1

[Андрей]

Как вариант, добавить tabindex="0" для параграфов

<p tabindex="0">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate provident ipsa, architecto ducimus alias hic inventore, minus cum tenetur aut ullam assumenda tempora quia sapiente omnis doloribus voluptatem delectus illo ex quibusdam velit deleniti laboriosam voluptatibus! Mollitia ipsum nemo nam necessitatibus amet harum voluptatum, laboriosam tenetur, explicabo expedita quasi delectus?</p>

Comments

[JohnDoe116]

спасибо, думал нужно будет JS писать