from Hacker News

Content Based CSS

by clintjhill on 5/9/12, 2:02 PM with 24 comments

• by Domenic_S on 5/9/12, 5:22 PM

  Wait, what am I missing?

  <p><span class="fast">Red text</span></p>

  with

  p span.fast { color: red; }

  will work just fine.

  Edit: oh, I get it. You want the entire <p> tag to be red when the span starts part way through. Why not put a class on the <p>? It seems crazy counterintuitive to select elements backwards like that.

• by talmand on 5/9/12, 2:45 PM

  This is a sorely missed feature but there's already discussion to support this within CSS. The idea seems to be around having an identifier within the selectors to mark which one is actually getting its properties changed. Something like this:

  $p span.fast { color: red; }

  In this case the parent is styled because it contains span.fast and the $ is the identifier .

  http://davidwalsh.name/css4-preview

  I've never understood what amounts to an incredibly useful feature was never considered before.

• by iambot on 5/9/12, 5:00 PM

  I'm struggling to figure out how this works. All of the functionality reminds me of SASS/LESS pre-processors - is it essentially doing what the LESS framework does and (post) processing the CSS on the client side, or is it doing something more magical than that?

  Also: the "fork me on github" and repository links are all not working / broken. FYI

• by SimonSapin on 5/9/12, 4:24 PM

  Very nice. But does it react dynamically when I update the DOM?

  One of the reason we do not have the subject selector or :has() yet is that it is very hard to implement efficiently for dynamic updates. In the general case with :has(), you have to check the whole document for every DOM change.

• by gcb on 5/9/12, 5:18 PM

  Fix: content based Javascripted css