【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介

      2021/02/23   2263文字

【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合

今回は、『メニューなどで、最初の要素だけボーダー無しにしたい』みたいな時に役に立つCSSテクニックを紹介します。使うのは『擬似クラスfirst-child』。実際の適応のさせ方と、最初の見出し要素にfirst-childが効かなかった例もご紹介。さっそく確認していきましょう。

今回やりたい内容~横並びリストメニューで、最初だけボーダー無しにしたい→擬似クラスfirst-child使ってみる

実行前~横並びリストメニューの最初のボーダーが邪魔


このサイトのPCビュー・メニュー部分です。項目ごとにボーダーで区切りたかった(liにborder-left:dottedを指定)んですけど、単純にCSSに書いただけではこのようになります。一番端の部分にまでボーダーが入ってしまい、はみ出て見た目が微妙になります。なんとか最初の要素だけ『border:none;』にできないかなと思います。

コード(擬似クラスfirst-childを使ってみる)&実行結果

そこで、『擬似クラスfirst-child』を使ってみます。最初の要素という意味です。ポイントは『nav li :first-child』じゃなくて、『ul li:first-child』というところ(これは記事後半を読んでいてだくと明らかになります)。first-childのliタグには、『border-left:none;』を指定しました。


このとおり、最初の要素だけボーダーを消すことができました。

実験~見出しタグh2で、記事内最初のものだけmargin消したい

h2:first-childが効かない例~他要素がfirstと判定されている?


リストでできたので、需要があるかもな、他の要素でもやってみます。需要があるかもしれない『見出しタグの最初の要素だけ違うCSSを適応』です。例えば、見出しタグh2に、上下marginが設定されているんだけど、『最初の要素だけmarginをカットしたい』からといって、単純に『h2:first-child』と書いてみると・・・

これは適応されません。理由は、『記事内にもいろいろな要素が入っていて、h2でない他要素がfirstと判定されている(しかしCSS書いてない)』ためです。リストタグのときは『ul li:first-childと書き、ul直下にli/li/liみたいな構造だったから、サックリ効いていた』と考えられそうです。上段落のリストのときも、『navとかheader li』だとダメ、みたいな感じでした。

『singlecontentクラス』でくくって、h2がはじめに出るようにする


で、文中のh2に、first-child margin:0を適応させた方法はコレ。h2が最初になるように、記事中の文章を『div clas=”singlecontent”』でくくりました。これでh2がはじめの要素になるので、h2:first-childにCSSが適応されます。

javascriptで要素を判定してCSS出力とかしても良さそうだけど、設計の段階で『見出し最初の要素用クラス』とかを作っておいてもラクそうです。

おまけ:divでくくって、最初要素とさえ判定されれば、『h2:nth-of-type(1)』と書いてもok


divでくくって、最初の要素とさえ判定されれば、『nth-of-type』と書いても大丈夫です。(1)というのは、最初の要素という意味です。配列とかだと0が最初なのにややこしいですね(笑)

参考リンク(Mozilla・MDN Web Docs)

あとがき・まとめ

  • 横並びメニューのリスト項目・左右ボーダーなど、単純に一括指定では、最初や最後の要素で表示が微妙になるときがある
  • 管理人のケースのように、最初の要素だけボーダーを消したい場合は『擬似要素first-child』を使う
  • パラメータでn番目などを指定できる『nth-child』や、最終要素を指定できる『last-child』もある
  • 『li』しか入っていないリストタグなどはわかりやすいが、他要素のせいで判定されないこともあるので注意

まとめると、このような感じでしょうか。兄弟要素を一括で指定よりも、『最初・最後・n番目』なども使いこなせると、よりデザインの幅が広がると思いますので、今回のコラム内容および、参考リンクの内容も、ぜひチェックしてみてください。


【カテゴリ】 - CSS
【タグ】 - ,

  関連記事

【海外CSSテク・before擬似要素】リストタグのマーカーだけ色・模様を変えて、カラフル・おしゃれにする方法
【ワードプレスstingerスマホ最適化】記事一覧タイトル表示場所をPC/SPで切り替えて、スマホレイアウトで見やすくする
WordPressのアーカイブって、記事が増えると長くてたいへん!CSSで短くして使いやすくするには?
wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)
【CSS・hover/transition/rotateでアニメーション】jquery無し・アイコン画像や要素をくるっと回転させる機能を実装
CSSのみで超軽量な、クリック開閉式ボックスのつくりかた【FAQやよくある質問に・jQuery/javascript不使用】
自社サイト(wpホームページ制作請負)のプチリニューアルしました(ヒーローヘッダー風&重なるメニュー)
【スマホ対応・CSS】viewportにベンダープレフィックスがついてると、WordPressがエラー判定する件の対応
【html5 videoとcss】ヘッダーやメインビジュアル背景に動画を使ってインパクトを与える方法
WordPress CSSで色が変わらない時『functions.phpやテーマカスタマイザー』もチェック
有名サービス・企業ectで使われる印象的な色を、CSSで使えるカラーコードで覚えよう(色商標についても)
【CSS3でおしゃれなサイトに】画像(星空)をくるくる回す(キーフレーム・transform:rotateなど)