Changing custom CSS attributes without Javascript?

Question

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>

`Now, is there a way to edit the HTML attribute inside the CSS?` No. — kei, Nov 15 '13 at 19:58

MattDiamant · Answer 1 · 2013-11-15T21:00:26.417

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.

You can also add a click toggle state via `:focus` provided you add a `tabindex` attribute in the HTML: http://jsfiddle.net/shshaw/ENZQU/4/ — shshaw, Nov 15 '13 at 22:18

Paladini · Answer 2 · 2013-11-15T20:30:52.050

4

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.

enter image description here

CSS 3 is amazing, how we can know if in near future CSS don't will have something like that?

The question is:

You really can't use JavaScript in your page? This is the only way you can change your HTML code, CSS just style the HTML.

You can be sure about that in the W3C, the people who "develop the web".

edited Nov 15 '13 at 20:30

answered Nov 15 '13 at 20:02

Paladini

4,522
15
53
96

Thanks for your answer.. I know CSS is only for styling. But people have done some amazing things with pure CSS, including dropdown menus and tabbed documents. The `hover` pseudo-class is amazing, but sadly there is no way to change states on mouse click. – Jacob Bridges Nov 15 '13 at 20:07
Yet @Jacob-IT, CSS 3, as you said, is really amazing. I can't wait for CSS 4. Just to know what the creativity and CSS 3 can do, see this link: http://www.muktware.com/2013/11/developer-creates-simpsons-entirely-css/15784 – Paladini Nov 15 '13 at 20:13
Edited the answer, hope this can help you more. – Paladini Nov 15 '13 at 20:20

Changing custom CSS attributes without Javascript?

2 Answers2

The question is:

Linked