「子要素」とは、他の要素に直接属している要素のことです。これはやや抽象的な概念かもしれませんが、例を挙げて説明すると理解しやすくなります。
<body> <p>段落 1</p> <p>段落 2</p> <p>段落 3</p> </body>
ここで、bodyは親要素です。p要素はそれぞれbodyの子要素です。この知識を基に、子要素セレクタを適用することができます。
body＞p {
color: blue;
}
この構文は、bodyの直接の子要素であるすべての段落を青色に設定します。
次の例は、body p と body>p の違いを再確認します。
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body＞p {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
body p {
color:#0066FF;
}
</style>
</head>
<body>
<p>段落 1</p>
<p>段落 2</p>
<p>段落 3</p>
<div>
<p>段落 4</p>
</div>
</body>
</html>最初に定義された最初の3つのpテキスト段落は、bodyの直接の子要素です。body p の指示により、すべてのテキスト段落に青い文字が設定されます。一方、body>p は最初の3つのテキスト段落にのみ影響を与えます。そのため、これらの段落はより大きなフォントサイズで表示されます。
次に、隣接要素セレクタを紹介します。このセレクタは、他の要素に直接続く要素をマークし、それらと同じ親要素を持っています。これについても例を示します:
h1+p {
color: blue;
}
この構文では、段落のテキスト色が青に設定されます。ただし、これは1つ目の見出しに直接続く段落の場合にのみ適用されます。
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1+p {
color: blue;
}
</style>
</head>
<body>
<h1>見出し</h1>
<p>段落 1</p>
<h2>見出し</h2>
<p>段落 2</p>
<p>段落 3</p>
<div>
<p>段落 4</p>
</div>
</body>
</html>ブラウザでの結果をご覧ください。
ここでは、最初の段落だけが青色で表示されます。他の段落は黒色です。これは、これらのp要素がh1にではなくh2に続いているためです。
CSS3では、要素の後続要素に関するさらなる選択肢が導入されました。特定の要素のすべての後続要素にアクセスできるようになりました。例を示します:
h1~p {
color: red;
}
この構文により、h1に続くすべての段落が対象となります。
要素だけでなく、要素の属性を通じても選択できます。
これらのセレクタの一部を次に示します:
• [att] – 要素は属性を含んでいればよく、値は問わない。
• a[href] – すべてのハイパーリンク(<a href=…>)がマークされます。ただしアンカー定義(<a name=…>)には適用されません。
• [align=left] – align属性がleftの要素がマークされます。
• [attr~=wert] – 空白で区切られた値リスト内にwertが含まれる要素がマークされます。
• [attr|=wert] – 指定された値がハイフンで区切られた文字列の先頭にある場合に要素をマークします。
• img[width="200"] – 幅が200ピクセルのすべての画像がマークされます。
これらの属性セレクタが本当に必要になるのはいつでしょうか。たとえば、フォームとその中に定義されたチェックボックスを考えてみてください。チェックボックスは – これはおそらく知っているかもしれません – input要素を使って定義されます。問題は次のとおりです: input要素は、通常のテキスト入力フィールドの定義にも使用されます。したがって、inputを介してチェックボックスとテキスト入力フィールドに異なるフォーマットを適用することはできません。ここで属性セレクタが活躍するのです。次の例を見て、より理解を深めてください:
<body> 名前: <input type="text" id="name" /> <br /> 男性: <input type="checkbox" name="geschlecht" id="geschlecht" /> <br /> 女性: <input type="checkbox" name="geschlecht" id="geschlecht" /> </body>
異なるフォーム要素が定義されています。
• テキスト入力フィールド
• 2つのチェックボックス
これらのフィールドにフォーマットを適用します。
input {
border:3px solid #000;
width: 10em;
}フィールドに枠線と幅が割り当てられます。
問題は次のとおりです：指定された幅はテキスト入力フィールドにのみ適用されるべきであり、チェックボックスには適用されるべきではありません。ただし、要素セレクタを使用すると、異なるフィールドタイプの違いを区別することはできません。このような区別が行われるようにするには、属性セレクタを使用します。これがどのように見えるかの例を以下に示します：
input[type="checkbox"] {
width: auto;
}
このセレクタによって、type="checkbox"属性値の組み合わせを持つinput要素にのみアクセスされます。
繰り返し
CSSにより、繰り返しを対象とすることができるようになりました。もちろん、そのようなものをどのように活用するかという質問があります。たとえば、表の各行で2行おきに異なる色を付けたい場合、これらのセレクタは有用です。利用可能なセレクタを紹介する前に、典型的な例を示します：
<ol id="sprachen">
<li>HTML</li>
<li>HTML5</li>
<li>CSS</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JScript</li>
<li>Java</li>
<li>PHP</li>
<li>Python</li>
</ol>
これは通常の順序付きリストです。CSSを使用して、今後、3つめのリスト項目の背景色を割り当てます。
これにはnth-child()セレクタが使用されます。このセレクタを使用すると、各n番目の子要素が選択されます。
#sprachen li:nth-child(3n) {
background-color: red;
}
次のセレクタが利用可能です：
• :root – :rootセレクタを使用すると、ドキュメントのルートを指定できます。
• :nth-child(n) – 親要素内の各n番目の要素を制御します。これは、異なる要素をスタイル付けする必要がある場合に特に役立ちます。nは固定されたキーワードで、数式を適用できます。nは値1に等しいことができます。
• :nth-last-child(n) – 要素内の後ろからn番目の要素を制御します。
• :nth-of-type(n)– 同じHTMLタイプの同じレベルのn番目の要素を制御します。
• :nth-last-of-type(n) – 要素内で後ろからn番目の要素を制御します。
• :first-child – 要素内の最初の子要素を制御します。
• :last-child – 要素内の最後の子要素を制御します。
• :first-of-type – 親要素内の同じHTML要素タイプの最初の要素を制御します。
• :last-of-type – 親要素内の同じHTML要素タイプの最後の要素を制御します。
• :only-child – 兄弟要素を持たず、親要素内で唯一の子要素を操作します。
• :only-of-type – 同じHTMLタイプの兄弟要素を持たず、親要素でその種類の唯一の子要素を操作します。
• :empty – 空の要素を操作します。
これらのセレクタを使用することで、HTMLの操作がより簡単になり、過去の複雑なクラス定義が不要になります。
