Lucky bag::blog: first-child疑似クラスと隣接セレクタ

個別記事

前後の記事

first-child疑似クラスと隣接セレクタ

この記事が属するカテゴリー: CSS

CSSで:first-child疑似クラスと隣接セレクタをうまく使えば、見栄えを制御する目的だけの為にspanタグで囲んだり、クラスセレクタ・IDセレクタを付与することなく、特定要素を指定することが出来たりするので、大変便利だと思います。これらを使い、当サイトの投稿者部分のコメントとトラックバックに幅20px高さ15pxのアイコンを付けた例です。が、Win IEは対応していないので、悪しからず。一応、画像でお見せしておきます。

:first-child疑似クラスを使う

まず、投稿者部分のHTMLを見てみましょう。要素としては、postedと言うクラスの段落（<p>）と、コメント部分、トラックバック部分の各アンカー（<a>）で構成されているのが分かります。

<p class="posted">投稿者 e-luck 12:32
| <a href="hogehoge#comments" title="hogehogeへのコメント">コメント (0)</a>
| <a href="hogehoge#trackbacks" title="hogehogeへのトラックバック">トラックバック (0)</a>
</p>

:first-child疑似クラスを使い、コメント部分を指定します。:first-child疑似クラスはある要素内で最初に出現する子の要素を指定することが出来ます。コメントのアンカー（<a>）は、posted内で一番最初に出現するので、これにマッチします。backgroundプロパティでアイコン画像を指定し、そのアイコンサイズを考慮した余白をpaddingプロパティで指定します。

.posted a:first-child {
        background: url(img/comment.gif) center left no-repeat;
        padding-left: 20px;
}

セレクタ部分を訳すと、「posted内の一番最初の子要素 a は…」となります。

隣接セレクタを使う

次に、隣接セレクタを使い、トラックバック部分を指定します。隣接セレクタは、ある親要素の中の子要素の直後に出現する要素を指定することができます。プラス記号を使い、A要素＋B要素（これにマッチする）という形式で指定します。今回の例で言えば、posted内のアンカー（<a>）の直後に出現するアンカー（<a>）＝トラックバックとなります。

.posted  a + a {
        background: url(img/trackback.gif) center left no-repeat;
        padding-left: 20px;
}

セレクタ部分を訳すと、「posted内の子要素 a 直後の a は…」となります。

以上で完了です。他にも色々な活用方法があります。このように、HTMLソースを後から弄らずとも、同じ要素に別の指定を行うことが出来ます。もちろん、何かしらの意味づけとして、要素にクラスやIDを付与したり、span要素で囲むんであれば、それを指定すれば良いのですが、こういった装飾のためだけに、後からHTMLを変更するなんてのはナンセンスです。こういった便利なセレクタがまだ使えないIEには、早く対応してもらいたいですね。

2005-01-21T20:38:50+09:00 | コメント (4) | トラックバック (0) |

トラックバック

このエントリーのトラックバックURL:: http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/131

"first-child疑似クラスと隣接セレクタ"へのトラックバックはまだありません。

(o) さんからのコメント

私もbreadcrumbs部分でおんなじようなことをやっています。ちょっと違うのは、私は最初の要素にfirst-childという名前を付けておき、スタイルシートでは以下のように書いておくことでIEでも同じ表示結果を得られるようにしています。

li.first-child, li:first-child {
}

で、IEがfirst-child擬似クラスに対応したら、スタイルシートだけ修正することで対応するつもりです。

2005年01月21日 22:23

e-luck さんからのコメント: そういう方法もありますね。
今回の例としては、IEで表示されなかったとしても特に弊害がないモノだったので、あっさり無視しました:-)
どうしてもIEでも同じ様に見せたい時は、(o) さんの方法がベストかも知れませんね。
ちなみに、個別エントリーでのコメンター部分の事をすっかり忘れてて、(o) さんの名前の前後にアイコンが表示されていて、慌ててCSS修正しながら自分の詰めの甘さを痛感（笑）; 2005年01月22日 01:20

norik さんからのコメント

はじめまして。
質問よろしいでしょうか？

(o)さんのやり方でfirst-childを用いて、且つclassも指定して
liの背景画像表示をIEにも対応させようと思っています。
まず最初に、

#navlist li:first-child, #navlist li.first-child { background: url(...)}

とすれば大方のブラウザでは表示されました（IEも含め）。

さて次に続く要素にはどのように指定すればよいでしょうか？
というのはIEでは表示されなかったのでどうすればよいかと迷っています。
現在仮にCSSで、

#navlist li+ li, #navlist li.second-child/*IE用*/ { background: url(...)}

としてみましたが、FirefoxやNN7ではOKで、
IE6.x～ではうまく表示されませんでした。

お願いいたします。

2007年03月26日 23:55

e-luck さんからのコメント

norik さん
返答が遅くなりました。もしかしたら、もう解決済みかもしれませんが、一応。

現在、隣接兄弟セレクタの指定とクラスでの指定をカンマでグルーピングして指定していますが、それを分けて指定すれば IE でも適用されるかと思います。

#navlist li+li {
background: url(...)
}
#navlist li.second-child {
background: url(...)
}

2007年03月30日 18:00

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を < 、> を > とそれぞれ置き換えてください。

Lucky bag::blog