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

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

ただいまの
回答率

87.89%

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

解決済

回答 6

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,144

score 187

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を使わずとも、目的を達成できる方法であれば、なんでも構いません。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 6

checkベストアンサー

+2

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/17 06:53

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

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

    になります。

    キャンセル

  • 2016/06/17 07:14 編集

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

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

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

    キャンセル

  • 2016/06/18 00:16

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/17 06:55

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

    キャンセル

0

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

だったら
<li class="list2"><a href="">first</a>
で、

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/17 06:54

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

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

    キャンセル

0

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

<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;
}


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

.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とやったら全部該当するのは仕様通りです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

期待通りに動作しない理由は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 さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.89%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る