I am not well versed in CSS. I can get around. I can make a site look pretty good in Safari and horrible in Internet Explorer (look at this site in IE for a great example). But I’m a hacker at best. I fiddle with CSS until something looks right, I don’t follow conventions or standards, I don’t know what a box-model hack actually does, and I can’t even begin to tell you how to write browser specific CSS styles.
If you are a like me then Shaun Inman’s proposal for CSS Selectors will probably leave you with a furled brow.
Rather then being left standing in the dark I tried to wrap my head around what Shaun was trying to accomplish with his proposal. I didn’t get. But I wanted to. So I setup a quick example page that illustrated my question. I then hopped, skipped, and jumped over the Shaun’s Web site, and asked what I was missing. Shaun, kindly and succinctly, replied.
The non-CSS guru explanation of the CSS Selector proposal
I can’t be sure that any of you reading this are in the same boat as I was. In fact, I’m sitting here thinking at all of you are smarter than I am when it comes to these things, and that you’re not even reading this right now. But if you are, and you’d like to understand this debate a little further, here is as simple an explanation as I can give.
A style can not be attributed to a parent element when a specific child element is present.
I don’t even know if I worded that correctly. I’m pretty sure I didn’t. So here is the long-winded version. In Shaun’s first example he shows that an image, that is wrapped with a link, would have the same style as a normal link. The problem is that, currently, CSS can not determine the differences between a normal link and a link that has an image within it. It just isn’t "smart" enough. That is, without the help of something that runs after the DOM has loaded fully like the awe-inspiring John Resig’s jQuery plugin.
Here is a quick explanation of what John Resig’s JavaScript is doing. Once the page loads, jQuery parses through the entire HTML document, determines which links "has images" (see documentation here) and then you may run specific JavaScript functions on those links specifically. You could, for example, add classes to those links dynamically with jQuery, rather than mucking up your code with classes inline.
Shaun’s proposal is to help make CSS, and browsers, "smart" enough to determine when styles should be attributed to links and when not to be attributed to links that contain images. This was only his first example, Shaun gives others.
I really hope I did an okay job explaining this for those of you that, like me, didn’t understand it before pounding my head against my desk.
Addendum
Shaun has hit me back with a succinct definition that correctly uses the lingo.
"CSS allows you to style elements based on their parent/ancestor elements but it does not allow you to style a parent element based on the presence of a descendant element."
You can look backwards, but you can’t look forwards. Thanks Shaun!
