WordPressのデザインを編集する3つの方法

何故追加CSSの記述が優先されるのか

前段でさらっと「原則として追加CSSの記述が優先されやすい」と書きましたが、その点についてもう少し解説します。

CSS HappyLife ZEROというCSS初心者・中級者向けの解説サイトに、優先順位・個別性・!important宣言｜CSSの基本という記事があります。

CSSの適用方法は多種多様です。様々な指定を行うため、これらが競合した場合に備え、優先度が決められています。スタイルのもっとも基本的な優先順位は、「後から読み込んだスタイルを優先的に適用」します。

CSSのことにあまり詳しくないという方は、この後から読み込んだスタイルを優先的に適用するところだけでも頭に入れてください。

WordPressの追加CSSは、テーマファイルや子テーマの.cssよりも後から読み込まれるため、「原則として追加CSSの記述が優先されやすい」のです（一部例外となるケースもありますが、今回は省略します）。

↑ 記事内目次にもどる

何故追加CSSの記述が優先されるのか（CSSの仕様に詳しい人向けの解説）

ここからはW3CのCSSの仕様を元に解説します。後から読み込んだスタイルを優先的に適用するの根拠をきちんと知りたい、という方のみお読みください。

先ほど引用した優先順位・個別性・!important宣言｜CSSの基本では、次のような解説もあります。

セレクタには子孫セレクタやクラスセレクタ、IDセレクタなどスタイルを適用させる方法は色々ありますが、個別性が高いセレクタ程、優先度が高くなります。この個別性の計算は以下のようになっています。

• style属性がある場合は、1000になります。 (= a)
• セレクタに含まれている IDセレクタを100としてその数を足します。 (= b)
• セレクタに含まれている id以外の属性と、擬似クラスを10としてその数を足します。 (= c)
• セレクタに含まれている 要素、擬似要素を1としてその数を足します。 (= d)

 *             {}  /* a=0 b=0 c=0 d=0 -> 個別性 =       0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> 個別性 =       1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> 個別性 =       2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> 個別性 =       2 */
 ul ol + li    {}  /* a=0 b=0 c=0 d=3 -> 個別性 =       3 */
 .warning      {}  /* a=0 b=0 c=1 d=0 -> 個別性 =      10 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> 個別性 =      11 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> 個別性 =      13 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> 個別性 =      21 */
 #myid         {}  /* a=0 b=1 c=0 d=0 -> 個別性 =     100 */
 #page #main   {}  /* a=0 b=1 c=0 d=0 -> 個別性 =     200 */
 #page #main p {}  /* a=0 b=2 c=0 d=1 -> 個別性 =     201 */
 style="foo"       /* a=1 b=0 c=0 d=0 -> 個別性 =    1000 */

このspecificity（個別性。詳細度と訳す場合もあります）が強いほど、基本的な優先順位である「後から読み込む」に関わらず、優先順位が高くなります。

W3CのSelectors Level 4の仕様の16. Calculating a selector’s specificityでは、各種のセレクタにおけるspecificityが規定されています。

また、Note: The specificity of the styles specified in an HTML style attribute is described in CSS Style Attributes.とされ、HTML内に直接記述するstyle属性、style要素についてはCSS 2.1の仕様を参照するよう示されています。

そのCSS 2.1の6.4.3 Calculating a selector’s specificityでは、In the above example, the color of the P element would be green. The declaration in the “style” attribute will override the one in the STYLE element because of cascading rule 3, since it has a higher specificity.とされ、同じspecificityが1,0,0,0（1000）であるstyle要素とstyle属性の指定があった場合は、if two declarations have the same weight, origin and specificity, the latter specified wins.のように、後から記述されるものが優先されるとあります。

style要素はhead要素内に記述されるものですが、style属性は（head要素よりも後に配置される）body要素内の各要素に対して記述されるものなので、style要素よりもstyle属性が優先されます。

そのため、該当するケースは少ないと思いますが、追加CSSでデザインを変更していたとしても、ページ内のHTMLに直接style属性を記述した場合は、そちらが優先されることになるでしょう。

↑ 記事内目次にもどる