「CSS/記述」の版間の差分

(→‎兄弟セレクタ: 新しい節)
</head>
<body>
<p class="example1">ここは装飾なし。<span>ここは子要素。</span><em>子供は別の要素だけど、<span>孫要素には適用される。</span></em></p>
<em>子供は別の要素だけど、<span>孫要素には適用される。</span></em></p>
 :
途中略
 :
<p id="id2">ここは装飾なし。<em>子要素には適用される。</em><span>別の子要素。<em>孫要素には適用されない。</em></span></p>
<span>別の子要素。<em>孫要素には適用されない。</em></span></p>
</body>
</source>
 
のような表示になります。
 
=== 兄弟セレクタ ===
先ほどは親子でしたが、<code>&lt;a&gt;&lt;b&gt;&lt;/b&gt;&lt;c&gt;&lt;/c&gt;&lt;/a&gt;</code>での<code>b</code>と<code>c</code>のように、親が共通な要素は「兄弟要素」と呼ばれます。この兄弟関係を使ってセレクタで指定することもできます。
 
;<code>セレクタ1 ~ セレクタ2</code>:<code>セレクタ1</code>以降の兄弟要素である<code>セレクタ2</code>。<code>セレクタ1</code>'''自身は一致しません'''。
;<code>セレクタ1 + セレクタ2</code>:<code>セレクタ1</code>の直後にある兄弟要素である<code>セレクタ2</code>。
 
もちろん、<code>セレクタ1</code>や<code>セレクタ2</code>には何を指定してもかまわないので、<code>h1 ~ *</code>とすれば、<code>h1</code>要素以降の兄弟要素がすべて選択されます。
 
=== 属性セレクタ ===
11

回編集