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を複数回使うとさらに優先順位を上げることができます。
詳しくはこちら↓
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
【方法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を優先させる・優先度を上げる方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
