10

I want to focus each "p" tag separately when I click on it, like a CSS "focus:" on an input. The problem is that the selector "focus" doesn't work on paragraphs, here is an exemple :

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 can I find an alternative solution to make it work?

Akshay
  • 14,138
  • 5
  • 46
  • 70
Horai Nuri
  • 5,358
  • 16
  • 75
  • 127

2 Answers2

17

You can add tabindex to the p tag to 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>

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>
Akshay
  • 14,138
  • 5
  • 46
  • 70
  • Nice! I had no idea you could do that. I was going to suggest a javascript solution. – Lance Sep 04 '15 at 14:25
  • Really nice alternative, I didn't know you could do that! But I'm searching for a javascript solution if possible, because I'm running on drupal 7 and I can't change directly into the class for some fields. – Horai Nuri Sep 04 '15 at 14:31
  • @Lance can you post the javascript solution it would be useful too :) – Horai Nuri Sep 04 '15 at 14:33
  • If you are okay with jquery i can give you an answer @Sia – Akshay Sep 04 '15 at 14:37
  • Beat you to it @Lance :) – Akshay Sep 04 '15 at 14:55
  • @Akshay and Lance thanks for your help it's perfect :D! – Horai Nuri Sep 04 '15 at 15:01
  • You should post your answer @Lance a javascript solution will be great – Akshay Sep 04 '15 at 15:02
  • I'm having trouble with the pure js script anyway. For some stupid reason, getElementsByTagName isn't working. If I get it, I'll post it. – Lance Sep 04 '15 at 15:02
  • Yes. I'm sure it's something stupid that I'm missing. I'm trying to get the collection to loop through and reset all the backgrounds before setting the most recently clicked one to red. Without that, they all just stay in the "focus" color. – Lance Sep 04 '15 at 15:05
  • If you share the code i can help to maybe in a jsfiddle but i am not that good with javascript @Lance – Akshay Sep 04 '15 at 15:07
  • I got it. Thanks. Posted below. – Lance Sep 04 '15 at 15:09
  • Great @Lance you can also add a click event to body so that the background disappears when you click on the body too – Akshay Sep 04 '15 at 15:11
  • After 1 hour of google searches with directives for focus and a ton of other solutions, this helped out! Thanks! I had a combobox and an input field that worked great with focus using @ViewChild and setTimeout(() => this.inputFieldElement.nativeElement.focus(), 0), but my errorMessage did not get focus using the same approach.. adding a tabindex to my
    tag made it happen!
     – Tomas Andersen Jun 22 '18 at 12:44
  • Wow @TomasAndersen glad i could help you out :) – Akshay Jun 23 '18 at 15:18
3

Here is a javascript only 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>
Lance
  • 3,824
  • 4
  • 21
  • 29