CSS Wish List
Feeds
<< August | September | October >>
Saturday, 13th September 2008
This is a quick one really!
What I'd really like are some inverse selectors in CSS, which would allow me to select a parent element where a child element matches my criteria.
Existing child selectors include these three handy chaps (information from W3C):
E > F - Matches any F element that is a child of an element E.
E + F - Matches any F element immediately preceded by an element E.
I reckon it would be incredibly useful to perform the following selections:
E < F - Matches any F element that is a parent of an element E.
E - F - Matches any F element immediately followed by an element E.
My real life example is the following...
It's considered best-practice by many people to avoid using underlines for hyperlinks. They cut across hanging letters such as g, q and p (g, q and p), which makes them less readable. The alternative is to use a border along the bottom, which appears below the hanging letters.
To achieve this, you simply set the following CSS:
border-bottom: 1px solid blue;
This works great - until you have a hyperlinked image. Typically, you wouldn't want the border to appear on the image. You've set it against the text to make it more readable, but it has no use on the image. Using the CSS inverted selector you could set the following rule:
img < a { border-bottom: none; }
And the border would only appear for the text. Job done!