How do I have focus effect on normal elements?

Question

I am using CSS grid to display some tabular data as shown in example

https://codepen.io/shyamforflex/pen/qBrLQeq

On row selection , the selected row should have a background color.

In current example the background red color is disappearing on mouse click release

&-row:active {
    background-color: red;
  }

Answer 1

:focus can work for what you want to achieve only if the element is an focusable element such as anchor link or inputs. Please refer to the MDN for more information.

Solution There is a way to add focusability to normal elements. Set tabindex to each row so that the elements become focusable.

Set tabindex to .grid-table-row

  each episode in episodes
    .grid-table-row(tabindex="0")

Replace &-row:active with below

&-row:focus {
    background-color: red;
}

However, this method should only be used for web accessbility, which means only the interactive elements should be focusable.

Answer 2

You could use a radio button hack. Add a hidden radio button to each row. Change your "cells" to label associated with the radio button then use type=[radio]:checked ~ label to apply the styling. While the HTML is perfectly valid, the use of input here is semantically questionable at best.

From your pen you would want something like

PUG

 each episode in episodes
    .grid-table-row
      input(type="radio" name="tbl" id=episode.series +"|"+episode.no)
      label.grid-table-cell(data-title="Title" for=episode.series +"|"+episode.no)= episode.title
      label.grid-table-cell(data-title="Number" for=episode.series +"|"+episode.no)= episode.no
      label.grid-table-cell(data-title="Series" for=episode.series +"|"+episode.no)=episode.series
      label.grid-table-cell(data-title="Air Date" for=episode.series +"|"+episode.no)= episode.airdate

SCSS

.grid-table {
  display: grid;

  /*Additional code removed for brevity*/

  input[type=radio] {display:none}
 
  input:checked ~ label {
    background-color: red;
  }
}

Compiled Demo:

h1 {
  text-align: center;
}

input[type=radio] {
  display: none;
}

.grid-table {
  display: grid;
}

.grid-table-row {
  display: grid;
  grid-template-columns: repeat(2, 2fr) repeat(2, 1fr);
  border-bottom: 1px solid #ddd;
}

.grid-table-row:first-child {
  background: rgba(0, 0, 0, 0.5);
  font-weight: bold;
}

.grid-table-row:hover {
  background-color: yellow;
  cursor: pointer;
}

.grid-table input:checked~label {
  background-color: red;
}

.grid-table-row:nth-child(even) {
  background-color: #e5e4e2;
}

.grid-table-cell {
  padding: 1rem;
}

.grid-table-cell:not(:last-child) {
  border-right: 1px solid #ddd;
}

<h1>Random Dr Who Tabular Data With CSS Grid</h1>
<div class="grid-table">
  <div class="grid-table-row">
    <div class="grid-table-cell">Title</div>
    <div class="grid-table-cell">Episode Number</div>
    <div class="grid-table-cell">Series</div>
    <div class="grid-table-cell">Air Date</div>
  </div>
  <div class="grid-table-row">
    <input type="radio" name="tbl" id="7|239" />
    <label class="grid-table-cell" data-title="Title" for="7|239">The Name of the Doctor</label>
    <label class="grid-table-cell" data-title="Number" for="7|239">239</label>
    <label class="grid-table-cell" data-title="Series" for="7|239">7</label>
    <label class="grid-table-cell" data-title="Air Date" for="7|239">05/18/2013</label>
  </div>
  <div class="grid-table-row">
    <input type="radio" name="tbl" id="Special|1" />
    <label class="grid-table-cell" data-title="Title" for="Special|1">The Day of the Doctor</label>
    <label class="grid-table-cell" data-title="Number" for="Special|1">1</label>
    <label class="grid-table-cell" data-title="Series" for="Special|1">Special</label>
    <label class="grid-table-cell" data-title="Air Date" for="Special|1">11/23/2013</label>
  </div>
  <div class="grid-table-row">
    <input type="radio" name="tbl" id="Special|2" />
    <label class="grid-table-cell" data-title="Title" for="Special|2">The Time of the Doctor</label>
    <label class="grid-table-cell" data-title="Number" for="Special|2">2</label>
    <label class="grid-table-cell" data-title="Series" for="Special|2">Special</label>
    <label class="grid-table-cell" data-title="Air Date" for="Special|2">11/25/2013</label>
  </div>
  <div class="grid-table-row">
    <input type="radio" name="tbl" id="Special|3" />
    <label class="grid-table-cell" data-title="Title" for="Special|3">The Salary of the Doctor</label>
    <label class="grid-table-cell" data-title="Number" for="Special|3">3</label>
    <label class="grid-table-cell" data-title="Series" for="Special|3">Special</label>
    <label class="grid-table-cell" data-title="Air Date" for="Special|3">6/25/2015</label>
  </div>
</div>