Changing custom CSS attributes without Javascript?

问题

So I am doing some wiki editing, and sadly Javascript is not enabled. Therefore, I need help from the CSS guru's out there!

I understand you can add a custom HTML attribute like this:

<span id="some-id" custom_attr="no"></span>

And you can style elements with custom_attr like this:

span[custom_attrib] { /* styling here */ }

Now, is there a way to edit the HTML attribute inside the CSS?

Example (which does not work of course..):

<!------------- CSS ------------>
<style>
  .some-class {
    /* Original code here */
  }
  .some-class[custom_attr = "yes"] {
    /* Change code here */
  }

  #some-id:hover ~ .some-class[custom_attr = "no"] {
    custom_attr : "yes";
  }
</style>

<!------------- HTML ------------>
<html>
...
<span id="some-id">...</span>
<span class="some-class" custom_attr="no">...</span>
...
</html>

回答1:

Of course you can edit the HTML with CSS!

From your example code, it looks like you want to change the "No" to "Yes" when the user hovers on it. Here's how:

http://jsfiddle.net/ENZQU/

<a default="YES" mouseover="NO"></a>

a {
    font-size: 3em;
}
a:after {
    content: attr(default);
}
a:hover:after {
    content: attr(mouseover);    
}

Did you want it on click instead? Easy!

http://jsfiddle.net/ENZQU/1/

<input id="cbox" type="checkbox">
<label for="cbox"></label>

#cbox {
    display: none;
}
label {
    font-size: 3em;
}
label:after {
    content: "YES"
}
#cbox:checked + label:after {
    content: "NO"
}

I strongly suggest that you find another way to do this, though. The wiki doesn't want you to dynamically change things on the page, and it's probably built that way for a reason.

回答2:

Unfortunately, you can't change your HTML code with CSS, you just can do that with JavaScript.

Andy Davies proposed that feature to CSS in her personal blog. I think this is a really interesting proposal. You can see and join the discussion created by Andy Davies here.