How to remove :target pseudo-class from the entire page with HTML/CSS only?

I have an assignment where I have a list of items on a menu placed at the left of the screen. When a menu item is clicked on, they're supposed to move outside the menu by using CSS/HTML only.

I was able to accomplish that using a combination of the :target pseudo-class and the href tag. But then I realized I couldn't go back to the original menu, as a menu item is always targeted and kept outside the menu.

At first, I thought to click again in the targeted div would remove the pseudo-class but obviously, it did nothing.

I believe the best way to return the menu to its original formation is to un-target the current item without clicking on another.

Here is the HTML:

<a class="card" id="card1" href="#card1">
  <div class="avatar"></div>
  <div class="info">
    <p>Leah Shapiro</p>
    <p>[email protected]</p>
  </div>
</a>

<a class="card" id="card2" href="#card2">
  <div class="avatar"></div>
  <div class="info">
    <p>Rob Been</p>
    <p>[email protected]</p>
  </div>
</a>

<a class="card" id="card3" href="#card3">
  <div class="avatar"></div>
  <div class="info">
    <p>Peter Hayes</p>
    <p>[email protected]</p>
  </div>
</a>

And the CSS:

.list {
  height: 100%;
  width: 200px;
  background: #dddddd;
  float: left;
}

.list .card {
  border: solid;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
}

:target {
  z-index: 1000;
  background-color: red;
  position: absolute;
  left: 300px;
  top: 200px;
}

https://codepen.io/maydanachi/pen/QXPYvy

I found many JS snippets I could use, but the requirements explicitly state that I use CSS/HTML only.

Solution

Just use :focus instead of :target

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  position: relative;
}

.screen {
  height: 100%;
  width: calc(100% - 200px);
  background-color: tomato;
  float: right;
}

.list {
  height: 100%;
  width: 200px;
  background: #dddddd;
  float: left;
}

.list .card {
  border: solid;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
}

.list a {
  text-decoration: none;
}

:focus {
  z-index: 1000;
  background-color: red;
  position: absolute;
  left: 300px;
  top: 200px;
}

.list .card:hover {
  cursor: pointer;
  background-color: rgba(143, 143, 143, 0.8);
}

.list .card:active {
  background-color: teal;
}

.list .avatar {
  height: 48px;
  width: 48px;
  border-radius: 50%;
  background-color: #ccc;
  user-select: none;
}

.list .info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  user-select: none;
}

.list .info p {
  margin: 0;
  padding-left: 5px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="./style.css" />
</head>

<body>
  <div class="list">

    <a class="card" id="card1" href="#card1">
      <div class="avatar"></div>
      <div class="info">
        <p>Leah Shapiro</p>
        <p>[email protected]</p>
      </div>
    </a>

    <a class="card" id="card2" href="#card2">
      <div class="avatar"></div>
      <div class="info">
        <p>Rob Been</p>
        <p>[email protected]</p>
      </div>
    </a>

    <a class="card" id="card3" href="#card3">
      <div class="avatar"></div>
      <div class="info">
        <p>Peter Hayes</p>
        <p>[email protected]</p>
      </div>
    </a>

    <a class="card" id="card4" href="#card4">
      <div class="avatar"></div>
      <div class="info">
        <p>Dave Catching</p>
        <p>[email protected]</p>
      </div>
    </a>

    <a class="card" id="card5" href="#card5">
      <div class="avatar"></div>
      <div class="info">
        <p>Josh Homme</p>
        <p>[email protected]</p>
      </div>
    </a>

  </div>
  <div class="screen"></div>

</body>

</html>