CSSスキル - 第7章 Lesson7

特定の親要素の子要素にだけ、スタイルを適応させる方法

   

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

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

特定の親要素の子要素にだけスタイルを適応させる「子孫コンビネータ」の書き方について、初心者向けに解説しています。



この動画で学べること

・子孫コンビネータの使い方



子孫コンビネータの使い方

子孫コンビネータをいうセレクタの記述方法を見てみましょう。
子孫コンビネータというのは、特定の親要素の子供、また孫要素にスタイルをかけるというものです。
この方法は、例えば<li>などに使います。
ではその書き方を見ていきましょう。



まずは<li>タグに文字を赤くするという命令文を書いてみます。



 li {
color: red;
}



保存してブラウザで見てみましょう。
もう皆さんお分かりのとおり、<li>タグの文字がすべて赤色になりました。
では、次に子孫コンビネータを使ってリストそれぞれの色を変更していきましょう。
HTMLファイルの<ul>タグにid名「red」を追加し、CSSもそれに応じてid名を書きます。



ul#red li {
color: red;
}



保存してブラウザで見てみましょう。
id名redをつけた<ul>の中の<li>だけ、文字が赤くなりました。
このように、同じCSSをかけたいから全てのタグにclass名をつけるのではなく、親要素を指定してCSSをかけると、楽にコーディングをすることができます。