CSS3 selector for next matching sibling
Question
I am trying to come up with a CSS3 selector for the below HTML:
<input data-type="fillpart" type="checkbox" name="cough, " checked="true">
<ignore></ignore>
<fillpart explicitlyset="true" name="cough, ">cough, </fillpart>
...
<input data-type="fillpart" type="checkbox" name=“fever, " checked="true">
<ignore></ignore>
<fillpart explicitlyset="true" name=“fever, ">fever, </fillpart>
...
<input data-type="fillpart" type="checkbox" name=“flu, " checked="true">
<ignore></ignore>
<fillpart explicitlyset="true" name=“flu, ">flue, </fillpart>
All of the elements are siblings, and there might be additional elements where ... are. The elements in question are always in a sequence of three (3). Currently, I have CSS as below:
fillpart {
background: #a5d2a5;
}
It colors the text inside <fillpart> , while the tag itself is obviously ignored, since it is not something that browsers support. I want to alternate the background value depending on whether previous tag matches input[checked='true'] or false .
Is this possible with CSS3?
Thank you
2 answers
solution1
1 ACCPTED 2017-11-13 08:36:54
To style elements after a checked input-field, you can use the CSS next-selector (+):
fillpart {
background-color: #a5d2a5;
}
input:checked + ignore + fillpart {
background-color: red;
}
this will make the fillpart after the ignore , after the checked input-field have a red background-color
EDIT:
Actually, you can use the ~ -selector, which selects every fillpart element that are preceded by a checked input-field:
fillpart {
background-color: #a5d2a5;
}
input:checked ~ fillpart {
background-color: red;
}
solution2
1 2017-11-13 08:37:54
You can use plus sign (+) in your selector:
input[checked="false"] + ignore + fillpart
view my example below:
fillpart {background: #a5d2a5;} input[checked="false"] +ignore+ fillpart{background: red;}
<!DOCTYPE html> <html> <body> <input data-type="fillpart" type="checkbox" name="cough, " checked="true"> <ignore></ignore> <fillpart explicitlyset="true" name="cough, ">cough, </fillpart> ... <input data-type="fillpart" type="checkbox" name=“fever, " checked="false"> <ignore></ignore> <fillpart explicitlyset="true" name=“fever, ">fever, </fillpart> ... <input data-type="fillpart" type="checkbox" name=“flu, " checked="true"> <ignore></ignore> <fillpart explicitlyset="true" name=“flu, ">flue, </fillpart> </body> </html>
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.