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 >

    <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" >Tag1</button>
        <button id="Tag2" >Tag2</button>
        <button id="Tag3" >Tag3</button>
    </div>

    </div>

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

#projectsDiv {
    border: 1px solid black;
}

CodePudding user response：

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")
  })
})

#projectsDiv p.lastClicked {
    background-color: red;
}

#projectsDiv {
    border: 1px solid black;
}

<div >

    <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" >Tag1</button>
        <button id="Tag2" >Tag2</button>
        <button id="Tag3" >Tag3</button>
    </div>

    </div>

CodePudding user response：

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 >

  <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" >Tag1</button>
    <button id="Tag2" >Tag2</button>
    <button id="Tag3" >Tag3</button>
  </div>

</div>