css command that does the same effect as a.selected, but for a <p>

Question

I want my p to change color as soon as I click on it, and come back to the original color as soon as I click on another p. Somehow like it is done for a list of a href, where you use the command a.selected.

Is this possible for p? and how?

Thanks.

Answer 1

Normally, a p element is not selectable, but on modern browsers, and by the HTML5 CR, you can make it selectable by assigning a positive tabindex value to it. Then clicking on such an element will set focus on it, and it will match the :focus pseudo-class. Example:

<style>
p:focus { color: red; outline: none }
</style>
<p tabindex=10>Hello world!
<p tabindex=20>Hi again.
<p tabindex=30>The end.

The outline: none declaration is included, because without it, browsers will draw some kind of focus rectangle around the element. Of course if you want that rectangle (which is different in different browsers), omit this declaration or modify it.

Answer 2

Can you not just give your <p> a class and use :hover to change it's colour?

EXAMPLE