react not allowing two css : focus selectors on one jsx element-CodePudding

i have a react script with a particular element that i would like to have more than one :focus-within selector for in css, however for some reason when i focus on the element only one of the focus selecctors are expressed the dropdown one, this is the code react js:

return (
    <div>
      <div className="blind"></div>
      <div className="menufocus" tabIndex={0}>
        <div className="menuicon">
          <FontAwesomeIcon icon={solid("bars")} />
        </div>
        <div className="dropdown">
          <div className="dropitem">HOME</div>
          <div className="dropitem">ABOUT</div>
          <div className="dropitem">NEWS</div>
          <div className="dropitem">ICONHOLDERS</div>
        </div>
      </div>
    </div>
  );

css:

  display: flex;
  align-items: flex-end;
  width: fit-content;
  height: fit-content;
  max-height: 1vh;
  transition: max-height 1s;
  overflow: hidden;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-end;
  justify-content: flex-start;
  color: white;
}

.blind {
  z-index: 1001;
  opacity: 0.7;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: black;
  display: none;
  transition: all 1s;
}
.menufocus {
  z-index: 1002;
  position: absolute;
  top: 0px;
  right: 0px;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-end;
  align-items: flex-end;
  width: fit-content;
  height: fit-content;
}

.menufocus:focus-within .dropdown {
  max-height: 18vh;
}
.menufocus:focus-within .blind {
  display: block;
}

thanks!

CodePudding user response：

Due to the official documentation:

The :focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)

To sum up, .menufocus node is looking ONLY for its children to be focused, and your .blind is a signing to it. Just make it to be a child of the .menufocus.

CodePudding user response：

ok im back, the menu closed then when you focus on the burger(the 3 bars) the result should look like this with the blur being evident in the background