Checking for input's state via css

Question

Pretty simple question (I think), is there a way to write a conditional statement checking for an inputs state using only css? I'm trying to write one checking if it's :checked or not.

I should have elaborated a little bit more. I'm messing around with two inputs, one is withing a sibling list to the first I'm attempting to change a property on the first input once the second has been checked. Just wondering if anyone has found a way to do this with the assumption that the answer will be "no".

<nav>
        <label for="menu-toggle" class="openMenu"><span></span></label>
        <input type="checkbox" id="menu-toggle"/>

        <ul id="main-menu">
            <li><a href=#>Home</a></li>
            <li>
                <label for="menu-toggle-2" class="openDrop">
                        <a name=Services>Services</a>
                </label>
                <input type="checkbox" id="menu-toggle-2"/>
                 <ul id="drop">
                    <li><a href=#>blah</a></li>
                    <li><a href=#>blah</a></li>
                    <li><a href=#>blah</a></li>
                </ul>
            </li>
            <li><a href=#>Portfolio</a></li>
            <li><a href=#>Clients</a></li>
            <li><a href=#>Contact</a></li>
        </ul>

</nav>

I do know how to do this with JS, just am messing around to see if it's possible in any way with just css.

You do understand that Sass code is never sent to the client, right? Whatever you're asking for has to be a feature of CSS. — cimmanon, Nov 25 '14 at 22:09
Yes i do realize that. I was trying to get what i'm doing working in just css, but couldn't. Therefore, I figured writing a conditional in sass that would then compile into css would be easier to figure out and work with. — Cody Thompson, Nov 25 '14 at 22:20
Why would that work out easier? If you don't know what CSS is necessary to get the intended results, Sass can't help you. — cimmanon, Nov 25 '14 at 22:30
I changed the title to appease you a bit more haha. I understand what you are saying, I am not new that new to sass. I just assumed that, logically, it might be easier to write using sass than css. — Cody Thompson, Nov 25 '14 at 22:45
`` elements are *void elements*, how exactly is "*one...a child of the other*"? And no: until CSS gets a parent, or subject/`:has()`, selector this won't be possible. — David says reinstate Monica, Nov 25 '14 at 22:51
You're right haha, i honestly don't know why I referred to it as that, just a rushed day i suppose. I'll post the html so you can see what i am saying. Its a child of the sibling Ul rather. That was what i figured though, that without some sort of parent selector it isn't possible. Just wanted to check before i move on as i have seen some very creative things accomplished using pure css. — Cody Thompson, Nov 25 '14 at 22:59
Also related: http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — cimmanon, Nov 25 '14 at 23:36

score 0 · Answer 1 · answered Nov 25 '14 at 22:14

SASS is just a superset of CSS, and is compiled to CSS before sent to the browser. Therefore, as CSS, it cannot do any 'conditional statements' - it's simply not a programming language but a declarative language.

Having said that, acting on 'checked' behaviour is pretty trivial. I used this HTML:

<input type="checkbox"><span></span>

With this CSS:

input + span:before {
    content:'Not Checked';
}
input:checked + span:before {
    content:'Checked!';
}

This is just generic CSS though and has nothing to do with SASS, nor can it be improved through SASS.

Checking for input's state via css

1 Answers1