:nth-of-typeについて、正しく表示されない

Question

質問の前に...

まずは以下に試行錯誤の結果、自分が意図したものとなった結果のhtmlとcssとその表示画像を書きます。
その下に質問を書きます。

<h2 class="heading">NEWS</h2>
      <ul class="scroll-list">
        <li class="scroll-item">
          <a href="#">
            <time class="date" datetime="2015-08-23">2015.08.23 SUN</time>
            <span class="category news">NEWS</span>
            <span class="title">WORKSを更新しました。</span>
          </a>
        </li>
        <li class="scroll-item">
          <a href="#">
            <time class="date" datetime="2015-08-12">2015.08.12 WED</time>
            <span class="category">TOPIC</span>
            <span class="title">CSSでここまでできる！？ホントに使えるCSSセレクタ10選！</span>
          </a>
        </li>
        <li class="scroll-item">
          <a href="#">
            <time class="date" datetime="2015-08-04">2015.08.04 TUE</time>
            <span class="category news">NEWS</span>
            <span class="title">TOPICSを更新しました。</span>
          </a>
        </li>
        <li class="scroll-item">
          <a href="#">
            <time class="date" datetime="2015-07-25">2015.07.25 SAT</time>
            <span class="category">TOPIC</span>
            <span class="title">HTML/CSSコーディングと切っても切れないWebブラウザのシェア動向をチェックしよう</span>
          </a>
        </li>
        <li class="scroll-item">
          <a href="#">
            <time class="date" datetime="2015-07-09">2015.07.09 THU</time>
            <span class="category">TOPIC</span>
            <span class="title">HTML5の新しい属性で手軽にフォームバリデーション</span>
          </a>
        </li>
        <li class="scroll-item">
          <a href="#">
            <time class="date" datetime="2015-06-30">2015.06.30 TUE</time>
            <span class="category news">NEWS</span>
            <span class="title">WORKSを更新しました。</span>
          </a>
        </li>
      </ul>

.heading {
  padding: 10px 12px;
  background: url(../images/bg-slash.gif);
  letter-spacing: 1px;
  font-size: 1.6rem;
}

.scroll-list {
  list-style-type: none;
}
.scroll-list .scroll-item a {
  display: block;
  padding: 10px 15px;
  color: #333;
  font-size: 0;
  transition: background-color 0.1s;
}




/*質問したい箇所*/
.scroll-list .scroll-item:nth-of-type(even) a{
  background: url(../images/bg-slash.gif);
}
/*質問したい箇所*/


.scroll-item .date {
  display: inline-block;
  width: 19%;
  font-weight: 700;
  font-size: 1.0rem;
}
.scroll-item .category {
  display: inline-block;
  width: 8%;
  font-size: 1.0rem;
  color: white;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
}
.scroll-item .title {
  display: inline-block;
  width: 73%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 1.2rem;
  padding:0 15px;
}
.category {
  background-color: blue;
}
.category.news {
  background-color: red;
}

---

上記の**/質問したい箇所/と記してあるcssの部分についての質問です。**

上記のように書く前に自分は以下のように/質問したい箇所/を書いていまいした。

/*aのあとに:nthを持っていく*/
.scroll-list .scroll-item a:nth-of-type(even){
  background: url(../images/bg-slash.gif);
}

すると、上記のように自分が意図したような背景画像が適用されませんでした。
.scroll-list .scroll-item a:nth-of-type(even){
.scroll-list .scroll-item:nth-of-type(even) a{
にどうして違いがでるのかが調べてもよくわかりませんでした。
これが質問の1つです。

もう一つの質問

もう一つの質問は以下です。

/*mと:の間に半角スペースを開けた*/
ll-list .scroll-item :nth-of-type(even){
  background: url(../images/bg-slash.gif);
}

上記のようなcssにすると以下のように、背景が変わる場所が<span class="title"</span>のコンテンツ部分になってしまいました。
これの原因もいくら考えてもわからず、詰まってしまっています。

---

上記の2点について、回答していただけると幸いです。

mac 10.14.4
google chrome

Answer 1

:nth-of-typeは「同種の要素（divとかaとか）の中の何番目」という指定です。

.scroll-item a:nth-of-type(even)：.scroll-item 配下にあるa要素の偶数番目
.scroll-item:nth-of-type(even) a：.scroll-item の要素の偶数番目の配下にあるa要素

なので違いが出ます。

もう一つの質問

特に要素の指定もしていない状況で、偶数番目の要素があるのがspanのみなのでそこに適用されています。

【:nth-of-type() - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/:nth-of-type

Comments

[gunmed]

わかりやすい説明ありがとうございます。
１番目の質問で、違いはわかり、その後も考えたのですが、なぜ表示されないのかが理解できないのですが、どうでしょうか？

[kei344]

違いがわかったのでは。そこから何がわからなくなったのでしょうか。

[gunmed]

もう少し考えたら、解決しました。
ご丁寧にありがとうございました。