: First-child selector

: First-child selector

p:first-childSelected elements meet two requirements:

• It is the first child
• This happens to be a child element p

---

Let's look at a case:

p:first-child {
	color: red;
}
li:first-child {
	color: blue;
}

<div>
	<p>These are the necessary steps:</p>
	<ul>
		<li>Intert Key</li>
		<li>Turn key <strong>clockwise</strong></li>
		<li>Push accelerator</li>
	</ul>
	<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>

analysis:

• The first rule is "the first and p is a child element of the element" of an element set to red color
• The second rule is that the "first and li element is a child element" is an element to set the color to blue

Results are as follows:

These are the necessary steps:

• Intert Key
• Turn key clockwise
• Push accelerator

Do not push the brake at the same time as the accelerator.

Note: If the HTML code into the following case, the p element is no longer a first child, and the first child are not p, so the results will change.

<div>
	<ul>These are the necessary steps:</ul>
	<ul>
		<li>Intert Key</li>
		<li>Turn key <strong>clockwise</strong></li>
		<li>Push accelerator</li>
	</ul>
	<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>

These are the necessary steps:

• Intert Key
• Turn key clockwise
• Push accelerator

Do not push the brake at the same time as the accelerator.