【CSS】擬似クラス first-childとlast-child

ある要素がほかの要素のはじめの子要素になっている場合に、装飾対象にしてスタイルを適用します。

例えば、リストの最初の項目だけとか、最初の段落だけにスタイル指定する場合などに使用します。

:first-child

要素名:first-child { プロパティ名 : 値 ; }

 #sample{margin-bottom:2.5em;}
 #sample ul{}
 #sample ul li{
	border: 1px solid #666;
	margin-bottom: 2px;
	line-height:1.5em;}
 
#sampling ul li:first-child {
	border-radius: 2px;
	padding-top: 6px;
	background-color:#F98B00;
	color:#F8F8F8;}

#sampling ul li:last-child {
	border-radius: 2px;
	padding-top: 6px;
	background-color:#F99;}

first-line疑似要素はウインドウサイズに変更があった場合は、1行目の横幅が変化すれば、それに合わせて適用範囲が変わります。

それによって自動的に、「装飾されている1行目」も変わります。

:last-child

要素名:last-child { プロパティ名 : 値 ; }

.sentence{
	line-height:1.5em;
	margin-bottom:2.5em;}
 p:first-child {
	font-style: italic;
	background-color:#9A9595;}
 p:last-child {
	color:#F15301;
    font-size: 0.8em;
    font-style: italic;
}

HTML

<div class="sentence">
  <p>We used to ... overestimate.</p> 
  <p>The conscious ... brainpower.</p>
  <p>They didn't ...  clothes.</p>
</div>

We used to think that you could pay attention to five to nine things at a time," he added. "We now know that's not true. That's a crazy overestimate.

The conscious mind can attend to about three things at once. Trying to juggle any more than that, and you're going to lose some brainpower."

They didn't want to waste valuable energy making inconsequential decisions about their clothes.

:first-child / :last-child

<li>要素nの最初に出てくるセレクタに適用させます。:nth-child(1)と同様です。

  li:first-child{
    border-radius:3px;
    box-shadow:inset 0 2px 45px #ffbc07;
    }
  li:last-child{
    border-radius:3px;
    box-shadow:inset 0 2px 45px #fd0303;}