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

HTML/CSS

今回はCSSの「:first-○○」のプロパティを使って最初のテキストもしくは要素のみにスタイルを適応させる方法と使い方について紹介します。

今回紹介する「:first-○○」を使えば下記の様に、同じタグ(クラス)内に入った初めの1行もしくは要素のみにスタイルを適応させる事が出来ます。

見本①

塊の最初のテキストのみ緑色に変更。さらに最初の塊のみ青に。
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

塊の最初のテキストのみ緑色に変更。さらに最初の塊のみ青に。
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

塊の最初のテキストのみ緑色に変更。さらに最初の塊のみ青に。
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

HTMLとCSSの記述は下記。

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;
}

本来はタグやクラスをしっかりと付けてスタイルを振り分ければ良いのだが、今回の「:first-○○」は基本的に装飾的な意味合いが大きいのです。WEBデザインを作成する際にメリハリの付け方などで重宝する技術なので覚えておきましょう。

:firstで最初の要素のみのスタイルを変える方法

:first」は擬似クラスと言われるものです。セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。「:first」は言葉通り主に「初めの」といった意味合いです。

「:first」自体は「@page」の@規則で使用される印刷文書の最初のページを表します。通常WEB制作で「:first」は使うことは滅多に無いかと思います。
今回紹介するのは「:first-line」「:first-child」などWEB制作で良く使われる擬似クラスです。

「:first-line」は最初の1行を示す擬似クラスです。「:first-child」は最初の要素を示す擬似クラスです。

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

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行にのみスタイルが適応されます。

  • リストの始め
  • リスト2つ目
  • リスト3つ目

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タグに対してスタイルを付けています。

下記の表は「:first-〇〇」の擬似クラスの中で良く使われているものです。

:first-letter最初の1文字のみ
:first-line最初の1行のみ
:first-child兄弟要素のグループの中で最初の要素
:first-of-type兄弟要素のグループの中でその種類の最初の要素

以上が「【CSS】:first-○○で最初の要素のみスタイルを変える方法」でした。

WEB制作の実際の現場では、コーディングよりデザインの方が重視されます。ただ今回の擬似クラスを使って単純に装飾を付けるだけで満足してくれるお客様が多いので「:first-○○」は結構頻繁に使うことになります。

HTML/CSSCSS,WEB

Posted by KT