css3 hasChild or hasChildren i wish

There are a lot of great selectors available in css3 which to be honest I’m still wrapping my head around but there’s something I’d really like to see and that is a kind of hasChild type selection. A method for selecting a parent based on the type of children contained within. To my knowledge there is currently no way to do this without using JavaScript. If you are not sure what I mean consider the following example.

<ul>
    	<li><a href="#">Design</a></li>
    	<li><a href="#">Php</a></li>
    	<li><a href="#">Css</a></li>
    	<li><a href="#">Programming</a>
    		<ul>
    			<li><a href="#">Css</a></li>
    			<li><a href="#">Html</a></li>
    			<li><a href="#">Actionscript</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Contact</a></li>
</ul>

navigation Take the above html which is a basic navigation, for the purpose of this example i would like to style the top level list item that has the the second level of navigation within it. It is possible to style this individual list item in other ways but I’d like to see something for selecting this based on its children perhaps something like the :not pseudo selector, how about a :has selector or :hasChild selector? I imagine it working something like this.

ul li:has(ul li) {
    	border:1px solid #ff0000;
}

navigation This would be a great addition to the pseudo selectors and would allow for some interesting ways of selecting parent elements. Unfortunately for the time being javascript is the best way of achieving this. If you are interested in achieving this kind of functionality you may want to read up on the jquery .has() function.

Comments

  • avatar-lav-hjemmeside
    # Lav Hjemmeside

    This would be a very useful edition, allowing much cleaner html with less serverside scripting. Right now we build css-classes into the server side scripts to achieve this kind of design, but as you say it could easily be done using CSS.

    Great idea!

Comments are currently closed