書式上の注意点 CSS

WordPressでの注意点。
cssファイルの直接編集は極力避けた方がいい。
カスタマイズによる追加CSSを利用する。
テーマの更新の時にどうなるかですよね。
この追加CSSという方法ですが、headerタグ内の最下方に継ぎ足すという仕組みになっています。

とりあえず気になるのは、marginとfont-sizeとcolor(文字色)でした。

スタイルシートではタグっぽいのを、要素とかセレクタとかいいます。
今回はセレクタということにしますか、あってるかな?

複数のセレクタで指定する

h1, h2, h3 {
color: black;
}
「,」が区切り文字です。

h1, h2, h3, {color: black;}
「h3,」などと余計な区切りを入れると動作しません。

クラスを指定する

h1.entry-title, h2.entry-title {
color: black;
}
この場合はentry-titleクラスを指定しました。
<h1 class="entry-title">などとなっている場合です。

「h1 .entry-title」のようにタグとクラス名の間に半角スペースを入れていけない。

セレクタ間に半角スペースが入る場合は?

半角スペースを入れるとその下のセレクタという意味になる。
子セレクタのみにあらず孫以下のセレクタも対象かな。
詳細は後日調べておきます。

タグ内でクラス名を複数指定する

<h1 class="a b">

HTMLソースから読み解く際の注意点。
上のような記述の場合、クラス指定が二つ同時にあるという意味だ。
aクラスでもありbクラスでもある。
半角スペースが区切り文字になる。

追加しても変化しない場合は

いじってる人はわかると思うけど、実際には追加しても何も変わらない場合が多々ある。
この場合、一応次の順で試すとよろしいかと思います。

①セレクタを極力正確に指定する。
.entry-titleよりは、「h1.entry-title, h2.entry-title」のように細かく指定します。

②ずばり!importantを使う。
どういじっても動かない場合があります。
でも便利なものがありました、強力に上書きします。
h1.entry-title {
color: black !important;
}
ただ意図しない他所へのデザイン影響することは考えられます。
他のページを実際に見て、問題ないかチェックしましょう。

③!importantでうまくいかない場合もありますね。
指定の方法を細やかにしないといけない場合がある。
つまり、!importantプラス細かい指定。
もしかしたらインラインでないとダメというパターンがあるのかな?
できるだけ直近のセレクタで細かく具体的に指定しましょう。

これで動かない場合は余計な記述が入っているとかスペースの使い方が間違ってるとかを疑ったほうがいい。

追記

!importantは私も知らなかったんですね、昔の話なんで。
これ最後の項目になってしまいましたが、とても重要です。
WordPressのCSS編集は!importantなくしては進みません。
これは、誰でもカスタマイズできるというWordPressの仕様と、関係あるのではと予想します。