こんにちは、研究チームです。

CSSは駆使すれば割と自由に
要素をコントロールできます。

代表的な要素が「:first-child」。

このプロパティでは1行目のみ、
文字色を変更したりできます。

要は最初の「pだけ」といった
指定が可能になるプロパティ。

ワードプレスではエディターの都合で
勝手に空のPタグが挿入されたり、
予期しない部分に“空白”が発生します。

javascriptで自動挿入されたりするので
CMSによっては制御すら難しいです。

そんな時には「:first-child」が役立ちます。
例えば以下のhtmlソースがあったとして、

<div class="box">
<p>あいうえお</p>
<p>かきくけこ</p>
<p>さしすせそ</p>
</div>

あいうえおの文字色だけを
変更したい場合であれば
CSSの書き方はこちらです↓

//.box内にある最初のp要素のみ「#cccccc」にする場合
.box p:first-child {
  color:#cccccc;
}

仮に非表示なら「display:none;」。

//.box内にある最初のp要素のみ“非表示”にする場合
.box p:first-child {
  display:none;
}

すごく便利なプロパティですよね。

ただ、このプロパティには
ちょっとした落とし穴も・・・

それは、以下のようにpの直前に
別のタグが入ると無視されます。

<div class="box">
<h1>サンプル</h1>
<p>あいうえお</p>
<p>かきくけこ</p>
<p>さしすせそ</p>
</div>

ソースだけで見ると確かに“あいうえお”は
「最初のp」に該当しますが、なぜかNG。

これは単純にプロパティの“仕様”です。
そして、解決策が「:first-of-type」。

//.box内にある最初のp要素のみ「#cccccc」にする場合
.box p:first-of-type {
  color:#cccccc;
}

これでpの直前に何が入っても
影響を一切受けません。

ありがたいプロパティですよね。

一つ注意点があるとしたら、
対応ブラウザです。

:first-child
IE7〜

▼:first-of-type
IE9〜

2018年現在ではIE8のシェア率も
2%を切っているので
そこまで影響はなさそうですね。

ぜひお試しくださいませ。

カテゴリー: CSS

研究チーム

日々ABテストを繰り返しエンジニアリングとマーケティングの両立を目指すデベロッパーチーム

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です