質問: HTML/CSSでWebサイトを作っています。 ある要素の最初の孫要素にだけCSSスタイルを適用したいです。 first-of-childやfirst-of-typeセレクタが使えそうなので、試してみたのですが、上手くいきませんでした。以下にコードを示します。 ``` first second third ``` ``` .list a:first-of-type { background-color: gray; } ``` そしてこれが実行結果です。 ![実行結果](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/a9218b0fe9c6475a003868b07fa2c560.png) 最初の孫要素、つまりfirstだけに適用されることを期待していたのですが、どういうわけか全てのa要素に適用されてしまいました。 first-of-typeの対象としてaタグではなくliタグを指定すると、ちゃんと最初の要素にだけ適用されるようです。しかし、liタグではなくその中のaタグに適用させたいのです。 どうすれば問題を解消できますか? first-of-typeを使わずとも、目的を達成できる方法であれば、なんでも構いません。
回答: ``` .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`とやったら全部該当するのは仕様通りです。