HTML / CSS: Focus a Paragraph

Question

I want to focus each tag "p" separately when I click on it, for example, "focus": "CSS" in the tab. The problem is that the selector “focus” does not work on paragraphs, here is an example:

HTML

<div id="myDiv">
    <p>Some Content 1</p>
    <p>Some Content 2</p>
    <p>Some Content 3</p>
    <p>Some Content 4</p>
</div> 

CSS

#myDiv p:focus {background-color:red;}

How to find an alternative solution for his work?

Answer 1

You can add tabindexto the tag pto achieve this.

#myDiv p:focus {
    background-color:red;
}

<div id="myDiv">
    <p tabindex="0">Some Content 1</p>
    <p tabindex="0">Some Content 2</p>
    <p tabindex="0">Some Content 3</p>
    <p tabindex="0">Some Content 4</p>
</div>

Run codeHide result

JQuery solution will be

click = false;
$(document).click(function(e) {
  if(!($(e.target).is('p'))) {
    $('p').css('background', 'transparent')
  }
})
$('p').click(function() {
    $('p').css('background', 'transparent');
    $(this).css('background', 'red');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="myDiv">
  <p>Some Content 1</p>
  <p>Some Content 2</p>
  <p>Some Content 3</p>
  <p>Some Content 4</p>
</div>

Run codeHide result

Answer 2

Here is just the javascript version:

function highlight(theP)
{
	var x = document.getElementsByTagName("p");
	var i;
	for (i = 0; i < x.length; i++)
	{
		x[i].style.background = "";
	}

	theP.style.backgroundColor = "red";
}

<div id="myDiv">
    <p onclick="highlight(this);">Some Content 1</p>
    <p onclick="highlight(this);">Some Content 2</p>
    <p onclick="highlight(this);">Some Content 3</p>
    <p onclick="highlight(this);">Some Content 4</p>
</div>

Run codeHide result