ブラウザのCSS解釈方法についての衝撃事実 - Qiita

上記のようなコードがあったとき、以下の順序でブラウザは解釈・実行していると思っていました。 1. sampleクラスを見つける 2. 1の子孫のtable要素を見つける 3. 2の子孫のtd要素を見つける 4. 文字色を赤くする 正しい見解 上記のようなコードがあったとき、以下の順序でブラウザは解釈・実行しているらしいです。 1. 全てのtd要素を見つける 2. 1の先祖要素にtable要素が存在するかを確認 3. 2のtable要素の先祖要素にsampleクラスが存在するかを確認 4. 文字色を赤くする このように、CSSセレクタは右から左へと照合されていきます。 ※一番右側のセレクタは、キーセレクタと呼ばれるらしいです 何が問題か？ 例えば、以下のようなHTMLコードがあったとします。 上記のCSSコードでsampleクラス配下の表の文字色を赤くしようとすると、まずDO

[noisegate]

そのパフォーマンスがどれぐらい変わるのかが知りたいところ。ユーザー体験が変わらないなら自己満足になってしまうわけで。

[pogin]

これ学び始めにたどり着いてるはずの事柄では…？

[musign]

へー

[Nihonjin]

パフォーマンス

[souvenir038]

CSSセレクタは右から左へと照合されていく。キーセレクタ(一番右のセレクタ)は出来る限り絞り込み、無関係のDOMをマッチさせないようにする

[uretaro]

"CSSセレクタは右から左へと照合される"

[idr_zz]

右から左へ…受け流す…じゃ無い、照合！！？ 自分も左から右と思ってたよ。 ブラウザのCSS解釈方法についての衝撃事実 on @Qiita