【CSS】:first-○○で最初の要素のみスタイルを変える方法

HTML

<div class="sample01">
<div>
<p class="sample02">塊の最初のテキストのみ緑色に変更。さらに最初の塊のみ青に。<br>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
<div>
<p class="sample02">塊の最初のテキストのみ緑色に変更。さらに最初の塊のみ青に。<br>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
<div>
<p class="sample02">塊の最初のテキストのみ緑色に変更。さらに最初の塊のみ青に。<br>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
</div>

CSS

.sample01 {
 border: solid 1px #333;
 padding: 0 7px 0 10px;
 margin: 0 10px 10px;
}
.sample01 div {
 border-top: 2px dotted #ddd;
}
.sample01 div:first-child {
 background-color: #dcf5f2;
 border:none;
}
.sample02 {
 padding: 0px 6px 0px 9px;
}
.sample02::first-line {
 font-size:20px;
 font-weight:bold;
 color:#32cd32;
}

HTML

<p class="ft">ここのテキストのみ緑色に変更。<br>このように同じクラス名がついたpタグに囲まれていても2行目以降のテキストの色が変わっていない事がわかるかと思います。</p>

CSS

.ft::first-line {
 font-size:20px;
 font-weight:bold;
 color:#32cd32;
}

ftクラスのついたpタグに対して初めの1行を緑にする指定です。初めの1行は端末の自動計算でも、brで強制的に改行させても必ず最初の1行にのみスタイルが適応されます。

HTML

<ul class="foul">
  <li>リストの始め</li>
  <li>リスト2つ目</li>
  <li>リスト3つ目</li>
</ul>

CSS

.foul li:first-child {
  color: red;
  font-weight: bold;
}

foulクラスが付いた始めのliタグに対してスタイルを付けています。