CSSで指定方法が分からない

Question

お世話になっております。

DreamWeaverCCを使用しております。

今現在

#event-news,
#all-news {
  width: 100%;
：略
      #event-news .news-item dd .place,
      #all-news .news-item dd .place {
        display: block;
        float: left;
        width: 120px;
        margin-right: 5px;
        margin-bottom: 5px; 
		}

とあり
.placeの代わりにdtでdayを追加したいと思って

      #all-news .news-item dt .day {
		  font-size: 2px;
		}

と上記cssの下部に追加したのでしたが駄目でした……

      .day {font-size:2px;}

と指定すれば効くのですが他にdayとのクラス作成してしまうとバッティングしてしますので
指定方法をご助力頂けないでしょうか？

使用しているHTMLは下記の通りです……

       <section id="all-news" class="news-contents">
：略
       </section>
       <section id="event-news" class="news-contents">
          <h2 class="area-header">発売日</h2>
            <dl class="news-item">
				<dt>羊羹<span class="day">2018/07/10</span></dt>
：略

お忙しい所大変申し訳無いのですが上記お問い合わせいたします。

Comments

[m.ts10806]

HTMLにはid=all-newsと指定されている要素がないですが、どこにあるのでしょうか。

[moitaro]

元ソースにはあるのですが今回は不要かと思い削除したのですがそのような疑問を持たれる方もいらっしゃるかとhtmlにも表記しました。

[m.ts10806]

追記ありがとうございます。おそらく私の回答の通りかと思います。

[moitaro]

mts10806様ありがとうございます。仰る通りでした。本当に助かりましたm(_ _)m

Answer 1

 #all-news .news-item dt .day {

html上は.dayは#all-newsの配下にないので下記(event-news)では？

#event-news .news-item dt .day {

Comments

[moitaro]

mts10806様
ありがとうございます。
仰る通りでした。

助かりました。本当にありがとうございました。

[m.ts10806]

解決できたようで何よりです。
階層が深くなると結構間違いやすくなるので、実際のhtmlと整合性がとれているか見比べる癖をつけると間違いが減りますよ。

Answer 2

.day {font-size:2px;} で反映されるのであれば、#all-news .news-item dt .dayも指定が間違っているとは思えないので反映されるはずですね。

対応できることとしては
・別の箇所で上書きされている可能性
Chromeなどのデベロッパーツールを活用して、他のCSSの記述が反映されていないかご確認ください

・修正内容と確認箇所が違う可能性
#all-news .news-item dt .day を記述して、画面上は#event-newsの方を確認しにいっていないでしょうか？

Answer 3

「発売日」ならクラス名を.releaseにするとか。
汎用で引っかかりそうなら極端な話hatsubaibiだっていいと思いますよー

あと、CSSはできる限り単純なセレクタに指定しましょう。
規模によって複雑になってきますが、メンテナンス時に困るので。。。