CSS 組み合わせセレクター


CSS Combination Selector

CSS Combination Selectorを使用すると、セレクター間の関係を直感的に理解できます。

Note 結合されたセレクターは、2 つのセレクター間の直接の関係を示しています。

CSS 結合セレクターには、単純なセレクターのさまざまな組み合わせが含まれます。

CSS3 には 4 つの組み合わせメソッドが含まれます:

  • 子孫セレクター (スペースで区切られます)

  • 子要素セレクター (不等号で区切られます)

  • 隣接する兄弟セレクター (スペースで区切られます) ダッシュで区切られます)

  • 通常の兄弟セレクター (ダッシュで区切られています)

子孫セレクター

子孫セレクターは、価値のある要素のすべての子孫要素と一致します。

次の例では、すべての <p> 要素を選択し、それらを <div> 要素に挿入します。

子要素セレクター
子孫セレクターと比較して、子セレクターは、要素の子である要素のみを選択できます。
次の例では、<div> 要素内のすべての直接の子要素 ​​<p> を選択します:

Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div p
{
	background-color:yellow;
}
</style>
</head>
<body>

<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

</body>
</html>

Run Instance»

オンラインの例を表示するには、[Run Instance] ボタンをクリックします。

隣接兄弟セレクター

隣接兄弟セレクターは、別の要素の直後の要素を選択でき、両方とも同じ親要素を持ちます。
別の要素の直後の要素を選択する必要があり、両方の要素が同じ親要素を持つ場合は、隣接兄弟セレクターを使用できます。
次の例では、<div> 要素の後にある最初の <p> 要素をすべて選択します:

例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div>p
{
	background-color:yellow;
}
</style>
</head>

<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>

<div>
<span><p>I will not be styled.</p></span>
</div>

<p>My best friend is Mickey.</p>
</body>
</html>

[インスタンスの実行] ボタンをクリックして、オンラインの例を表示します。

後続兄弟セレクター

後続兄弟セレクターは、指定された要素の後に隣接するすべての兄弟要素を選択します。

次の例では、すべての <div> 要素の後にすべての隣接する兄弟要素 <p> を選択します。
←
→