change background colour of p element when touch - html

Question

This html page may have more than one <p> element. I wish to change the background of the one that gets touched by the mobile user. And if the user touches another, then the previous touched paragraph returns back to the its original background colour "default white".
I tried few selectors for no avail. How can it be done with CSS? thanks
edit
There are 2-3 lines of data which need to be displayed to the user, I used paragraph for each group of 2-3 lines, since I can do a bit of formatting as well as showing the different pieces of data like a vertical list.
So I wish to be able to select an item from the "list" and apply other actions relating to the selected item.
.selectable:focus {
background-color: lightgray;
}
<template name="myName">
<p class="selectable"><b>{{value.[0]}}</b><br/>{{value.[1]}}<br/>{{value.[2]}}</p>
</template>

Answer 1

Following the #CBroe suggestion, you could do the following:
<p class="selectable" tabindex="0"> Paragraph 1 </p>
<p class="selectable" tabindex="0"> Paragraph 2 </p>
<p class="selectable" tabindex="0"> Paragraph 3 </p>
<p class="selectable" tabindex="0"> Paragraph 4 </p>
.selectable:focus {
background-color: lightgray;
}
See the jsfiddle.
You can learn more about tabindex here.

Answer 2

If you can use jQuery you can do it like this:
jQuery:
$("p.selectable").click(function(){
$("p.selectable").removeClass("clicked");
$(this).addClass("clicked");
})
CSS:
p.selectable {
background:white;
height:100px;
}
p.selectable.clicked {
background: red;
}
See this jsfiddle. It is hard to do with CSS only. CSS is ment to change formatting. If you want to trigger actions, use javascript. (It can be done with a hacky method in CSS like adding a invisble checkbox over the paragraphs or something but lets not get into that)
EDIT: apparently can also be achieved by adding a tabindex as #CBroe suggested. Neat trick :) However, if you want to trigger more actions when the paragraphs are clicked, use javascript approach. If you only want to change the style, you can use this CSS only trick.

Answer 3

This would be a hacky way of doing it, but you can utilize the :checked pseudo-selector in combination with the text as a way to toggle its "selected" state.
.selectable {
display: none;
}
.selectable:checked + label {
color: red;
}
<input type="checkbox" id="unique-id" class="selectable">
<label for="unique-id">
<b>{{value.[0]}}</b><br/>{{value.[1]}}<br/>{{value.[2]}}
</label>
The benefit to this is that you are not reliant on JavaScript and it should be pretty stable across the various devices and platforms.
Let me know if you have any questions or need further clarification!

Answer 4

Add a listener for the event you want
Apply the listener to the elements you want
Add the functionality you want, in this case: adding a class to give a background color (and removing the previous element's color).
$("p").on("tap",function(){
$('.add-color').removeClass('add-color');
$(this).addClass('add-color');
});