こんにちは、@codeship_techです。
任意のHTML要素に対して、皆さんどのように要素名やクラス名を指定していますか？
今回は、HTML＆CSSの初心者むけの質疑応答です。
使用頻度の高い、親要素 ＞ 子要素の形について解説です！
CSSセレクタ “>” の意味は何ですか？
セレクタとセレクタの間に “>” を記述することで、指定の親要素内の一階層下の子要素にstyleが適用されます。
CSS.container > span {
color: white;
}
例えば、上記のように記述すると「containerクラスの一階層下のspan」の直下である文字色が白になります。
もうひとつの例を見て、より知識を深めましょう。
HTML
<div class=“container”>
<span>AAA</span> // ①
<span>BBB</span> // ②
<div>
<span>CCC</span> // ③
</div>
</div>CSS
.container > span {
background-color: blue;
}
上記のように記述すると、①と②は背景色が青になりますが③は変換しません。
このように、セレクタとセレクタの間に “>” を指定することによって、指定の親要素内の一階層下の子要素にstyleが適用されます。
授業日記についてのご意見
CodeShipの授業について「こんな事が知りたい・紹介して」というご意見・ご提案がありましたら、CodeShip公式Twitterアカウント(【CodeShip】プログラミングスクール)までDMまたはリプライにてお寄せください。
