![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
Finally updating here again...
...because I found an incredibly nifty feature of CSS that all this time I hadn't known about, that I'm working to integrate into that web-comic-interface program I was building before: Selectors. It's useful enough I'll deal with posting it here just so everyone on my friends list sees it.
Most folks know about the a:hover CSS-tag that lets you set the 'hover' style for a link, or the div.warning to let you style <div class="warning"> (which is actually a shorthand for something I'm about to show here) but I bet you didn't know about td[direction~="up"] did you? That lets you define new attributes for your elements, for example in this case making this valid: <td direction="up left"> and applying the "up" and "left" styles if you have both defined.
The fairly well-known td.card form (using the class="blah" attribute) is actually nothing more than a shorthand for td[class~="card"] actually. The ~= means that the attribute is treated as a series of space-seperated values, and matches against each one individually. If you replace it with =, as in td[direction="apples and oranges"] then the CSS-style will only apply to that explicit attribute tag, for example if you need to perform some special trickery on some combinations of your custom attributes.
A minimal example of the effect.
Most folks know about the a:hover CSS-tag that lets you set the 'hover' style for a link, or the div.warning to let you style <div class="warning"> (which is actually a shorthand for something I'm about to show here) but I bet you didn't know about td[direction~="up"] did you? That lets you define new attributes for your elements, for example in this case making this valid: <td direction="up left"> and applying the "up" and "left" styles if you have both defined.
The fairly well-known td.card form (using the class="blah" attribute) is actually nothing more than a shorthand for td[class~="card"] actually. The ~= means that the attribute is treated as a series of space-seperated values, and matches against each one individually. If you replace it with =, as in td[direction="apples and oranges"] then the CSS-style will only apply to that explicit attribute tag, for example if you need to perform some special trickery on some combinations of your custom attributes.
A minimal example of the effect.
no subject
XML Path Language (http://www.w3.org/TR/xpath)
no subject
(no subject)
(Anonymous) - 2007-01-27 23:12 (UTC) - Expandno subject
Oh cripes!
Re: Oh cripes!
Re: Oh cripes!