The expanses of WolfWings' land
scratched on the wall for all to see


January 27th, 2007
January 27th, 2007
January 27th, 2007
January 27th, 2007
January 27th, 2007

[User Picture]03:58 am - 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.7 commentsLeave a comment
?

Log in

No account? Create an account