CSSのルールあれこれ

スタイルを決める方法には優先順序があることは誰でも知っていることでしょう。 そこで、もう一度セレクターの優先順序をおさらいして見ることにしました。 優先順位1番:CSSの中で「!important」と印をつけると、タグの style=”…” で指定するよりも優先度を上げる。こりゃまた絶対だ!頻繁には使わないけど、時々見かけますよね。
/* Assistive text */
.assistive-text {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
WordPressのテーマtowentyelevenのstyle.cssに出てきたものですが、class「.assistive-text」の絶対位置を指定しています。 優先順位2番:何と言ってもHTMLのタグにstyle=”…” で直接指定したものです。
<h2 style="color: #ff7a4b; text-shadow: 3px 3px 6px #ffd97c;">
あいうえお</h2>
h2のセレクタに、スタイルを直接書き込んでいます。ここでは文字色を#ff7a4bに、文字にシャドウを付けてます。リンクを禁止したHTMLを制作する場合この方法を取りますが、ここで指定したスタイルが全てに優先され、他の指定に影響されないので崩れる心配が有りません。楽天に掲載する会社案内PRなどがこの方法が指定されています。 優先順位3番:#id.classとういようにidとclassの間にスペースが入れないで、くっつけて指定すると強力だ。要するに.classよりidのほうが優先されるから当然と云えば当然だけど、同時指定してガンジガラメです。一意のidに出てくるclassということになる訳です。でも同じ指定があとで出てきたらそっちが優先されちゃうよ。 念のため、「#id.class」「#id_.class」は全然違いますよ! 「_」はスペースの意味です。 一意のidの中にある、即ち下位にある.classに適用されるのが「#id_.class」ですね。 #idの直下の.classだけ適用する「#id_>_.class」だとか(子供だけで孫以下は適用しない)、「#id,_.class」の間にカンマをいれて、どちらも並列で適用させるときなども、idが優先される訳ですね。 優先順位4番:classよりidが優先されることで、なんで~?なんてことよくありますよね。 .classで指定しても#idが優先されるからです。下の例はid123で赤字にして、class123で緑字にしてますが、idが優先なんで赤字になります。例え後ろに配置してもダメですね。
<p id=aka class=midori >文字のお色は?</p>
#aka{
color="#ff0000"
}
.midori{
color="#00ff00"
}
余計なことかも知れんけど、色は#RGBで並んでるんで、#ff0000は赤、#00ff00は緑になりますね。 優先順位5番:同じidやclass指定があった時、後に書かれた方が優先され有効になります。順番が大切で、下の例では
@import url(http://www.yyy.zzz/style.css);
@import "http://www.yyy.zzz/style.css";     /* CSS2以降 */
.class{ color: red; }
こうすれば、.class{ color: red; }が最後に書かれているから、上のStyle.cssで何と書かれていようが、最後の指定が上書きされて有効になります。 これを上手く使ってるのが、WordPressの子テーマです。Templateテーマのstyle.cssをイジらないで、新規style.cssに以下のように書くと書き加えられて方が後読みだから優先され、元々のstyle.cssに書かれている内容を無視します。要するに書き換えたのと同じ事になります。 <<<チョットコメント>>> こんな使い方があったのか!!
td + td {
border-left: 1px solid #ccc;
}
これは、td要素が複数並んでいれば、最初のセルを除く2番目以降のセルで左側に枠線が引かれる。 テーブル内の罫線のスタイルを指定するときに便利な使い方です。
%d人のブロガーが「いいね」をつけました。
%d人のブロガーが「いいね」をつけました。