トップページ  > CSS3  > E ~ F

★CSS3リファレンス

E ~ F …… E要素の後ろにある同じ階層のF要素
Internet Explorer9 Firefox1Firefox2Firefox3Firefox4 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6 Safari3Safari4Safari5 Opera10

E ~ Fは、E要素の後ろにある同じ階層のF要素にスタイルを適用する際に使用します。

セレクタを ~ (チルダ)で区切ると、 同じ階層にある要素同士であれば、E要素とF要素の間に他の要素があっても(E要素とF要素が隣接していなくても)、F要素にスタイルが適用されます。

■セレクタの書式・スタイルを適用する対象

書式
E ~ F {プロパティ名:値;}
適用対象
E要素が前にあって弟となるF要素

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

div.sample h2 ~ p {border: 3px dotted #000000;}

HTMLソース

<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>

<div class="sample">
<h2>今日のお天気</h2>
<p>今日は晴れです。</p>
<p>洗濯日和となるでしょう。</p>

<h2>明日のお天気</h2>
<p>明日は雨です。</p>
<p>傘を忘れないようにしましょう。</p>

<h2>お天気まめ知識</h2>
<div>毎週金曜日更新!</div>
<p>アマガエルが鳴くと雨。</p>
<p>朝焼けは雨、夕焼けは晴れ。</p>
</div>

</body>
</html>
↓↓↓

ブラウザ上の表示

今日のお天気

今日は晴れです。

洗濯日和となるでしょう。

明日のお天気

明日は雨です。

傘を忘れないようにしましょう。

お天気まめ知識

毎週金曜日更新!

アマガエルが鳴くと雨。

朝焼けは雨、夕焼けは晴れ。

トップページ  > CSS3  > E ~ F
© HTMQ