Prevent child elements of the div from loosing focus after clicking outside the div

user_18747595 0
Viewed 51

I made a simple "website" that behaves like this:

  1. Clicked paragraph receives focus and changes background color to red.
  2. When user clicked one of the paragraphs (it received focus and changed color to red) and then user clicks other paragraph, the "old" paragraph looses focus and red color and passes it to the "new" clicked paragraph.
  3. When user clicked one of the paragraphs (it received focus and changed color to red) and then user clicks the background (projectsDiv) or any other element of the website the paragraph looses focus and red color.

I want the website to behave like this:

  1. Same as above
  2. Same as above
  3. When user clicked one of the paragraphs (it received focus and changed color to red) and then user clicks the background (projectsDiv) the paragraph looses focus and red color. Clicking any other element of the website doesn't affect focus of the paragraphs inside projectsDiv.

Here is a code:

<div class="container">

    <div id="projectsDiv">
        <p tabindex="0">P1</p>
        <p tabindex="0">P2</p>
        <p tabindex="0">P3</p>
    </div>

    <div id="tagsDiv">
        <button id="Tag1" class="Tag">Tag1</button>
        <button id="Tag2" class="Tag">Tag2</button>
        <button id="Tag3" class="Tag">Tag3</button>
    </div>

    </div>

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

#projectsDiv {
    border: 1px solid black;
}
css html javascript
2 Answers

You probably need JavaScript. Just use classes to keep track of which element got clicked last.

document.querySelectorAll("#projectsDiv, p").forEach(element=>{
  element.addEventListener("click", event=>{
    if (document.querySelector(".lastClicked")) {
      document.querySelector(".lastClicked").classList.remove("lastClicked")
    }
    event.target.classList.add("lastClicked")
    event.stopPropagation()
  })
})
#projectsDiv p.lastClicked {
    background-color: red;
}

#projectsDiv {
    border: 1px solid black;
}
<div class="container">

    <div id="projectsDiv">
        <p tabindex="0">P1</p>
        <p tabindex="0">P2</p>
        <p tabindex="0">P3</p>
    </div>

    <div id="tagsDiv">
        <button id="Tag1" class="Tag">Tag1</button>
        <button id="Tag2" class="Tag">Tag2</button>
        <button id="Tag3" class="Tag">Tag3</button>
    </div>

    </div>

user_166347380

If you're not comfortable with Javascript you can use check-box and labels.

input[name="_radio"]{
  display: none;
}

#projectsDiv input:checked+p {
    background-color: red;
}

#projectsDiv {
    border: 1px solid black;
}
<div class="container">

  <div id="projectsDiv">
    <label>
      <input type="radio" name="_radio">
      <p tabindex="0">P1</p>
    </label>
    <label>
      <input type="radio" name="_radio">
      <p tabindex="0">P2</p>
    </label>
    <label>
      <input type="radio" name="_radio">
      <p tabindex="0">P3</p>
    </label>
  </div>

  <div id="tagsDiv">
    <button id="Tag1" class="Tag">Tag1</button>
    <button id="Tag2" class="Tag">Tag2</button>
    <button id="Tag3" class="Tag">Tag3</button>
  </div>

</div>

user_32674870
Related