User-action pseudo class with a negating pseudo class - html

Question

Is it possible to place a negating pseudo class with a user-action pseudo class?
For example:
a:hover:not(href) {
color: blue;
}
// or //
a:not(href):hover {
color: blue;
}
// or //
a:not(href) {
&:hover {
color: blue:
}
}
Here, the hover state of a link would turn the color blue if it did not have a "href".
I am trying to use this with "input[type="radio"]" and change the hover state of the radio if it is not checked (:checked). I know this kind of sounds like an if else statement with CSS, and I guess that's what I am trying to slightly accomplish without having to use js.

Answer 1

This may not help (always a good start to an answer), but if you control the HTML, then there's definitely a way. I tried what you'd expect the code to be...
input[type="radio"]:not(:checked):hover {
/* styles */
}
...but that didn't work. It was flickering and rubbish.
So, the only way I could think of was to have a relatively positioned container, and then absolutely position two elements inside it, a label and the input, and then have the input styles changed when you hover on the label. Using z-index we can bring the label above the input box. Then, because of the for attribute, we can make sure that the checkbox is still checked when the label is clicked.
The style I've changed on hover is the margin-top, which will pull the radio button up.
HTML
<span>
<label for="radio1">Click me</label>
<input id="radio1" type="radio" />
</span>
<span>
<label for="radio2">Click me</label>
<input id="radio2" type="radio" checked />
</span>
CSS
span {
position: relative;
display: inline-block;
min-width: 13px;
}
label, input {
position: absolute;
top: 0;
left: 0;
display: inline-block;
margin: 0;
}
label {
z-index: 2;
text-indent: -999em;
width: 13px;
height: 13px;
}
input {
z-index: 1;
}
label:hover + input[type="radio"]:not(:checked) {
margin-top: -10px;
}
Demo
http://jsbin.com/ifArIn/3/edit