CSS селекторы: комбинаторы

Эта форма была создана с использованием следующего фрагмента HTML:

 <form method="GET" action="/processor">
<h1>Buy Tickets to the Web Developer Gala</h1>
<p>Tickets are $10 each. Dinner packages are an extra $5. All fields are required.</p>
<fieldset>
	<legend>Tickets and Add-ons</legend>

	<p>
		<label for="quantity">Number of Tickets</label> 
		<span class="help">Limit 8</span>
		<input type="number" value="1" name="quantity" id="quantity" step="1" min="1" max="8">
</p>

	<p>
		<label for="quantity">Dinner Packages</label> 
		<span class="help">Serves 2</span>
		<input type="number" value="1" name="quantity" id="quantity" step="1" min="1" max="8">
	</p>

</fieldset>
<fieldset>
	<legend>Payment</legend>
	<p>
		<label for="ccn">Credit card number</label>
		<span class="help">No spaces or dashes, please.</span>
		<input type="text" id="ccn" name="ccn" placeholder="372000000000008" maxlength="16" size="16">
	</p>
	<p>
		<label for="expiration">Expiration date</label>
		<span class="help"><abbr title="Two-digit month">MM</abbr>/<abbr title="Four-digit Year">MM</abbr>YYYY</span>
		<input type="text" id="expiration" name="expiration" placeholder="01/2018" maxlength="7" size="7">
	</p>

</fieldset>
<fieldset>
	<legend>Billing Address</legend>
	<p>
		<label for="name">Name</label>
		<input type="text" id="name" name="name" placeholder="ex: John Q. Public" size="40"> 
	</p>
	<p>
		<label for="street_address">Street Address</label>
		<input type="text" id="name" name="name" placeholder="ex: 12345 Main Street, Apt 23" size="40">
	</p>

	<p>
		<label for="city">City</label>
		<input type="text" id="city" name="city" placeholder="ex: Anytown">
	</p>

	<p>
		<label for="state">State</label>
		<input type="text" id="state" name="state" placeholder="CA" maxlength="2" pattern="[A-W]{2}" size="2">
	</p>

	<p>
		<label for="zip">ZIP</label>
		<input type="text" id="zip" name="zip" placeholder="12345" maxlength="5" pattern="0-9{5}" size="5">
	</p>
</fieldset>

<button type="submit">Buy Tickets!</button>
</form>

Потомок Комбинатор

Вы, наверное, довольно хорошо знакомы с потомком комбинатора. Это было вокруг с первых дней CSS (хотя это было без имени типа до CSS2.1). Это широко используется и широко поддерживается.

Комбинатор-потомок — это просто пробельный символ. Он отделяет родительский селектор от его потомка, следуя шаблону AB , где B — это элемент, содержащийся в A. Давайте добавим немного CSS в нашу разметку сверху и посмотрим, как это работает:

 form h1 {
color: #009;
}

Мы только что изменили цвет заголовка нашей формы, результат которого можно увидеть ниже.

Давайте добавим еще немного CSS, на этот раз, чтобы увеличить размер нашего сообщения о ценах («Билеты по 10 долларов США каждый»):

 form p {
font-size: 22px;
}

Однако есть проблема с этим селектором, как вы можете видеть ниже. Мы фактически увеличили размер текста во всех абзацах нашей формы, а это не то, что нам нужно. Как мы можем это исправить? Давайте попробуем детский комбинатор.

Детский комбинатор

В отличие от комбинатора-потомка дочерний комбинатор (>) выбирает только непосредственные дочерние элементы элемента. Он следует шаблону A> B , сопоставляя любой элемент B, где A является непосредственным предком.

Если бы элементы были людьми, по аналогии, дочерний комбинатор соответствовал бы дочернему элементу материнского элемента. Но потомок комбинатор также будет соответствовать ее внукам и правнукам. Давайте изменим наш предыдущий селектор, чтобы использовать дочерний комбинатор:

 form > p {
font-size: 22px;
}

Теперь это касается только прямых потомков article

 label + input {
display: block;
clear: both;
}

 * + fieldset {
margin: 5em 0;
}

 <p>
<label for="quantity">Number of Tickets</label> 
<span class="help">Limit 8</span>
<input type="number" value="1" name="quantity" id="quantity" step="1" min="1" max="8">
</p>

 label ~ input {
display: block;
}