今回のポイント
これまで様々なセレクタについて解説してきました。
今回は特殊なセレクタについて解説していきます。
今回の主な内容はこちらです。
- A > B 子セレクタの指定
- A + B 隣接セレクタの指定
- A ~ B 要素の後ろにある同じ階層のセレクタの指定
実はこちら、以前の記事で解説できなかった一部となります。
以前の記事については以下を参照下さい。
記事の準備
それではいつものように、記事を準備しました。
これもいつものように使い回しの記事です（汗）。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h1>CSSを学ぶ。シリーズ</h1>
<p>CSSを使うには３つの方法があります。</p>
<h2>stye属性を使ってCSSを書く</h2>
<p>これまで学んだ<a href=”#”>HTML</a>のスキルを応用して記述する方法になります。</p>
<h2>header内にCSSを書く</h2>
<p>この方法は<a href=”#”>header要素</a>内にCSSを記述していく方法になります。</p>
<h2>外部にCSSファイルを作成してCSSを書く</h2>
<p>この方法は外部に<a href=”#”>CSSファイル</a>を作成してCSSを記述する方法になります。</p>
</body>
</html>
そしてこちらも、いつものようにブラウザで確認しておきましょう。
そして今回のCSSもいつも同様に、外部のCSSファイルを活用して記述していきますので、CSSファイルの準備も忘れないようにしておいて下さい。
外部のCSSファイルの作り方については以前の記事を参考にして下さいね。
それでは、それぞれの『特殊なセレクタ』について解説していきますね。
親要素と子要素
今回準備したHTMLを確認して欲しいのですが、今回は以下のような記述があります。
<p>これまで学んだ<a href=”#”>HTML</a>のスキルを応用して記述する方法になります。</p>
この太字で記述した部分について、今回は少し覚えておいて欲しいことがあります。
p要素の中にa要素がありますよね。
この関係性で、以下のように表現することが多々あります。
p要素はa要素の親になる。
a要素はp要素の子になる。
更に、今回のHTMLでは『body要素からa要素は孫』になります。
A > B 子セレクタの指定
それではCSSについて解説していきます。
まずは『子セレクタの指定』です。
以下のように、CSSを記述してみて下さい。
p > a {
color: red;
}
これは
p要素の子であるa要素内の文字を赤に指定する。
という指定方法です。
それでは、ブラウザで確認してみましょう。
いかがでしょうか。
p要素の子にあたる、a要素内の文字が全て赤色になったことが分かりますね。
このように親要素と小要素の関係を知ることで、効率よくHTMLに装飾を与えることが出来ます。
A + B 隣接セレクタの指定
今度は隣接するセレクタに対して指定する方法について解説します。
先程のCSSの内容はすべて削除して、以下のようにCSSを記述してみます。
h2 + p {
color: red;
}
これは
h2要素に隣接するp要素内の文字を赤色に指定する
という指定方法です。
それでは、ブラウザで確認してみましょう。
いかがでしょうか。
h2要素に隣接するp要素内の文字が全て赤色になったことが確認できると思います。
『A > B 子セレクタの指定』の符号を変えるだけで、装飾する場所が変わることが分かります。
A ~ B 要素の後ろにある同じ階層のセレクタの指定
今度は『要素の後ろにある同じ階層のセレクタの指定する方法』について解説します。
先程のCSSの内容はすべて削除して、以下のようにCSSを記述してみます。
h2 ~ p {
color: red;
}
これはh2要素の子にあたるp要素とその兄弟に対して文字を赤色に指定する方法です。
まずはブラウザで確認してみましょう。
あれ？『A + B 隣接セレクタの指定』と変わっていないじゃないか！と叱られそうですね。
心配は入りません。
HTMLに、ひと文付け加えてみましょう。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h1>CSSを学ぶ。シリーズ</h1>
<p>CSSを使うには３つの方法があります。</p>
<h2>stye属性を使ってCSSを書く</h2>
<p>これまで学んだ<a href=”#”>HTML</a>のスキルを応用して記述する方法になります。</p>
<h2>header内にCSSを書く</h2>
<p>この方法は<a href=”#”>header要素</a>内にCSSを記述していく方法になります。</p>
<h2>外部にCSSファイルを作成してCSSを書く</h2>
<p>この方法は外部に<a href=”#”>CSSファイル</a>を作成してCSSを記述する方法になります。</p>
<p>この記事は、ぱくぱくが書きました。</p>
</body>
</html>
実はこの加えた文章
<p>この記事は、ぱくぱくが書きました。</p>
は
<p>この方法は外部に<a href=”#”>CSSファイル</a>を作成してCSSを記述する方法になります。</p>
の文章に対して、兄弟にあたります。
それではブラウザで確認してみましょう。
h2要素の子にあたるp要素とその兄弟に対して文字を赤色に指定することが出来ていますね。
本当に『A + B 隣接セレクタの指定』と違うのか検証してみましょう。
では先程のCSSの符号を『~』から『+ 』に変えてみましょう。
h2 + p {
color: red;
}
それでは答え合わせです。
ブラウザで確認してみましょう。
いかがでしょうか。
『この記事はぱくぱくが書きました』は黒文字に戻りました。
ちゃんと『隣接するセレクタに対して指定』になっていますね。
このように符号を変化させるだけで、CSSでは多様な装飾を与えることができるようになります。
いろいろ試してCSSに慣れていきましょう。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら
