CSS で子孫セレクタを定義する
このステップでは、CSS の子孫セレクタについて学び、それを定義する方法を学びます。子孫セレクタは、別の要素の中にネストされた要素を対象とし、特定のネストされた要素にスタイルを適用することができます。
WebIDE を使って ~/project
ディレクトリに styles.css
という新しいファイルを作成します。これがあなたが子孫セレクタを定義する CSS スタイルシートになります。
基本的な子孫セレクタを作成する方法は次のとおりです。
/* 子孫セレクタの構文: 親要素 子孫要素 */
div p {
/* CSS スタイルが div 要素内の段落に適用されます */
}
子孫セレクタを分解してみましょう。
div
は親要素です
p
は子孫要素です
div
と p
の間の空白は子孫関係を示しています
<div>
内の任意の <p>
要素がこのセレクタによってスタイル付けされます
次に、CSS ファイルを HTML にリンクします。index.html
を開き、<head>
セクションにスタイルシートへのリンクを追加します。
<head>
<meta charset="UTF-8" />
<title>CSS Descendant Selector Example</title>
<link rel="stylesheet" href="styles.css" />
</head>
これにより、HTML ドキュメントと CSS スタイルシートが接続され、次のステップでスタイリングするために準備が整います。