知っておくと便利なcssの小技 part16 (セレクタの使い方編)

  • このエントリーをはてなブックマークに追加

今回は知っておくと便利なcssの小技 part16 セレクタの使い方編です。

バックナンバー


子セレクタ(親要素 > 子要素)の使い方

img01
子セレクタとは、対象の親要素の直下にある子要素に対してのみスタイルを適用するセレクタです。
孫要素は対象になりません。

今回は親要素の直下の子要素に対してのみ、文字を赤色にしてみます。

DEMO

HTML


CSS




隣接セレクタ(要素1 + 要素2)の使い方

img02
隣接セレクタでは、隣り合う要素の直後のもの(今回でいう『要素2』)の方にのみスタイルを適用することができます。
同じ階層にあっても指定した要素に隣接していなければスタイルは適用されません。

DEMO

HTML


CSS




工藤

執筆者: 工藤

日々勉強中です。どうぞよろしくお願いします。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ