CSSスキル - 第8章 Lesson8

直後に隣接している要素にスタイルを適応させる方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

直後に隣接している要素にスタイルを適応させる方法について解説しています。
上級者向けのセレクタになりますので、セレクタの基礎がわかっている方が対象の動画です。



この動画で学べること

・直後に隣接している要素にスタイルをかける方法



直後に隣接している要素にスタイルをかける方法

セレクタに「要素+要素」を書くと、直後に隣接している要素にCSSをかけることができます。
例えば、h1+pと書けば、<h1>タグの直後の<p>タグに対してCSSをかけるという風になります。
では、練習ファイルを使って実際にみてみましょう。
練習ファイルでは、<h1>タグの中に<p>タグが2つあります。
まずは、どちらの<p>タグにも文字の大きさを指定しましょう。



 p {
font-size: 30px;
}



これはもう皆さんお分かりですね。
<p>タグの文字サイズが30pxになりました。
では次に、<h1>タグの直後の<p>タグだけを30pxにしたいと思います。
このときに「要素+要素」の書き方をします。



h1 + p {
font-size: 30px;
}



保存してブラウザで見てみましょう。
<h1>タグに隣接した<p>タグにだけ、30pxの文字サイズを指定することができました。
この隣接セレクタは、直後にCSSをかけるタグが同じ階層になければ上手くいかないので、注意しましょう。