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

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

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

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

CSS

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

Q&A

解決済

1回答

272閲覧

nth-of-typeが適用できない

my4mu9rb6c

総合スコア1

HTML

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

CSS

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

1グッド

0クリップ

投稿2023/06/05 10:07

実現したいこと

以下のcccにcssを適用したい

前提

内容によりクラスを適用したい箇所が変動するため、特定のクラスにのみcssを適用したい

発生している問題・エラーメッセージ

特に無し

該当のソースコード

html

1<div class="wrapper"> 2 <div>aaa</div> 3 <div class="test">bbb</div> 4 <div class="test">ccc</div> 5 <div>ddd</div> 6</div> 7 8<style> 9.wrapper .test:last-of-type { 10 color: blue; 11} 12</style>

試したこと

順序を変えたりnth-childなどを試したが駄目だった

補足情報(FW/ツールのバージョンなど)

特に無し

Lhankor_Mhy👍を押しています

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

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

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

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

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

回答1

2

ベストアンサー

:nth-child(n) は「兄弟要素の中のn番目か」を指定するもので、:last-of-type「兄弟要素のグループの中でその種類の最後の要素」を指定するものなので、そのままの記載方法では「クラスの中の最後」を表すことが出来ません。

:nth-last-child(1 of .test) なら希望の指定になると思います。
(ブラウザのバージョンが古いと対応していない可能性もあります)
動くサンプル: https://jsfiddle.net/3q2j5fr6/


【:nth-child() - CSS: Cascading Style Sheets | MDN】
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

【"nth-child of" | Can I use... Support tables for HTML5, CSS3, etc】
https://caniuse.com/?search=nth-child%20of

【要素の指定にもう迷わない?:nth-child()のofフィルターを使ったラクラク要素指定法 | フロントエンドBlog | ミツエーリンクス】
https://www.mitsue.co.jp/knowledge/blog/frontend/202008/27_1110.html

投稿2023/06/05 10:33

kei344

総合スコア69248

Lhankor_Mhy, hatena19👍を押しています

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

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

このような回答には修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

回答へのコメント

my4mu9rb6c

2023/06/05 11:18

できました、ありがとうございます。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.69%

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

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

質問する

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

HTML

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

CSS

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