CSSの子供セレクタ（＞）と子孫セレクタの違いを理解しよう

アメブロの強調表示CSSをカスタマイズするのところで記事の中身を修正しました。

読者さんからの指摘でCSS設定に誤りがあったことが発覚！びっくり

でも嬉しいです。

こういうところまで見ていただけるのは感激！爆　　笑

そこで恥をしのんでCSS設定の何を間違えていたのか記事にしました。

同じ間違いをやらかさないよう参考にしていただければ幸いです。

間違いの設定

.skin-entryBody > em {
    color: #f00
}

正しい設定

.skin-entryBody em {
    color: #f00
}

何が違うかというと＞があるか無いかというだけです。キョロキョロ

＞がある方。

.skin-entryBody > em

これが子供セレクタ。

無い方。

.skin-entryBody em

こちらは子孫セレクタと呼ばれます。

何が違うか。

子供セレクタの方は正に子供と親の関係。

つまりemがskin-entryBodyの子供の時だけCSSが効きます。

skin-entryBodyというのが何かというと、記事を書いた中身にアメブロがつけてくるCSSのセレクタのひとつです。

つまり子供セレクタの場合は、skin-entryBodyの直下にemタグが配置されていないとCSSが働きません。

はるなぴの場合、秀丸マクロによるマークダウン→HTML変換で通常の文は次のように変換されます。

<p>なんらかの文章があって<em>強調表示をしたい箇所</em>が含まれている。</p>

そうするとemタグはもうskin-entryBodyの直下、子供ではありません。

関係からいうと孫になっていますね。
間にpタグを挟んでいますから。

skin-entryBodyから見たらpタグが子供、emタグは孫です。

孫なのに子供セレクタを指定してしまったためCSSが働かなかったという、まあ考えてみれば当たり前の結果なのでした。ショボーン

いやーお恥ずかしい限り。

ここは当然子孫セレクタで書かなくてはいけませんでしたね。

そこで、

.skin-entryBody em {
    color: #f00
}

と書いて、＞を取れば、これが子孫セレクタの書き方。

ちゃんと赤字も赤太字も表示されるようになりました！ウインク

ちなみに孫だけでなくひ孫でも、ひひ孫でもOK。

正に「子孫」なんですね。

それじゃ何でわざわざskin-entryBodyの子孫に限るのか？

それはアメブロ側が他の箇所でemタグやstrongタグをどう使うか全く分からないからです。えー

全体に影響が及ぶようにCSSを書き換えてしまうと見栄えが変わって困ることもあるかもしれません。

安全サイドを考えてskin-entryBodyの下、つまり自分が記事を書いた部分にだけCSSカスタマイズを施そうと考えたわけです。

はるなぴは実を言うと本当は子供セレクタ、子孫セレクタは使いたくありません。

何故かというとこの使い方、ブラウザのパワーをかなり食うらしいからです。

パフォーマンスに影響が出るかもしれません。

表示がサクッとされないかもしれないということです。

今年あたりからGoogle先生、このあたりをかなり重視しだしているそうです。キョロキョロ

気をつけなくては！

だからアメブロが他のところでemタグやstrongタグを使ってこないと分かっているなら本当はskin-entryBodyは取りたいです。

でもね。

アメブロのデフォルトHTMLがどう書かれてくるかは分かりません。

前にアウトラインで確認したように、サイドバーなどのナビゲート部分にも平気で見出しタグ（H3とかH4）を使ってきてしまっています。

普通はdivタグにして見栄えはCSSでコントロールすべきところです。プンプン

こういうこともあるので安全サイドを取った方がいいかなぁという判断でいます。

とは言え…

実は危ない橋を渡っているところも既にいくつかあります。てへぺろ

例えば前に設定したtableタグです。

table {
border-collapse: collapse;
border-spacing: 0;
width: 100%
}

td, th {
border: 1px solid #999;
box-sizing: border-box;
text-align: center
}

tableタグは実はサイドバーのカレンダー部分でデフォルトで使われています。

なので良く見ると、CSSカスタマイズの影響でカレンダーが罫線表示のようになってとても見やすくなっています。

これなんかはケガの功名を利用したって感じです。ニヤリ

ま、いいか。そのままで…みたいな。

でもまあ今後どのように変わってくるか分かりませんからね。

普通はskin-entryBodyの下のみに限定しておいた方が安全でしょうね。

気付いたことがあったらどんどんコメントしていただけると嬉しいです！ウインク