隣接セレクタ …… 直後に隣接している要素にスタイルを適用する
![Internet Explorer7](../images/b_i7.gif)
![Internet Explorer8](../images/b_i8.gif)
![Netscape6](../images/b_n6.gif)
![Netscape7](../images/b_n7.gif)
![Netscape8](../images/b_n8.gif)
![Opera6](../images/b_o6.gif)
![Opera7](../images/b_o7.gif)
![Opera8](../images/b_o8.gif)
![Firefox1](../images/b_f1.gif)
![Firefox2](../images/b_f2.gif)
広告
セレクタを + で区切ると、同じ階層にある要素同士で、
ある要素の直後に隣接している要素を対象にスタイルを適用することができます。
- 書式
- セレクタ+セレクタ {プロパティ名:値;}
- 適用対象
- 直後に隣接している要素
以下の使用例では、h2要素の直後にあるp要素にスタイルが適用されます。
h2 + p {color:#0000ff;}
<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<h2>今日のお天気</h2>
<p>今日は<strong>晴れ</strong>です。</p>
<p>洗濯日和となるでしょう。</p>
<h2>明日のお天気</h2>
<p>明日は<strong>雨</strong>です。</p>
<p>傘を忘れないようにしましょう。</p>
</body>
</html>
↓↓↓
今日のお天気
今日は晴れです。
洗濯日和となるでしょう。
明日のお天気
明日は雨です。
傘を忘れないようにしましょう。
広告