CSSセレクタのfirst-of-typeが妙な処理をする

Question

HTML/CSSでWebサイトを作っています。
ある要素の最初の孫要素にだけCSSスタイルを適用したいです。
first-of-childやfirst-of-typeセレクタが使えそうなので、試してみたのですが、上手くいきませんでした。以下にコードを示します。

<ol class="list">
  <li><a href="">first</a></li>
  <li><a href="">second</a></li>
  <li><a href="">third</a></li>
</ol>

.list a:first-of-type {
  background-color: gray;
}

そしてこれが実行結果です。

最初の孫要素、つまりfirstだけに適用されることを期待していたのですが、どういうわけか全てのa要素に適用されてしまいました。

first-of-typeの対象としてaタグではなくliタグを指定すると、ちゃんと最初の要素にだけ適用されるようです。しかし、liタグではなくその中のaタグに適用させたいのです。

どうすれば問題を解消できますか？
first-of-typeを使わずとも、目的を達成できる方法であれば、なんでも構いません。

Answer 1

こちらで確認したところちゃんと表示されました。
https://jsfiddle.net/f65w864v/

first-of-type サポート状況
http://caniuse.com/#search=first-of-type

もしかしたら他の指定で上書きしてしまっているのかもしれません。

Comments

[search_search]

すみません。間違えて質問文中のaとliを逆に書いてしまいました。
正しいCSSは

```
.list a:first-of-type {
background-color: gray;
}
```

になります。

[nnssn]

first-of-type疑似クラスは、同階層にある兄弟の中で最初の要素が対象になります。
もしひとつのliタグの中に複数のaタグが並んでいるならそれらは兄弟ですが、
今のaタグ同士の関係は言えばいとこみたいなもので、それぞれが階層内の
最初の要素になっています。

目的にあった指定はたぶん、こうではないでしょうか。

.list li:first-of-type a {
background-color: gray;
}

[search_search]

うまくいきました！ ありがとうございました。いとこなのに兄弟として指定されても効果はないですね。他のみなさんもありがとうございます。

Answer 2

期待通りに動作しない理由はnnssnさんの指摘通りだと思います。
解決法はいくつかありますが、どちらかといえば :first-child が要件に合っている気がしました。

.list>li:first-of-type>a:first-of-type {}
.list>li:first-child>a:first-child {}
.list>:first-child>:first-child {}

Re: search_search さん

Answer 3

.list li:first-child a{
  background-color: gray;
}

でできますよ。
.listの中にリスト要素を入れ子にする可能性があったりするなら

.list >li:first-child a{
  background-color: gray;
}

の方が安全かと思いますが。

:first-childや:first-of-type等の擬似クラスは、
同一階層に並列で記述されている兄弟要素に中での順番を指定するものなので、
今の構造で.list a:first-of-typeとか.list a:first-childとやったら全部該当するのは仕様通りです。

Answer 4

質問の内容をやってみましたが、おかしな所が見当たらないです。

<ol class="list">
  <li>
    <a href="">first</a>
    <a href="">first</a>
    <a href="">first</a>
    <a href="">first</a>
  </li>
  <li>
    <a href="">second</a>
    <a href="">first</a>
    <a href="">first</a>
    <a href="">first</a></li>
  <li>
    <a href="">third</a>
    <a href="">first</a>
    <a href="">first</a>
    <a href="">first</a></li>
</ol>

こういうhtmlでやってみたら、各liの中の最初のが選ばれているので、動作は正しいかと。
同じhtmlで最初のliの更に最初のaを指定したい場合は

.list li:first-child a:first-of-type {
  background-color: gray;
}

こんな感じでしょうか

.list li > *:first-child {
  background-color: gray;
}

//あるいは
.list li > :first-child {
  background-color: red;
}

aが各liに一つしか無いのが条件なら

.list li:first-child a {
  background-color: red;
}

これもイケると思います。

Answer 5

要はliタグに要素を指定出来れば
良いのですよね？

だったら

<li class="list2"><a href="">first</a> で、

liタグのfirstを直接指定して
灰色に出来ましたよ！

ただこれだと
背景が右にいっぱいまで伸びてしまうので
marginでもなんでもいいですので

背景色を文字の幅に合わせて
縮められる事をお勧めします。

Comments

[search_search]

すみません。間違えて質問文中のaとliを逆に書いてしまいました。
正しいCSSは
.list a:first-of-type {
background-color: gray;
}
になります。

後出しで申し訳ないのですが、classを直接指定しないやり方がいいです。すみません。

Answer 6

:first-childもしくは:nth-of-type(1)として下さい。

Comments

[search_search]

やってみましたが、上手くいきませんでした。。