読者です 読者をやめる 読者になる 読者になる

けつあご日記

こんちは.菊地です.なんか浅ーいことをいろいろ書きます

優先度の同じCSSセレクタの優先度を水増し【なれない日記20160710】

なれない日記 CSS


今日はCSSの演習的にブログのCSSを少し直した.いくつか程度の低い学びを得たのでメモ.※一日分のメモをまとめて書いてしまうとタイトルで判別できなくなってしまい,あとで見つけづらいので今回から一日分でもテーマごとに違う記事にしている.雑記はその日の終わりに書くかな?

同じ優先度のセレクタが干渉するとき

記事タイトルの日付部分を,背景を黒,文字色を白に変えたかった.こんな感じに.

f:id:kichiku_kikuchi:20160710181147p:plain:w600

ということで以下のようにCSSを編集.

.date a{
   color: #fff;
   background: #000; 
   padding: 3px 7px 5px 7px; 
}

背景や余白はうまくいったが,文字色が変わらなかった.リンクの色と同じになっている.リンク(未訪問)を決めているのは以下の部分.

a:link {
color:#2e8b57;
font-style:normal;
text-decoration:none;
}

こちらが優先されてしまっているようだ.セレクタの優先度を計算すると,

.data a
= クラス + 要素 = 0010 + 0001 = 0011
a:link
= 要素 + 擬似クラス = 0001 + 0010 = 0011

なので,同じ優先度になる.ということはCSS中で先に書かれたほうが優先される.と思ったのだが,.date aの方を先に書いても優先されない...(※追記:逆だった!あとに書かれたほうが優先されるのだった...アホ...)

優先度の水増し

!important を多用するのは良くないらしいので,他の方法でやりたい.ということで優先度を水増し(適切な用語がありそうだ...)してみることにした.つまりより詳しいセレクタにする.該当箇所のHTMLは以下のとおり.

<a href="http://www.ketsuago.com/entries/2016/07/10" rel="nofollow"> 中略 </a>

href属性を持つので属性セレクタをつけてみる.属性セレクタ分だけ点数が上がるので優先順位が変わるはずだ.属性セレクタは多分0010点かな.
CSSセレクタの優先順位の計算方法 - Qiita
こちらでは擬似クラスとして扱われているっぽいが,それは正しくないような気がする???いずれにせよ0010点だと思う.

.date a[href]{
   color: #fff;
   background: #000; 
   padding: 3px 7px 5px 7px; 
}

これでうまくいった.似たようなことをして記事タイトルの文字色も変えた.



↓アフィカスリンク

CSSシークレット ―47のテクニックでCSSを自在に操る

CSSシークレット ―47のテクニックでCSSを自在に操る