LemonteaのUnity部屋

C#とかのお話です~

CSS セレクタ ~ で以降の要素を指定

こんにちは。レモンティーです。

今回は~セレクタについてです。

これは↓のように書くと

X ~ Y{  }

X以降で同じ階層の全てのYにCSSを適用できます。
同じ階層、というのは親が同じということです。
つまりXと親が同じで、Xより後ろにあるYに適用されます。

たとえば次のような場合は…
HTML

<div>
<p>前のp(対象外)</p>
<a href="http://sawalemounity.hatenablog.com/archive">aタグ(記事一覧)</a>
<p></p>
<p></p>
<p></p>
<span>span(対象外)</span><br>
<p>p(間に別のタグ↑があっても関係なし)</p>
</div>

<div>
<p>別の階層のp(対象外)</p>
</div>

CSS

a ~ p{color:blue;}

…このようになります


前のp(対象外)

aタグ(記事一覧)

span(対象外)

p(間に別のタグ↑があっても関係なし)


別の階層のp(対象外)



たしかにaと同じ階層で後ろにあるpにだけ
CSSが適用されています。
関係あるのはこの条件だけで、あいだにspanやbrといった
別のタグがあってもなんら関係ありません。
慣れたら便利そうなセレクタですね。


今回はこれでおしまいです。


sawalemounity.hatenablog.com

sawalemounity.hatenablog.com

sawalemounity.hatenablog.com