CSSの変更が反映されないときはセレクタの優先順位をチェック

「CSSを変更したのに反映されない」は、サイト制作時のよくある悩みです。特にWordPressではサイト内に多くのCSSファイルがあるため、優先順位に気をつけないと、せっかく記述したコードが反映されません。以下、その仕組みと対策を簡単に説明します。

スタイル指定時はCSSセレクタの優先順位に注意

WordPressのテーマをカスタマイズするときにstyle.cssのスタイルを変更しますが、うまくいかない方も少なくないようです。

特に、子テーマのstyle.cssに新たなスタイルを記述して親テーマのstyle.cssの定義を上書きしているのに、その変更がうまく反映されないという話をよく聞きます。

その場合、CSSセレクタの優先順位を確認しましょう。

たとえば、子テーマのstyle.cssにスタイルを定義すれば親テーマのスタイルを上書きできるのは、

• 後から書いたスタイルが優先される

という優先順位によるものですが、次のようなCSSセレクタの優先順位にも注意が必要です。

• !important指定のあるスタイルが優先される
• classよりidに対するスタイルが優先される
• 詳細にセレクタ指定されたスタイルが優先される

「!important」はピンとくるかもしれないので説明しませんが、他の「idが優先」や「詳細指定が優先」は、おさえておきましょう。自分が指定したスタイルが反映されない場合、

style.cssの中で

「idに対してスタイルが指定されていた」
「詳細なセレクタに対してスタイルが指定されていた」

が原因になっていることが考えられます。

以下に事例を紹介します。

Twenty Twelveで個々の投稿を枠で囲む

たとえば、Twenty Twelveテーマで「投稿を1つずつ枠で囲みたい」とします。

個別投稿のHTML要素にCSSのborderを使って枠線を付けようと、ブラウザの「ソースの表示」メニューで個別投稿のHTMLソースを見てHTML要素を確認します。

<article id="post-287" class="post-287 post …略…">
<h1 class="entry-title">テスト投稿</a></h1>

<p>記事を枠で囲むためのテスト記事です。<br />
このように囲まれます。</p>
</article><!-- #post -->

個々の投稿がarticleで囲まれているので、articleタグに対して（またはpostクラスに対して）borderプロパティを指定しようと考えます。

article {
    padding:20px;
    border:solid 2px silver;
    border-radius:10px;
    background-color:Ivory;
    margin-top:30px;
    margin-bottom:30px;
}

これで良さそうですが、表示結果を見ると下の枠線だけが反映されていません。

「どこかで下の枠線（border-bottom）が指定されているのでは？」と推測して、元になっている親テーマなどのstyle.cssで「border-bottom」を検索するなどして調べていきます。

すると、上記の指定より詳細にセレクタが指定されたborder-bottomに対する次のようなスタイル指定が見つかります。

.site-content article {
border-bottom: 4px double #ededed;
…略…
}

「.site-contentのarticle」に対してスタイルが指定されているため、後からarticleに対して指定したオリジナルの枠線より優先されているのです。

そこで、この詳細指定にならって、セレクタを「article」から「.site-content article」に修正してみます。

.site-content article {
    padding:20px;
    border:solid 2px silver;
    border-radius:10px;
    background-color:Ivory;
    margin-top:30px;
    margin-bottom:30px;
}

今度は、下線も含めて記事が枠線で囲まれるようになります。

このように、style.cssなどに記述したCSSが反映されない場合、その指定より優先されるセレクタ指定が存在していることが考えられます。特に、次の2つについて思い当たることがないか確認してみましょう。

• classよりidに対するスタイルが優先される
• 詳細にセレクタ指定されたスタイルが優先される

優先度の数値化

上記の優先度は数値化することができます。まず、「style属性、id、class、要素（タグなど）」について、次のような優先度とします。

• style属性 --- 優先度A（最優先）
• id --- 優先度B
• class --- 優先度C
• 要素 --- 優先度D

それぞれについて個数を数えます。

 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

（http://www.w3.org/TR/CSS2/cascade.html#specificity　より引用）

数値の大きい方が優先されます。つまり、最も優先されるのは「1,0,0,0」の「style=""」です。

また、「0,0,1,3」（classが1つにタグ3つ）の「ul ol li.red」よりも「0,1,0,0」（idが1つ）の「#x34y」が優先されます。

わかりづらければ、「style属性、id、class、その他の要素」を「style.id.class.other」という形式で「1.0.0.0」や「0.0.1.3」のように計算して数値が大きい方が優先されると覚えておきましょう。