隣接セレクタと間接セレクタを微妙に勘違いしてたのでメモ。
Category:Web
今更ながらCSSのセレクタがちょー便利。
IEも場合によっては強制自動更新で8もしくは9になった関係上、ココ最近結構多用してました。
(↑正直、もぉIE6については他のブラウザと表示が違くなっててもスルーしたり…。)
そこで、自分が使い方を勘違いしてたところがあったのでメモしつつ、誰かの参考になれば。
ここから続き
隣接セレクタ
とあるタグと、とあるタグが隣同士の時に発動。
- css
-
h3+p{ background:#f00; }
- html
-
<h3>h3さん</h3> <p> h3と隣同士のpタグ。 ここは背景が赤くなる。 </p> <h4>h4さん</h4> <p> h4と隣同士のpタグ。 ここは背景がかわらない。 </p>
ちなみに、
- css
-
h3.hohoge+p{ background:#f00; }
- html
-
<h3>classなしh3さん</h3> <p> ここは背景がかわらない。 </p> <h3 class="hohoge01">classありh3さん</h3> <p> うぉおお~おおッ うぉおお~おおッ だっだだだっだっだぁ お前t(ry </p>
ってな感じで、classやidをつけた状態でもおk。
↓がダメな例。
自分が最初に勘違いしてやってたやり方。
- css
-
div+h3{ background:#f00; }
- html
-
<div> <h3>ダメな例。</h3> </div>
ちゃんと終了タグが必要です。あれ?こんな間違いするの自分だけ?
間接セレクタ
同じ親要素内に限りa以降に出てきたbに対して発動。
このセレクタが自分的に結構悩みました…(´・ω・`)
- css
-
div.box3 p~p{ background:#f00; }
- html
-
<div class="box3"> <h3>h3さん</h3> <p> ここは背景がかわらない。 </p> <h3>h3さん</h3> <p> ここは背景が赤くなる。 </p> </div>
↑の様なやり方でも合ってるっちゃぁ合ってる。
つまりは同じ親要素(<div class="hohoge03">)内で<p>以降に出てきた<p>に対してセレクタが発動してる状態。
で、自分が勘違いしてたのは『同じ親要素内の2番目以降に出てくる子要素に対して発動する』だと思ってたこと。
まぁ、自分が最初に参考にしたサイトに「2番目に…」って書いてたりもしたんですが…。
ホントは『同じ親要素内の何かしらのタグ以降に出てくるタグに対して発動』だったっていう。
- css
-
div.box4 h4~p{ background:#f00; }
- html
-
<div class="box4"> <h3>h3さん</h3> <p> ここは背景がかわらない。 </p> <h3>h3さん</h3> <p> 2番目の<p>だけどここも背景は変わらない。 </p> <h4>h4さん</h4> <p> <h4>以降に出てくる<p>の背景は赤くなる </p> <p> ぴぃぴぃぴぃ~ぴぃぴぃぴぃ~…ろくなm(ry </p> </div>
ちなみに、↓みたいにclassやidをつけた状態でもおk。
- css
-
div.box5 h3.hohoge02~p{ background:#f00; }
- html
-
<div class="box5"> <h3>classなしh3さん</h3> <p> ここは背景がかわらない。 </p> <h3>classなしh3さん</h3> <p> ここも背景は変わらない。 </p> <h3 class="hohoge02">classありh3さん</h3> <p> 背景が変わる。 </p> <h3>classなしh3さん</h3> <p> 赤いけど3倍早いわけじゃない。 </p> </div>
ちゃんと理解すればやっぱり便利。
しかもCSS3からのセレクタだと「何番目に出てくる要素に対して適用」とかも指定できちゃったり。
味な真似してくれるぜちくしょー。
関連記事
- »Ajaxで動的に生成されたリンクにもfancyboxを適用させてみる。
- »ちょっと気になったのでオンラインストレージ探してみた。
- »隣接セレクタと間接セレクタを微妙に勘違いしてたのでメモ。
- »CSSで背景画像をcenterにした際に1pxずれる時の対処法
- »高さが違うブロックを横並びにするときはfloatじゃなくてinline-block。
Sponsored Links
Comment : 0
Track Back : 0
- この記事のトラックバックURL
- http://webruary.blog37.fc2.com/tb.php/102-b3da4e59