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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

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

つまり、最初の「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>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<p>あいうえお</p>
<p>かきくけこ</p>
<p>さしすせそ</p>
</div>

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

:first-child
IE7〜

▼:first-of-type
IE9〜

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

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録されているプラグインだけでは機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグイン無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する