Change children color div when click parent div | CSS Pseudo
Question
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:active{background-color:red;height:100%;left:0;position:absolute;top:0;width:5px}
How when we choose BUTTON 2, the
_sideButtonturns red, and always becomes red.When selecting BUTTON 1, BUTTON 1
_sideButtonturns red, then BUTTON2_sideButtonbecomes default (white).
*Here === JSFiddle ===
Thx Before -/-
/*** Here guys ***/ ._sideButton{background-color:white;height:100%;left:0;position:absolute;top:0;width:5px} ._sideButton:active{background-color:red;height:100%;left:0;position:absolute;top:0;width:5px} ._tabFolder{background-color:rgba(29, 33, 41, 1); cursor:pointer;position:relative;} ._tabFolder:hover{background-color:rgba(255,255,255,0.1)} ._tabFolder:active{background-color:rgba(29, 33, 41, 1)} ._itemPosition{align-items:center;display:flex} ._5bme ._sideFolder{background-color:#066cd2} ._iconText:hover ._1i5y,.uiPopover.selected ._1i5y{display:block} ._iconText{align-items:center;display:flex;justify-content:space-between;width:100%;margin-left:13px;}
<body style="background:grey;"> <div class="_tabFolder _itemPosition" role="presentation" style="height: 40px; user-select: none;"> <div class="_sideButton"></div> <div class="_iconText" style="width: 215px"> <span style="color:white;">BUTTON 1</span> </div> </div> <div class="_tabFolder _itemPosition" role="presentation" style="height: 40px; user-select: none;"> <div class="_sideButton"></div> <div class="_iconText" style="width: 215px"> <span style="color:white;">BUTTON 2</span> </div> </div> </body>
1 answers
solution1
1 ACCPTED 2017-11-11 03:41:30
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 (ie radio button) and "younger: sibling (ie 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
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'> </b> <b id='T2'> </b> <b id='T3'> </b>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.