直下の子要素にだけスタイルを指定するCSSセレクタの書き方

 広告の画像を横に並べて表示しようとスタイルシートを書いていたのですが、DIV タグに class 属性を付けずに手を抜こうとしたところ、後になってどのように CSS セレクタを記述したらいいのかものすごい悩んだ、というしょうもない話です。クラス名とか関数名とか、いっつも悩むんですよ。

20151110_1

HTML は次のようになっています。

ネスト(入れ子)構造になっている DIV タグに対し、どのように CSS セレクタを記述すればいいのかという問題であると言い換えることができます。

準備

CSS でなにもカスタマイズしていない状態がこちらです。

20151110_2

まずは横に並べるために float を設定します。

横に並んではくれたのですが、下の H2 タグが上に飛び出てきてしまっています。

20151110_3

これは、横並びになっている広告を囲んでいる親要素の DIV タグに高さがないことが原因です。

こうなります。

20151110_4

この横並びになった DIV タグを中央に表示したい。

あまりに便利だから、いつも子孫セレクタでスタイル指定しちゃう

CSS の知識に乏しい当ブログ管理人は、スタイル指定に困るととりあえず子孫セレクタで記述をするという、プログラマにあるまじき癖があります。広告の大きさは定番の 300X250 です。

 横並びになった DIV タグを中央揃えで表示するには、float 設定の子要素を持っている親要素の width を指定し、margin を 0 auto に設定することです。

 親要素の幅なんですが、子要素の幅すべてをきちんと設定してやる必要があります。今回で言えば、300px の画像が二枚なので 600px です。margin、padding、枠線などがある場合は、それらの幅もきちんと計算する必要があります。これで表示してみると、

20151110_5

訳がわからない状態になりました。Google Chrome の「要素の検証」で確認するとわかるのですが、広告ひとつひとつのそれぞれの幅が 600px になってしまっています。

20151110_6

今日調べるまで知らなかったんですが、子孫セレクタって子要素だけでなく、孫要素やそれ以下のすべての要素にスタイル指定してしまうものだったんですね。よく考えずに子孫セレクタを使ってはいけないという戒めです。

子セレクタで指定してあげる

このように修正してあげます。

このように指定してあげれば、直下の子要素のみにスタイルが適用されるようになり、ちゃんと中央に表示されるようになります。

20151110_7

広告同士の間に空白などをいれて調整します。

真ん中の余白に合わせて width の値を調整するのを忘れないようにしてください。

20151110_8

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP