Css : Focus On An Element To Display Another Previously Hidden Element

I am trying to make this work on pure CSS, I know how to do it in Jquery, but I really want(if possible) to do this in CSS. I have spans with classes going from 'mens1' to 9. And I

Solution 1:

Here's something easier. You can target the beginning or a portion of a class name, instead of infinitely applying permutations.

.mens1:focus ~ div[class^='mention']{
    display:none;
}

Solution 2:

Look this solution)

li {
  position: relative;
  list-style-type: none;
  margin-bottom: 10px;
}
.checkbox {
  position: absolute;
  opacity: 0;
}
.span {
  width: 100px;
  height: 20px;
  background: red;
  cursor: pointer;
}

.div {
  width: 100px;
  height: 40px;
  background: blue;
  display: none;
}

.checkbox:checked + .div {
  display: block;
}

.span:focus + div {
  display: block;
}

<ul><li><labelclass="label"><divclass="span"></div><inputtype="radio"name="1"class="checkbox" /><divclass="div"></div></label></li><li><labelclass="label"><divclass="span"></div><inputtype="radio"name="1"class="checkbox" /><divclass="div"></div></label></li><li><labelclass="label"><divclass="span"></div><inputtype="radio"name="1"class="checkbox" /><divclass="div"></div></label></li><li><labelclass="label"><divclass="span"></div><inputtype="radio"name="1"class="checkbox" /><divclass="div"></div></label></li><li><labelclass="label"><divclass="span"></div><inputtype="radio"name="1"class="checkbox" /><divclass="div"></div></label></li><li><labelclass="label"><divclass="span"></div><inputtype="radio"name="1"class="checkbox" /><divclass="div"></div></label></li></ul>

li {
  position: relative;
  list-style-type: none;
  margin-bottom: 10px;
}
.checkbox {
  position: absolute;
  opacity: 0;
}
.span {
  width: 100px;
  height: 20px;
  background: red;
  cursor: pointer;
}

.div {
  width: 100px;
  height: 40px;
  background: blue;
  display: none;
}

.checkbox:checked + .div {
  display: block;
}

.span:focus + div {
  display: block;
}

Solution 3:

You can't reach the .mentions element without placing them inside a single .mens element using pseudo classes. Please display your HTML to clarify.