What does CSS selector "input+select" mean?

**wow** · 05-29-2012, 02:52 PM

Hi there,

What do the selector "input+select" and "input+input" mean in the following css code? What is + sign here for?

Code:

input+select, input+input {
   margin-left: 20px;
}

Check the following code, what's fit in the selector or what is the portion of the html selected by the code? Thanks,

Code:

<!DOCTYPE html>
<html>
<head>
	<title>Car Picker</title>
	<link rel="stylesheet" href="script06.css">
	<script src="script10.js"></script>	
</head>
<body>
<h2 class="centered">Car Picker</h2>
<form action="someAction.cgi">
	<p><label for="emailAddr">Email Address:
		<input id="emailAddr" type="text" size="30" class="reqd email">
	</label></p>
	<p><label for="color">Colors:
		<select id="color" class="reqd">
			<option value="" selected>Choose a color</option>
			<option value="Red">Red</option>
			<option value="Green">Green</option>
			<option value="Blue">Blue</option>
		</select>
	</label></p>
	<p>Options:
		<label for="sunroof"><input type="checkbox" id="sunroof" value="Yes">Sunroof (Two door only)</label>
		<label for="pWindows"><input type="checkbox" id="pWindows" value="Yes">Power Windows</label>
	</p>
	<p><label for="DoorCt">Doors:&nbsp;&nbsp;
		<input type="radio" id="twoDoor" name="DoorCt" value="twoDoor" class="radio">Two
		<input type="radio" id="fourDoor" name="DoorCt" value="fourDoor" class="radio">Four
	</label></p>
	<p><label for="zip">Enter your Zip code or pick the dealer nearest you:<br>
		Zip: <input id="zip" type="text" size="5" maxlength="5" class="isZip dealerList">
		<select id="dealerList" size="4" class="zip">
			<option value="California--Lemon Grove">California--Lemon Grove</option>
			<option value="California--Lomita">California--Lomita</option>
			<option value="California--Long Beach">California--Long Beach</option>
			<option value="California--Los Alamitos">California--Los Alamitos</option>
			<option value="California--Los Angeles">California--Los Angeles</option>
		</select>
	</label></p>
	<p><input type="submit" value="Submit">&nbsp;<input type="reset"></p>
</form>
</body>
</html>

**danielshill** · 05-30-2012, 10:18 AM

the + symbol is used for when two elements appear next to each other, for example the following would add a margin-top to every paragraph apart from the first one

p + p { margin-top: 10px;}

**wow** · 05-31-2012, 10:55 AM

Thanks, daniel, let's see if I understood your statement. For selector input+select, is the following met? Because between <input ..> and <select ...>, there are other text: "</label></p><p><label for="color">Colors: ".

Code:

	<p><label for="emailAddr">Email Address:
		<input id="emailAddr" type="text" size="30" class="reqd email">
	</label></p>
	<p><label for="color">Colors:
		<select id="color" class="reqd">
			<option value="" selected>Choose a color</option>
			<option value="Red">Red</option>
			<option value="Green">Green</option>
			<option value="Blue">Blue</option>
		</select>

**danielshill** · 06-01-2012, 02:24 AM

I don't think so. I'll set up something in fsFiddle.

Also, I don't understand why paragraph tags are used there - if it is to separate lines then DIVs would be more appropriate I feel.