WordPress

style.cssに書いたCSSが反映されない? CSSの優先順位のお話

CSSは、よりHTML内の該当要素に近い位置に書かれたCSSが優先される仕様。
スタイルを記述した位置によっては、他の位置に書いてあるスタイルに打ち消されてしまうことがあります。

CSS優先度は、ざっくり説明するとこんなイメージ。
css-layer

例えばstyle.css(外部CSS)の中に、同じ要素に対するスタイルの指定がある場合、より下(後ろ)のスタイルが優先になります。それだけでなく、より細かくセレクタ(要素)を指定したスタイルが優先です。
さらに、外部CSSより<head>内に書かれたCSSが優先。<head>中でも下に書かれているCSSが優先に。

うわぁー! ややっこしい!!

優先度低 優先度中 優先度高
外部css HTML内に<style>〜</style>で記述 要素に直書き

CSSを書く3つの方法と優先順位について、具体的に説明させていただきますと……。

全体を通して

外部CSSと<head>内<style>〜</style>での、文法は

セレクタ(要素){ プロパティ:値; }

要素に直書きする場合は、
style=”プロパティ:値;”
となります。直書きすることで要素を指定しているため、セレクタの指定は必要ありません。

後ろに書いたCSSが優先

同じセレクタ(要素)に対するスタイルが複数あった場合は、後ろに書いたCSSが優先になります。

20行目では、画像.exの枠線はナシと指定してますが、後ろに書いたCSSが優先になるため「40行目では1ピクセルのやや濃いめのグレーの枠を付けて!」という指定がイキになります。

セレクタを細かく指定したCSSが優先

同じimg.exにスタイルを設定したい場合でも、

という3つの指定があったら、

が優先されます。

ID=”contents”の中にある、class=”entry”の中の<img src=”画像のパス” class=”ex” alt=”画像の説明”>に、薄いグレーの10ピクセルの枠線をつけます。

という指定です。

例えばclass=”entry”の外にある<img src=”画像のパス” class=”ex” alt=”画像の説明”>には、一番上のCSSが適応されます。

C.外部CSS(優先度低)

外部CSSは<head>〜</head>の間に、linkタグを使ってスタイルシートを読み込む方法です。

メンテナンスのことを考えると外部CSSを使うのが好ましいのですが、外部CSSは一番優先順位が低いです。

WordPressでは、プラグインが独自CSSを<head>〜</head>の間に挿入することがあり、外部CSSでスタイルを当てようとしても、効かないことが……。

B.<style>〜</style>で記述した例(優先度中)

<head>〜</head>の間に書かれたCSSは、外部CSSよりも優先されます。

A.要素に直書きしたCSS(優先度高)

紹介した記述方法の中では、要素に直書きした場合が一番優先度が高くなります。

変えたい要素に対するcssが、HTMLに<style>〜</style>で記述されていたり、要素に直書きされていたりすると、外部CSSにスタイルを書いても打ち消されてしまいます。

では、直書きされていた場合はどうしようもないのかというと……ちゃんと解決法があります。

S.!importantのついたCSS(最優先)

すべてを打ち破る必殺技、!importantにおまかせあれ。
外部CSSに記述されたcssだとしても、!importantがついている要素が最優先されます。

外部CSSの中にある最優先したいスタイルに!importantをつけると…

!important;のついているプロパティが優先されます。

優先順位のまとめ

css-layer02
最優先:!important;
優先度高:要素に直書き
優先度中:<style>〜</style>
優先度低:外部CSSで指定
の順で優先されます。

CSSの優先順位の関係を理解した上でカスタマイズをすると、style.cssの内容が反映されない〜〜と、つまづく回数が減るとおもいます。
ちょっとややっこしいですが、試しているうちにわかってくるはずです。

というわけで、カスタマイズするためのcssを書き込む際は、style.cssの一番したにコピペするのが確実。

もし効かなかったら、セレクタを細かく指定してみてください。

それでは楽しいブログライフを♪

Category : WordPress

メルマガはじめました

WordPressでのブログ運営に興味のあるあなたへ♡

プチマガでは、井戸端会議のおばさん風味の軽〜いノリで、
「今週のblanc note.(WordPress無料テーマblanc noteのアップデート情報)」
「\これであなたも耳年増/ブログよもやまばなし」
「メルマガっておいしいの?」
など、ゆる〜〜く発信しています。

メンバー特典 blanc note.のテンプレートも鋭意開発中。 ほぼ週1配信です〜。

ご登録はこちらから

この記事がお気に召したら、いいね!お願いします♪

最新情報をお届けします

Web / Graphic Designer 丸山るこ

大人カワイイデザイン&イラストが得意なデザイナー、丸山るこです。 想いを持った、起業女性・スモールビジネスを応援しています。 様々な業種の案件に関わってきましたので、女性向けサービスからビジネスライクなデザインまで幅広く対応できます。 現在は、起業を考え半常駐ワークに励んでいます。一児の母。