ホームへ

CSSを優先させる・優先度を上げる方法

CSSが効かない原因の一つに「CSSの優先度が負けている」というものがあります。

「じゃあどうやって優先度を上げるの!?」

CSSを優先させる・CSSの優先度を上げる方法を解説します。

【方法1】セレクタを追加する

条件を厳しくする、限定的にするほど優先順位が上がります。

【方法1-1】htmlタグ(要素型セレクタ)を追加する

<style>
.example{
    margin: 0;
}
</style>
<div><a href="#" class="example">リンク</a></div>

<style>
a.example{
    margin: 0;
}
</style>
<div><a href="#" class="example">リンク</a></div>
<style>
div .example{
    margin: 0;
}
</style>
<div><a href="#" class="example">リンク</a></div>

自分自身のhtmlタグや親要素(先祖要素)のhtmlタグを追加すると優先順位が上がります。

当然自身がspanなら「a.example」は効きませんし、同様に親がpなら「div .example」は効かないので注意しましょう。

【方法1-2】classを追加する

<style>
.example{
    margin: 0;
}
</style>
<div class="linkwrap"><a href="#" class="example link">リンク</a></div>

<style>
.link.example{
    margin: 0;
}
</style>
<div class="linkwrap"><a href="#" class="example link">リンク</a></div>
<style>
.linkwrap .example{
    margin: 0;
}
</style>
<div class="linkwrap"><a href="#" class="example link">リンク</a></div>

自分自身や親要素(先祖要素)のclassを追加するとhtmlタグより優先順位が上がります。

classは同じページに複数回同じものを使えるとはいえhtmlタグよりは限定的になるからです。

:hover,:last-childなど疑似クラスと呼ばれるものもclassと同じ扱いになります。

【方法1-3】idを追加する

<style>
.example{
    margin: 0;
}
</style>
<div id="wrap"><a href="#" class="example">リンク</a></div>

<style>
#wrap .example{
    margin: 0;
}
</style>
<div id="wrap"><a href="#" class="example">リンク</a></div>

自分自身や親要素(先祖要素)のidを追加するとclassより優先順位が上がります。

idは同じページに1回しか使えずclassより限定的になるからです。

htmlタグ、class、idを複数回使うとさらに優先順位を上げることができます。

詳しくはこちら↓

【方法2】後述する

CSSセレクタのhtmlタグ、class、idそれぞれの数が同じ(点数が同じ)ときは後述されている方が優先されます。

<style>
a.example{
    /*効かない*/margin: 0;
}
div .example{
    /*優先*/margin: 10px;
}
</style>
<div><a href="#" class="example">リンク</a></div>

先述されているほうを優先させたければ、順番を入れ替えて後述にするか、先に紹介したようにclassやidなどを追加して優先順位を上げましょう。

【方法3】style属性を書く

特定のhtmlタグだけにCSSを指定したいときはstyle属性を使って指定しましょう。

後述する「!important」以外では上書きできないほど高い優先順位となります。

<div><a href="#" class="example" style="margin: 0;">リンク</a></div>

style属性で指定されるとCSSファイルで修正するのが難しくなるため、安易に使わず最低限だけ使いましょう。

style属性の使い方はこちら↓

【方法4】!importantを使う

「!important」はCSSを最優先にさせる最強のものです。

CSSセレクタ単位ではなく、CSS単位で指定します。

<style>
a.example{
    /*最優先*/margin: 0 !important;
}
div .example{
    /*効かない*/margin: 10px;
}
</style>
<div><a href="#" class="example">リンク</a></div>

ただし、importantは安易に使ってしまうとかえってやっかいなヤツになります。

基本的には先述した方法で優先順位を上げ、上記の方法では優先順位を上げられないときだけ使いましょう。

【まとめ】CSSを優先させる方法

【方法1】セレクタを追加する

  • htmlタグ(要素型セレクタ)を追加する
  • classを追加する
  • idを追加する

【方法2】後述する

【方法3】style属性を書く

【方法4】!importantを使う

以上、CSSを優先させる・優先度を上げる方法でした。

マンガで読める関連記事