質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

6回答

5119閲覧

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

search_search

総合スコア187

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/06/16 20:46

編集2016/06/16 21:50

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

html

1<ol class="list"> 2 <li><a href="">first</a></li> 3 <li><a href="">second</a></li> 4 <li><a href="">third</a></li> 5</ol>

css

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

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

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答6

0

ベストアンサー

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

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

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

投稿2016/06/16 21:32

nnssn

総合スコア1221

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

search_search

2016/06/16 21:53

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

2016/06/16 22:14 編集

first-of-type疑似クラスは、同階層にある兄弟の中で最初の要素が対象になります。 もしひとつのliタグの中に複数のaタグが並んでいるならそれらは兄弟ですが、 今のaタグ同士の関係は言えばいとこみたいなもので、それぞれが階層内の 最初の要素になっています。 目的にあった指定はたぶん、こうではないでしょうか。 .list li:first-of-type a { background-color: gray; }
search_search

2016/06/17 15:16

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

0

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

CSS

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

Re: search_search さん

投稿2016/06/17 05:05

編集2016/06/17 05:07
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

CSS

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

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

CSS

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

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

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

投稿2016/06/17 04:54

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

html

1<ol class="list"> 2 <li> 3 <a href="">first</a> 4 <a href="">first</a> 5 <a href="">first</a> 6 <a href="">first</a> 7 </li> 8 <li> 9 <a href="">second</a> 10 <a href="">first</a> 11 <a href="">first</a> 12 <a href="">first</a></li> 13 <li> 14 <a href="">third</a> 15 <a href="">first</a> 16 <a href="">first</a> 17 <a href="">first</a></li> 18</ol>

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

css

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

こんな感じでしょうか

css

1.list li > *:first-child { 2 background-color: gray; 3} 4 5//あるいは 6.list li > :first-child { 7 background-color: red; 8}

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

css

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

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

投稿2016/06/17 01:12

hidekichi

総合スコア366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

だったら

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

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

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

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

投稿2016/06/16 21:18

Susanoo2442

総合スコア153

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

search_search

2016/06/16 21:54

すみません。間違えて質問文中のaとliを逆に書いてしまいました。 正しいCSSは .list a:first-of-type { background-color: gray; } になります。 後出しで申し訳ないのですが、classを直接指定しないやり方がいいです。すみません。
guest

0

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

投稿2016/06/16 21:12

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

search_search

2016/06/16 21:55

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問