Can conditional CSS style be based on other CSS style?

Question

My checkboxes change label color when checked. It's defined in my stylesheet like this:

:checked + label {color: white;}

However, some of my checkboxes have an outline style.

outline = "1px solid"

I want these outlined checkboxes to change to the color blue instead of white.

:checked (AND CHECKBOX HAS OUTLINE) + label {color: blue;}

Is there a way to do this in my stylesheet?

PS: The outline was applied to specific checkboxes with a javascript function.

if (n !== -1) {
 document.getElementById(id).style.outline = "1px solid";}

could you add some HTML so we can see what your markup looks like? Better yet, create a create an [MCVE](http://stackoverflow.com/help/mcve) and add it to a [fiddle](http://jsfiddle.net) — blurfus, May 01 '15 at 18:08
@Ejay. Each checkbox has a unique ID and style. Some of them are styled with the above outline code. The HTML might complicate the matter as I only want to do this with the stylesheet. — user3283304, May 01 '15 at 18:12
Basically...no. CSS is based on selecting **elements** not styles — Paulie_D, May 01 '15 at 18:16

score 2 · Answer 1 · edited May 23 '17 at 11:43

Here's a fiddle http://jsfiddle.net/dmbsqzkn/1/

The only way you can use CSS to select a style property is if style was declared inline. For instance

HTML:

<input type="checkbox" style="outline: '1px solid';"></input>

CSS:

input:checked[style="outline: '1px solid';"] + label
{
  color: blue;
}

obviously inline styles are frowned upon because they can muddle your code and make adjustments to styling at a later time a pain. That's the only way you can do it with CSS. It would most likely be easier and more correct to uniform to just apply a separate class to those elements.

Please see this post Advanced CSS Selector - Select based on styling for more info.

I added the outline in a javascript function. I've edited the original post to reflect this code. I couldn't get your solution to work, but it seems like we are close. — user3283304, May 01 '15 at 18:25

score 2 · Accepted Answer · answered May 01 '15 at 18:17

2

I suggest you to move the outline style into a class selector.

.outline {
    outline: 1px solid;
}
:checked + label {
    color: red;
}
.outline:checked + label {
    color: green;
}

<input type="checkbox" class="outline"/><label>green</label>
<input type="checkbox"/><label>red</label>

answered May 01 '15 at 18:17

Stickers

75,527
23
147
186

I do not have class defined in any of my inputs. Can the above javascript be changed to apply the style change and add a class="outline"? I'm obviously new to this. – user3283304 May 01 '15 at 18:33
Got it. Just needed to add document.getElementById(id).className = "outline"; – user3283304 May 01 '15 at 18:46

Can conditional CSS style be based on other CSS style?

2 Answers2