WordPressでレイアウトをカスタマイズする際に使いたい「CSSで最初の要素」をコントロールする方法

CSSは書き方次第で細かくhtmlを変更できます。代表的な要素が「:first-child」です。このプロパティを使えば「１行目のみ」で指定した要素の「文字色を変更」などが実現できます。

つまり、最初の「pだけ」といった指定がCSSで行えるプロパティです。ワードプレスではエディターの都合で勝手に空のPタグが挿入されてしまったりして予期しない部分に“空白”が発生することがあります。

また、導入しているプラグインによっては「javascript」で特定のタグが自動挿入されたりするので
状況によっては要素を指定すること自体が難しかったりします。

ちなみに「:first-child」の使い方は下記です。たとえば、以下のhtmlソースがあったとして、

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

最初の一行にある「あいうえお」の文字色だけを変更したい場合は下記のCSSでOKです。

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

もし「あいうえお」のみの非表示にしたいなら「display:none;」を指定するので以下です。

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

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

ただ、このプロパティにはちょっとした落とし穴があります。それは、以下のように「pタグ」の直前に
別のタグが入ってしまうと「CSSの仕様」で『最初のタグと認識ができず無視』されてしまいます。

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

でも、ソースだけで見ると確かに「あいうえお」は「最初のp」に該当しますが指定ができません。実はCSSでこういったプロパティ側の仕様は意外と多いです。解決策する書き方が「:first-of-type」です。

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

上記のように書けば「pの直前に何が入っても」影響は一切受けません。たとえば下記のように最初のpの前に複数の別タグが入ってもしっかりと指定が可能です。ありがたいプロパティですよね。

<div class="box">
<h1>見出し１</h1>
<h2>見出し２</h2>
<h3>見出し３</h3>
<p>あいうえお</p>
<p>かきくけこ</p>
<p>さしすせそ</p>
</div>

あえて１つだけ注意点を言うとしたら「対応ブラウザ」です。前者の指定方法がIE7以降、後者の指定方法はIE9以降で有効です。ただ、2020年現在の国内利用ブラウザランキングトップ１０位にIE8はもう入っていないので今後は「:first-of-type」で書いてまったく問題ありません。

▼:first-child
IE7〜

▼:first-of-type
IE9〜

最初の要素を指定したかった方はぜひお試しくださいませ。