CSS隣接兄弟セレクタ
9775 ワード
隣接する兄弟セレクタ(Adjacent sibling selector)は、別の要素の直後の要素を選択し、両方に同じ親要素があります.
隣接する兄弟セレクタ(Adjacent sibling selector)は、別の要素の直後の要素を選択し、同じ親要素を持つ必要がある場合に使用します.
たとえば、h 1要素の直後に表示される段落の上端を増やす場合は、次のように書くことができます.
このセレクタは、「h 1要素の直後に現れる段落を選択し、h 1要素とp要素が共通の親要素を持つ」と読みます.
例:
隣接兄弟セレクタは、プラス記号(+)、すなわち隣接兄弟結合子(Adjacent sibling combinator)を使用します.
注記:サブコネクタと同様に、隣接する兄弟コネクタの横に空白のコネクタを付けることができます.
次のドキュメントツリーのクリップを参照してください.
上のクリップでは、div要素には2つのリストが含まれています.1つの無秩序リスト、1つの秩序リスト、各リストには3つのリスト項目が含まれています.この2つのリストは隣接する兄弟であり、リスト項目自体も隣接する兄弟である.ただし、最初のリストのリスト・アイテムと2番目のリストのリスト・アイテムは隣接する兄弟ではありません.この2つのリスト・アイテムのセットは同じ親要素に属していないためです(最大では従兄弟のみ).
1つの結合子で2つの隣接する兄弟の2番目の要素しか選択できないことを覚えておいてください.次のセレクタを見てください.
上のセレクタは、リストの2番目と3番目のリスト項目を太字にするだけです.最初のリスト項目は影響を受けません.
例:
隣接する兄弟の結合子は、他の結合子を結合することもできます.
このセレクタは、table要素の直後に現れるすべての兄弟ul要素を選択し、body要素自体がhtml要素のサブ要素であるbody要素に含まれる.
隣の兄弟を選ぶ
隣接する兄弟セレクタ(Adjacent sibling selector)は、別の要素の直後の要素を選択し、同じ親要素を持つ必要がある場合に使用します.
たとえば、h 1要素の直後に表示される段落の上端を増やす場合は、次のように書くことができます.
h1 + p {margin-top:50px;}このセレクタは、「h 1要素の直後に現れる段落を選択し、h 1要素とp要素が共通の親要素を持つ」と読みます.
例:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:200px;}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is paragraph. </p>
<p>This is paragraph.http://www.cnblogs.com/roucheng</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>構文の解釈
隣接兄弟セレクタは、プラス記号(+)、すなわち隣接兄弟結合子(Adjacent sibling combinator)を使用します.
注記:サブコネクタと同様に、隣接する兄弟コネクタの横に空白のコネクタを付けることができます.
次のドキュメントツリーのクリップを参照してください.
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
上のクリップでは、div要素には2つのリストが含まれています.1つの無秩序リスト、1つの秩序リスト、各リストには3つのリスト項目が含まれています.この2つのリストは隣接する兄弟であり、リスト項目自体も隣接する兄弟である.ただし、最初のリストのリスト・アイテムと2番目のリストのリスト・アイテムは隣接する兄弟ではありません.この2つのリスト・アイテムのセットは同じ親要素に属していないためです(最大では従兄弟のみ).
1つの結合子で2つの隣接する兄弟の2番目の要素しか選択できないことを覚えておいてください.次のセレクタを見てください.
li + li {font-weight:bold;}上のセレクタは、リストの2番目と3番目のリスト項目を太字にするだけです.最初のリスト項目は影響を受けません.
例:
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <style type="text/css">
5 li + li {font-weight:bold;}
6 </style>
7 </head>
8
9 <body>
10 <div>
11 <ul>
12 <li>List item 1</li>
13 <li>List item 2</li>
14 <li>List item 3</li>
15 </ul>
16 <ol>
17 <li>List item 1</li>
18 <li>List item 2</li>
19 <li>List item 3</li>
20 </ol>
21 </div>
22 </body>
23 </html>他のセレクタを結合
隣接する兄弟の結合子は、他の結合子を結合することもできます.
html > body table + ul {margin-top:20px;}このセレクタは、table要素の直後に現れるすべての兄弟ul要素を選択し、body要素自体がhtml要素のサブ要素であるbody要素に含まれる.