記事の本文だけリストタグの間隔を広くするCSS

質問

1.
2.
3.
や
●
●
●

のようなリストタグ同士の間隔を広くしたいのですが、
cssでliにmarginの設定をすると、
ブログのカテゴリもリストタグでできているので、そっちも影響しちゃいますよね。

そこで、記事本文の中のリストタグだけにCSSを適用したくて、
たとえば記事本文を、<div class="kiji"> 本文 </div>で囲んで、
CSSで、
.kiji li {
margin: 3em 1em;
}
としても何も変わらないんです。
どうしたらよいのでしょうか。
よろしくお願いします。

回答No.2

DrFell · ベストアンサー

返事がないので、勝手に想像してみます。

質問文の記載通りだとすると、
htmlの該当部分 -------------------------
<div class="kiji">
<p>本文</p>
<ol>
<li>リスト</li><li>リスト</li><li>リスト</li>
</ol>
<ul>
<li>リスト</li><li>リスト</li><li>リスト</li>
</ul>
</div>
cssの該当部分 --------------------------
.kiji li {
margin: 3em 1em;
}
となる筈。これだけだとおそらくリスト要素の間隔が指定どうり広くなる筈。

問題になるのが、ブログであること。テンプレ作者はおそらくkijiクラスを作らなくても記事本文と他のカラムの要素（カテゴリーやカレンダー等）を区別するクラスやIDを作っている筈。おそらく、わざわざkijiクラスを作らなくても、それらを利用できると思われるし、利用するべきです。他のliへの指定があり、、今回作られたkijiクラスへの指定と重複してしまっていると思われます。

重複したときどちらを優先するかは、詳細度で決まります。詳細度はid>class>通常のタグ（liやp、hnなど）順で強く、強いものの数比較でどちらを表示に採用するかがきまります。今回の
.kiji li{～}
はブログで考えたときには、かなり弱い指定になりますので、おそらく、他の指定に負けていると思われます。

どうしたらいいのかは、以上を踏まえて、他のliへの指定に該当箇所が詳細度で勝つようにすればいいのです。手順は
1.他の指定がどうなっているのか、その詳細度はどのようになっているのかを把握し
2.もし、重複しているところが、目的の箇所へだけの指定なら、そちらを書き換える。
2.違えは、kiji li の親要素を利用して、必要なだけ詳細度を上げる。
3.もし、がんばっても、同点にしかならなければ、記述を後述する。（同点の場合は後ろに書かれたものが採用されます）

で、対応できると思います。該当ソースなしで、アドバイスできることはこの程度です。セレクタの優先順位はｃｓｓの基本中の基本です。場当たりてきに、ｃｓｓをはめていくやり方では対応できませんので、ソースが出せないなら、ｃｓｓのセレクタと詳細度を勉強してください。（ご自身のurlをだすことは、このQ&Aサイトでは、禁じられています。）

お礼

IDにしたり!importantをつけたりしましたがうまくいきませんでした。
わざわざkijiにしている理由は、
もともとあるクラスは、トップページと個別記事に指定されていて、
トップページにはリストタグで最新記事リストがあり、
それの間隔は広げたくなかったからです。

少し汚いソースになるんですが、トップページと個別記事のクラスを
分けることで解決しました。（内容はリストタグ以外同じ）

回答No.1

DrFell

おっしゃられている手段で変わる筈です。

再現できる、最低限のソースをhtmlとｃｓｓ両方おしえて頂けますか？
どちらかが、間違えていると思いますので。