CSSの「適用順」と「上書き」に注意が必要

この記事が良ければ、ぜひシェアお願いします

WordPressのデフォルトのテーマである『Twenty Eleven 1.3』のCSSを見ていたら、セレクタ/疑似クラス/疑似要素やそれぞれの中でも親子関係などの規則が分からなくなってきました。(俗に言う見過ぎて混乱、という感じですw)

セレクタだけでも8種類あり、それが同じ定義の中での前後や、スタイルシート内での前後などでも意味が分かってくるので、規則性に注意が必要と感じました。
たとえば、IDセレクタとクラスセレクタの順序でもこんな感じです。

#access a.assistive-text:active,
#access a.assistive-text:focus {
 background: #eee;
 border-bottom: 1px solid #ddd;
 color: #1982d1;
 clip: auto !important;
 font-size: 12px;
 position: absolute;
 text-decoration: underline;
 top: 0;
 left: 7.6%;
}
.singular #primary {
 margin: 0;
}"

また、子孫セレクタもここまで来ると、「どこで使っているんだ!?」と思うようなCSSもあったりします。

ol ol ol ol {
 list-style: lower-alpha;
}"

スタイルの優先順位

スタイルシートでは、適用対象が競合している場合、「詳細度」と「読み込み順序」という二つのルールによって優先順位が決定されるようです。これらの仕組みは、「カスケード処理(Cascading)」と言って、CSS(Cascading Style Sheet)の由来にもなっていますね。

スタイルの「詳細度」は、『一般的なスタイルよりも個別的なスタイルが優先される』というルールになります。ユニバーサルセレクタは影響せず、タイプセレクタ(要素名)よりもクラスセレクタや属性セレクタが、さらにIDセレクタが優先されます。


■スタイルの詳細度のイメージ

ユニバーサルセレクタ < タイプセレクタ < クラスセレクタ・属性セレクタ < IDセレクタ

 

スタイルの読み込み順序

スタイルの読み込み順序は、『詳細度が同じスタイルは、あとから読み込んだスタイルが優先(上書き)される』というルールになっています。例えば、Strongの属性セレクタでcolor指定が”赤”→”緑”と被った場合、あとに書かれている”緑”が優先的に適用されます。

ちなみに、この読み込み順序のルールは、link要素や@importでCSSを読み込む際にも適用されます。CSSは、読み込むように定義されていれば、基本的にその全ての行を読み込んでしまうので、あとに書かれたものが『上書き』されると覚えておくといいと思います。

スタイルの継承

CSSには、ある要素に適用したスタイルは子孫要素に自動的に引き継がれるという特徴があります。この仕組みを『継承』といって、ほとんどのスタイルが自動的に引き継がれます。

スタイルの適用はXHTML/HTMLの構造と、サイト全体のデザイン、各要素や各ページ個別のデザインなど、ある程度のガイドラインを以て作らないと、最終的に何が適用されるかわからなくなってしまうので、今回挙げたルールをきちんと押さえておく必要がありますね。

スポンサーリンク

この記事が良ければ、ぜひシェアお願いします

もぐ
年齢 : 30代半ばの1児の新米パパ。ITネットワークから始まり、WEBディレクター、WEBシステム系のプロマネ、データ分析など色々やってるエンジニアです。WordPress、Webサービス構築、BIツール、IoTなどがトレンド。新しくて面白い仕事募集中。
スポンサーリンク