Change Children Color Div When Click Parent Div | CSS Pseudo

April 28, 2023 Post a Comment

I dont know much about css. I have _sideButton with default color white ._sideButton{background-color:white;height:100%;left:0;position:absolute;top:0;width:5px} ._sideButton:acti

Solution 1:

For CSS you can hide <input type='checkbox' or 'radio'> and use <label for='ID OF RADIO/CHECKBOX'></label>. The label would act as the button while the chx/rad would be placed before the label and would keep the label's "state" persistent (ex. change to red and stay red indefinitely.) The state would be determined by whether the rad/.chx was :checked.

Example

.radio:checked + .label { color:red }

A .radio button is :checked and right after it + is a .label that text turns red. The + is an adjacent sibling combinator and you may so this as well: ~ general sibling combinator.

You can also use the :target selector. Take an <a>nchor tag assign its href attribute the value of in element's #id. Then assign the element a :target selector. Similar to the rad/chx & label combo, it allows us to use CSS to change an elements style dynamically and keep it persistent.

Although the demo shows an "older" sibling (i.e. radio button) and "younger: sibling (i.e. label) relationship, this demo can easily work in a parent child relationship as well (hint: remove +). Note there's no required relationship that needs to be between an <a> and element:target (other than that they both have to be on the same document.

References

Checkbox/Radio Button & Label Hack

:target selector.

Modified OP: https://jsfiddle.net/zer00ne/764k6qo0/

Demo

/* Radio Buttons & Labels */


/* :checked & for='ID OF RADIO' */

.rad {
  display: none
}

.lab {
  border-radius: 9px;
  border: 2px inset grey;
  padding: 3px 5px;
  font-size: 24px;
  cursor: pointer;
  margin: 20px 10px;
}

.lab::before {
  content: 'WHITE';
}

.rad:checked+.lab {
  background: red;
  color: white;
}

.rad:checked+.lab::before {
  content: '\a0\a0RED\a0\a0';
}


/* Anchor & Any Element */


/* href='#ID OF ELEMENT' &  #ANY:target */

a {
  display: inline-block;
  margin: 0 5px;
  color: yellow;
  background: #000;
  padding: 2px 4px;
}

a:first-of-type {
  color: #ff4c4c
}

a:nth-of-type {
  color: yellow
}

a:last-of-type {
  color: lime
}

b {
  display: block;
  height: 48px;
  width: 48px;
  border-radius: 50%;
  margin: 5px auto;
  border: 3px outset grey;
  background: rgba(0, 0, 0, .2)
}

#T1:target {
  background: red;
}

#T2:target {
  background: yellow
}

#T3:target {
  background: green
}

<input id='R1' class='rad' name='rad' type='radio'>
<label id='L1' class='lab' for='R1'></label>

<input id='R2' class='rad' name='rad' type='radio'>
<label id='L2' class='lab' for='R2'></label>

<input id='R3' class='rad' name='rad' type='radio'>
<label id='L3' class='lab' for='R3'></label>

<hr>

<a href='#T1' target='_self'>STOP</a>
<a href='#T2' target='_self'>SLOW</a>
<a href='#T3' target='_self'>GO</a>


<b id='T1'>&nbsp;</b>
<b id='T2'>&nbsp;</b>
<b id='T3'>&nbsp;</b>

Html5 Pros