Question 244180 in CSS Question posted in
Some basic documentation can be found here.

Css – Arbitrary-length adjacent sibling combinator

Is it possible to simplify the following selection chain, so it matches an arbitrary-length succession of unchecked inputs followed by a #id1?

#parent > input:not(:checked) + input:not(:checked) + input:not(:checked) + #id1 { background-color: red; }

Is there anything like a regex wildcard statement (maybe something like [input:not(:checked) + ]*) in CSS?

#parent {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

#child {
  width: 50%;
  height: 50%;
  background-color: green;
}

label {
  border: 1px solid black;
}

#one:checked~#child {
  background-color: yellow;
}

#two:checked~#child {
  background-color: pink;
}

#three:checked~#child {
  background-color: purple;
}

input:not(:checked)+input:not(:checked)+input:not(:checked)+#child {
  background-color: gray;
}
<div id="parent">
  <input type="radio" name="unique" id="one" value="1" hidden>
  <input type="radio" name="unique" id="two" value="2" hidden>
  <input type="radio" name="unique" id="three" value="3" hidden>
  <div id="child">
    <label for="one">one</label>
    <label for="two">two</label>
    <label for="three">three</label>
  </div>
</div>

Minimal example: https://codepen.io/anick_/pen/dywNzrb

Tags:

2

Answers


  1. 0

    You could consider a selector that selects when no preceding sibling elements are checked:

    #child:not(input:checked ~ *)

    #parent {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

#child {
  width: 50%;
  height: 50%;
  background-color: green;
}

label {
  border: 1px solid black;
}

#one:checked~#child {
  background-color: yellow;
}

#two:checked~#child {
  background-color: pink;
}

#three:checked~#child {
  background-color: purple;
}

#child:not(input:checked ~ *) {
  background-color: gray;
}
    <div id="parent">
  <input type="radio" name="unique" id="one" value="1" hidden>
  <input type="radio" name="unique" id="two" value="2" hidden>
  <input type="radio" name="unique" id="three" value="3" hidden>
  <div id="child">
    <label for="one">one</label>
    <label for="two">two</label>
    <label for="three">three</label>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Set default #child { background-color: gray; } and then change it depending on the checked <radio>:

    #parent {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

#child {
  width: 50%;
  height: 50%;
  background-color: green;
}

label {
  border: 1px solid black;
}

#one:checked~#child {
  background-color: yellow;
}

#two:checked~#child {
  background-color: pink;
}

#three:checked~#child {
  background-color: purple;
}

#child {
  background-color: gray;
}
    <div id="parent">
  <input type="radio" name="unique" id="one" value="1" hidden>
  <input type="radio" name="unique" id="two" value="2" hidden>
  <input type="radio" name="unique" id="three" value="3" hidden>
  <div id="child">
    <label for="one">one</label>
    <label for="two">two</label>
    <label for="three">three</label>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search