webruaryと黒猫のウィズ

webruaryの記事一覧 webruaryのRSS

通常のブログ。http://webruary.net/


隣接セレクタと間接セレクタを微妙に勘違いしてたのでメモ。

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からのセレクタだと「何番目に出てくる要素に対して適用」とかも指定できちゃったり。
味な真似してくれるぜちくしょー。

このエントリーをはてなブックマークに追加

Sponsored Links

Comment : 0

Comment Form

Track Back : 0

この記事のトラックバックURL
http://webruary.blog37.fc2.com/tb.php/102-b3da4e59

トラックバック一覧