Shaun Inman proposes CSS Qualified Selectors
Shaun Inman did a very interesting post yesterday on what he describes as “CSS Qualified Selectors”. The idea is nice, he wants to be able to do:
a {
text-decoration: none;
color: #A10;
border-bottom: 1px dashed #A10;
}
And then for images:
a < img { border: none; }
So if <img> has a parent <a>, the border isn’t there.
What’s most interesting about the post though is the comments. It seems, as Eric Meyer states there, that this kind of selector has been discussed quite a few times on the CSS mailing list, and isn’t doable. Dave Hyatt, one of the core WebKit developers, comments with a good explanation of why it can’t be done. It’s a nice read, and a good insight into the difficulties of developing a new standard.
I’ve seen the “parent selector” requested on just about every open forum for CSS3 features. It may not be possible to do right now, but I foresee it happening sooner or later.
I understand the reason given by browser makers for not wanting to implement this, but it does seem strange that we can perform similar functions in XPath & JavaScript without locking the browsers up. I still think it ought to be considered as a standard, however, even if current browser engines aren’t capable of supporting it.
@Peter, the JavaScript examples are just not functioning in dynamic contexts (where you have to re-evaluate when anything changes in the document) or on particularly large sample sets. Browser makers could certainly implement a non-dynamic parent selector that would probably not be too terrible, but then people would just start filing bugs that it did not work dynamically (as they did with the sibling selector).
[...] Shaun Inman proposes CSS Qualified Selectors [...]
I’d like to see two things in CSS.
1. CSS attribute selectors to apply to the full DOM, and updated in real time.
For example:
#article {max-height: 490px;}
#article+a {display: none;}
#article[height=490px]+a {display: block;}
where you have a div containing some content, followed by a “read more” link. The article is clipped to 490px high, and if it reaches its max height, then the css then makes the “read more” link appear.
There are infinite useful applications to this, including form styling. Being able to style a checkbox (or more importantly, proceeding elements) - based on the real time checked state of the checkbox would be great!
input[type=checkbox][checked]+fieldset {display: block;}
2. CSS groups. I have to repeat the same selector over and over too many times. I’d like to be able to use braces much like @media selectors, but for regular selectors.
#article {
a {color: red;}
p {margin: 20px 20px 0 20px}
/* and so on… */
}
[...] Read a bit about “CSS Qualified Selectors” and why they’re a pain in the butt (via CSS3 . Info). [...]
I’m not sure if its qualified or not, but I would like to be able to do sth like that:
#baka > a > img:hover {
#aho > p { display: none; }
#baka > span { color: red; }
}
Basically sth like
if(statement) then statement
I guess that this might look like suggestion in the post + comment from Kroc Camen, but I would prefer to do a bit more complex stuff with this idea.