1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
---
title: 結合子
slug: Learn/CSS/Building_blocks/Selectors/Combinators
tags:
- Beginner
- CSS
- Learn
- Selectors
- combinators
translation_of: Learn/CSS/Building_blocks/Selectors/Combinators
---
<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p>
<p>ここで取り上げる最後のセレクターは、他のセレクターと、ドキュメント内のコンテンツの場所や場所との有用な関係を提供する方法で組み合わせるため、コンビネーターと呼ばれます。</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">前提条件:</th>
<td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td>
</tr>
<tr>
<th scope="row">目的:</th>
<td>CSS で使用できるさまざまな結合子セレクターについて学ぶ。</td>
</tr>
</tbody>
</table>
<h2 id="子孫コンビネーター">子孫コンビネーター</h2>
<p>子孫コンビネーター（通常は単一のスペース（ <code> </code> ）文字で表される）は、2つのセレクターを結合して、最初のセレクターと一致する祖先（親、親の親、親の親の親など）要素がある場合、2番目のセレクターと一致する要素が選択されるようにします。 子孫コンビネーターを利用するセレクターは、子孫セレクターと呼ばれます。</p>
<pre class="brush: css notranslate">body article p
</pre>
<p>これらのセレクターは、他のセレクターの子孫である要素を選択します。それらは一致するように直接の子供である必要はありません。</p>
<p>以下の例では、要素の内部にある <code><p></code> 要素のみを <code>.box</code> クラスと照合しています。</p>
<p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p>
<h2 id="Child_combinator" name="Child_combinator">子コンビネーター</h2>
<p>子コンビネーターは、大なり記号（ <code>></code> ）であり、セレクターが直接の子である要素を選択した場合にのみ一致します。階層のさらに下の子孫は一致しません。例えば、<code><article></code> 要素の直接の子である <code><p></code> 要素のみを選択するには：</p>
<pre class="brush: css notranslate">article > p</pre>
<p>次の例では、順序付けられていないリストがあり、その中にネストされているのは別の順序付けられていないリストです。子コンビネータを使用して、<code><ul></code> の直接の子である <code><li></code> 要素のみを選択し、上部の境界線を設定しています。</p>
<p>これを子コンビネーターとして指定している <code>></code> を削除すると、子孫セレクターになり、すべての <code><li></code> 要素に赤い境界線が表示されます。</p>
<p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p>
<h2 id="Adjacent_sibling" name="Adjacent_sibling">隣接する兄弟</h2>
<div title="The adjacent sibling selector (+) is used to select something if it is right next to another element at the same level of the hierarchy.">隣接する兄弟セレクター（ <code>+</code> ）は、階層の同じレベルにある別の要素のすぐ隣にある場合に選択します。例えば、<code><p></code> 要素の直後に来るすべての <code><img></code> 要素を選択するには：</div>
<pre class="brush: css notranslate">p + img</pre>
<p>一般的な使用例は、以下の私の例のように、見出しに続く段落で何かを行うことです。ここでは、<code><h1></code> に直接隣接する段落を探し、スタイルを設定しています。</p>
<p><code><h1></code> と <code><p></code> の間に <code><h2></code> のような他の要素を挿入すると、段落がセレクタによってマッチしなくなり、要素が隣接しているときに適用される背景色と前景色が得られなくなることに気づくでしょう。</p>
<p>{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}</p>
<h2 id="General_sibling" name="General_sibling">一般的な兄弟</h2>
<p>要素が直接隣接していなくても、その要素の兄弟を選択したい場合は、一般的な兄弟コンビネーター( <code>~</code> )を使うことができます。<code><p></code> 要素の後のどこかに来る <code><img></code> 要素をすべて選択するには、次のようにします。</p>
<pre class="brush: css notranslate">p ~ img</pre>
<div title="In the example below we are selecting all <p> elements that come after the <h1>, and even though there is a <div> in the document as well, the <p> that comes after it is selected.">以下の例では、<code><h1></code> の後に続くすべての <code><p></code> 要素を選択しています。また、ドキュメントに <code><div></code> がある場合でも、その後にある <code><p></code> が選択されています。</div>
<p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p>
<h2 id="コンビネーターの使用">コンビネーターの使用</h2>
<p>ドキュメントの一部を選択するために、前のレッスンで発見したセレクタをコンビネータと組み合わせることができます。 たとえば、<code><ul></code> の直接の子であるクラス "a"のリストアイテムを選択する場合、次のように使用できます。</p>
<pre class="brush: css notranslate">ul > li[class="a"] { }</pre>
<p>ただし、文書の特定の部分を選択する大きなセレクタのリストを作成する際には注意が必要です。マークアップの中でその要素の位置を特定してセレクタを作成しているので、CSS ルールを再利用するのは難しいでしょう。</p>
<p>多くの場合、単純なクラスを作成し、それを問題の要素に適用する方が適切です。つまり、ドキュメント内の何かにアクセスする必要があり、HTMLにアクセスできない場合、おそらくCMSによって生成されているために、コンビネーターに関する知識は非常に役立ちます。</p>
<h2 id="あなたのスキルをテストしてみてください!">あなたのスキルをテストしてみてください!</h2>
<p>この記事では多くのことを取り上げましたが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストがいくつかあります - あなたのスキルをテストするを参照してください。<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a> を参照してください。</p>
<h2 id="Moving_on" name="Moving_on">先へ</h2>
<p>これは、セレクターに関するレッスンの最後のセクションです。次に、CSSのもう1つの重要な部分である<a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">CSSボックスモデルに進み</a>ます。</p>
<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p>
<h2 id="このモジュール">このモジュール</h2>
<ol>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a>
<ul>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">共役</a></li>
</ul>
</li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li>
</ol>
|
