as you can see in my code i want to unhide span when input type checked is checked, but it doesnt work. Could you please help me?

.share_div {
  width: 200px;
  height: 100px;
  left: 0.7rem;
  width: 50%;
  height: 100px;
  position: absolute;
  background-color: #aaa;
  border: 2px solid black;
  padding-inline: 10px;
  border-radius: 100vmax;
}

.share_div label {
  display: block;
  font-size: 0.85rem;
  color: black;
  margin-inline-start: 2rem;
  margin-block-start: 0.5rem;
}

#actuall_link {
  display: none;
  width: calc(100% - 5rem);
  height: 2.2rem;
}

#share_div:has(>input::checked) span {
  display: inline;
}

<div id="share_div" >
  <label for="checkbox_share">info</label>
  <input id="checkbox_share" type="checkbox">
  <span id="actuall_link">unhide when checkbox is checked</span>
</div>

CodePudding user response：

It's :checked, not ::checked. You're confusing pseduoelements with pseudoclasses.

Also, you don't even need :has() in this case because the checkbox <input> is a preceding sibling of the <span>, so you only need #share_div > input[type=checkbox]:checked ~ span { }

---

Solution 1: Using ~ (without :has()):

.share_div {
  width: 200px;
  height: 100px;
  left: 0.7rem;
  width: 50%;
  height: 100px;
  position: absolute;
  background-color: #aaa;
  border: 2px solid black;
  padding-inline: 10px;
  border-radius: 100vmax;
}

.share_div label {
  display: block;
  font-size: 0.85rem;
  color: black;
  margin-inline-start: 2rem;
  margin-block-start: 0.5rem;
}

#actuall_link {
  display: none;
  width: calc(100% - 5rem);
  height: 2.2rem;
}

#share_div > input[type=checkbox]:checked ~ span {
  display: inline;
}

<div id="share_div" >
  <label for="checkbox_share">info</label>
  <input id="checkbox_share" type="checkbox">
  <span id="actuall_link">unhide when checkbox is checked</span>
</div>

Solution 2: Using :has():

...with display: initial;

.share_div {
  width: 200px;
  height: 100px;
  left: 0.7rem;
  width: 50%;
  height: 100px;
  position: absolute;
  background-color: #aaa;
  border: 2px solid black;
  padding-inline: 10px;
  border-radius: 100vmax;
}

.share_div label {
  display: block;
  font-size: 0.85rem;
  color: black;
  margin-inline-start: 2rem;
  margin-block-start: 0.5rem;
}

#actuall_link {
  display: none;
  width: calc(100% - 5rem);
  height: 2.2rem;
}

#share_div:has( > input[type=checkbox]:checked ) > span {
  display: initial;
}

<div id="share_div" >
  <label for="checkbox_share">info</label>
  <input id="checkbox_share" type="checkbox">
  <span id="actuall_link">unhide when checkbox is checked</span>
</div>

CodePudding user response：

I would also suggest:

• Remove the overly verbose attributes id and for.
• Wrap your elements into label
• Use the Adjacent sibling combinator (or the General sibling combinator ~ if not an immediate next sibling)
• As already mentioned, it should be :checked, not a pseudo-element ::checked

label                 .msg { display: none;    }
label input:checked   .msg { display: initial; }

<label>
  info
  <input type="checkbox">
  <span >Good job!</span>
</label>