What I Want From CSS3 - Part 2 | January 22, 2006
CSS allows you to move down through the document tree and select elements based on their ancestry. So you can style one element that is a descendant of another element. For more control you can use the child selector to style the direct children of particular element, rather than all of its descendants. The child selector is usually used in situations where you know the parent and want to style the children.
<div id="parent">This is the parent
<div>This is the child (I want to style this)
<div>This is the grandchild</div>
</div>
</div>
#parent>div {...}
The problem is, I often find myself in the reverse situation, where I know the child and want to style its parent.
<div>This is the parent (I want to style this)
<div id="child">This is the child
<div>This is the grandchild</div>
</div>
</div>
Currently the only way you can do that is to identify the parent by using a class or id name.
<div id="parent">This is the parent (I want to style this)
<div>This is the child
<div>This is the grandchild</div>
</div>
</div>
#parent {...}
However this means adding extra mark-up to your documents and forms a bit of a code dependancy, where removing the child necessitates removing the identifier on the parent. This can be done programatically, but is less than ideal.
What I really want is a parent selector. That way, you could simply do this:
div<#child {...}
It’s a little more difficult to read as it doesn’t follow the current expectation that the right most selector refers to the element being styled. However it wouldn’t have an adverse effect on the cascade and could come in extremely handy in certain situations.
Posted at January 22, 2006 11:33 AM
Dave said on January 22, 2006 6:04 PM
Wow, I never thougt about this sort of function. Thinking about it now though, I’d probably use it quite a lot.