How to focus z-index: 2 element and not z-index: 1-CodePudding

I'm trying to draw a piano with CSS and JavaScript. Here is my code :

.container {
    border: 3px solid black;
    background-color: black;
    border-radius: 10px;
    margin: 60px auto;
    width: 100% !important;
}

.mix {
    height: 60px;
    background-color: rgb(29, 29, 29);
}

.tile {
    z-index: 1;
    border: 1px solid black;
    background-color: white;
    width: 45px;
    height: 240px;
}
.tile:active {
    background-color: rgba(255, 255, 255, 0.8);
}

.black-key {
    z-index: 2;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    width: 25px;
    height: 160px;
    background-color: black;
    transform: translateX(-50%);
}
.black-key:active {
    background-color: rgb(39, 39, 39);
}

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./index.js"></script>
    <link rel="stylesheet" href="./index.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Piano App</title>
</head>
<body>
    <div >
        <div ></div>
        <div >
            <div ></div>
            <div >
                <div ></div>
            </div>            
            <div ></div>
            <div >
                <div ></div>
            </div>
            <div >
                <div ></div>
            </div>
            <div ></div>
            <div >
                <div ></div>
            </div>
            <div >
                <div ></div>
            </div>
            <div ></div>
            <div >
                <div ></div>
            </div>
        </div>
    </div>
</body>
</html>

My question is : When I click on a black key, I want it to change color (see CSS), but the problem is it focuses the with key too. So, the white key change color too.

I want only the black key to change color when I click on it.

Any idea where is my mistake ?

CodePudding user response：

If it's too much work to separate .black-key from .tile (IDK never used Tailwind), you can change the .black-keys into <a> so they actually are focusable and then use :focus-within on .tiles. :focus-within is the only CSS property to affect a parent tag via it's child. Basically, if a child of a tag with :focus-within triggers a "focus" event then it's styles can change. Unfortunately, the only tags that all browsers consider focusable are <input>, <textarea>, <select>, and <a>.

This may look semantically off but it's a piano not a form, or article (I'm talking to the semantics cops out there).

HTML

Change:

<div class='black-key'></div>

To:

<a href='#' class='black-key'></a>

CSS

Add:

.tile:focus-within {
  background-color: rgba(255, 255, 255, 1);
}

.black-key {
  display: block;
/*...*/

When .black-key gains focus, .tile will just keep it's opacity/alpha (in retrospect opacity: 1 should work as well).

Add to index.js or a <script> tag located before the closing </body> tag (the bottom of <body> not under <body>):

document.querySelectorAll('.black-key').forEach(a => a.onclick = e => e.preventDefault());

That keeps any .black-keys from jumping when clicked -- it shouldn't affect anything else. Here's some corrections to CSS:

Removed z-index since it will only work for non-static tags:
- position:
  - relative;,
  - absolute;,
  - fixed;, or
  - sticky;
Removed !important. Unless you know exactly what you are doing not only in the present but also in the future always avoid using !important. Changed width: 100% !important to min-width: 100%.

document.querySelectorAll('.black-key').forEach(a => a.onclick = e => e.preventDefault());

.container {
  border: 3px solid black;
  background-color: black;
  border-radius: 10px;
  margin: 60px auto;
  min-width: 100%;
}

.mix {
  height: 60px;
  background-color: rgb(29, 29, 29);
}

.tile {
  border: 1px solid black;
  background-color: white;
  width: 45px;
  height: 240px;
}

.tile:active {
  background-color: rgba(255, 255, 255, 0.8);
}

.tile:focus-within {
  background-color: rgba(255, 255, 255, 1);
}

.black-key {
  display: block;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  width: 25px;
  height: 160px;
  background-color: black;
  transform: translateX(-50%);
}

.black-key:active {
  background-color: rgb(39, 39, 39);
}

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="./index.css">

  <title>Piano App</title>
</head>

<body>
  <div >
    <div ></div>
    <div >
      <div ></div>
      <div >
        <a href='#' ></a>
      </div>
      <div ></div>
      <div >
        <a href='#' ></a>
      </div>
      <div >
        <a href='#' ></a>
      </div>
      <div ></div>
      <div >
        <a href='#' ></a>
      </div>
      <div >
        <a href='#' ></a>
      </div>
      <div ></div>
      <div >
        <a href='#' ></a>
      </div>
    </div>
  </div>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="./index.js"></script>
</body>

</html>