Apply style to element only if it has child nodes?

HTML & CSS
1

Is it possible with CSS2 or CSS3 to apply styling to an element on condition of it having child nodes?

For example, in the first example below, I want to apply styling to the parent li element (li.current-menu-item:hover{border-radius:6px 6px 0 0}) However, on the second example, I do not.

<ul><li id="menu-item-17" class="current-menu-item current_page_item "><a href="about/">About Me</a>
<ul class="sub-menu">
	<li id="menu-item-18" class=""><a href="contact/">Contact Me</a></li>
	<li id="menu-item-20" class=""><a href="privacy-policy/">Privacy Policy</a></li>
</ul></li></ul>

Do not apply li:hover on this element since it does not have child nodes:

<ul><li id="menu-item-17" class="current-menu-item current_page_item "><a href="about/">About Me</a></li></ul>
2

Unfortunately no :(. There was talk about a ::contain pseudo class but it never had any substanance to it. Currently there is no way to do what you want. CSS doesn’t have parent selectors and you can’t do stuff to the parent, while checking the children.

Sorry.

3

Hi Scott,

Strictly speaking as Ryan said above the parent selector is not yet available in CSS (although they are proposing it for css3 in some sort of shape). However in limited situations you can mimic the effect although it is rather inflexible.

If you refer to a previous css quiz you will see that we managed to add drop down arrows to the parent element automatically if there was a child sub list present. It was a bit of a cheat but worked by addressing the sub list itself so if it wasn’t present then no styles were applied. The sublist was targeted and then the arrow was absolutely place width pseudo content back into the parent element to give the parent selector effect.

In your example we could do a similar thing:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul {
	margin:0;
	padding:0;
	list-style:none;
}
li {
	position:relative;
	line-height:1.5em;
	float:left;
	margin:0 10px;
	padding:0 10px
}
li ul:after {
	content:" ";
	display:block;
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:1.5em;
	background:#fcf;
	border-radius:6px 6px 0 0;
	z-index:-1;
}
li ul { clear:left; }
li li { float:none; }
</style>
</head>

<body>
<ul>
		<li id="menu-item-17" class="current-menu-item current_page_item "><a href="about/">About Me</a>
				<ul class="sub-menu">
						<li id="menu-item-18" class=""><a href="contact/">Contact Me</a></li>
						<li id="menu-item-20" class=""><a href="privacy-policy/">Privacy Policy</a></li>
				</ul>
		</li>
		<li id="menu-item-17" class="current-menu-item current_page_item "><a href="about/">About Me</a></li>
</ul>
</body>
</html>

It is however not that flexible and things have to be pretty straight forward for it to be of any use. However for things like automatic drowdown arrows it can be a perfect choice.

4

Great example Paul! I had forgotten where I had seen the “cheat” example so I was hesitant to even mention it. Great work.

5