CSS Parent Selector

Ok so I have an input field, #searchfield and it is contained within a wrapper, #seachbar. Is there a way I can select the wrapper when the input field is in focus? Or is this a job for javascript?

I would essentially like to do this but affect the #searchbar div instead of #searchfield:

#searchbar > #searchfield:focus {
	-moz-box-shadow: inset 0 5px 5px -5px #aaa;
	-webkit-box-shadow: inset 0 5px 5px -5px #aaa;
	box-shadow: inset 0 5px 7px -5px #aaa;
}

No, parent selecting is the job of JavaScript, I’m afraid. (I think there’s been a long debate over whether CSS should include this … but it won’t happen any time soon. Maybe in CSS4!)

A parent selector has been drafted in the CSS4 spec, it’s still not clear what the final syntax will be but the W3C team have acknowledged the fact it is needed and will be working closely with browser vendors to get a working draft out soon.

Thanks guys, I guess I’ll be using javascript then :slight_smile:

Cool! Now I just need them to perfect cryogenics so I’ll get a chance to use this one day. :shifty:

lol, well said sir

Sent from my iPhone using Tapatalk

We can cheat with css and achieve that effect without javascript. :slight_smile:


<!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>
fieldset { border:none }
#searchbar {
	position:relative;
	z-index:1;
	width:500px;
	margin:auto;
	border:1px solid #000;
}
#searchbar span {
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	z-index:-1;
	-moz-box-shadow: inset 0 5px 5px -5px #aaa;
	-webkit-box-shadow: inset 0 5px 5px -5px #aaa;
	box-shadow: inset 0 5px 7px -5px #aaa;
	display:none
}
#searchfield:focus + span { display:block }
</style>
</head>

<body>
<div id="searchbar">
		<form name="form1" method="post" action="">
				<fieldset>
						<legend>Search</legend>
						<label for="searchtext">Enter text</label>
						<input type="text" name="searchtext" id="searchfield">
						<span></span>
				</fieldset>
		</form>
</div>
</body>
</html>