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

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

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

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

CSS

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

Q&A

解決済

1回答

1079閲覧

:last-of-typeが機能してない!?

2001Y

総合スコア83

CSS3

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

CSS

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

0グッド

0クリップ

投稿2017/07/23 08:26

編集2017/07/23 13:02

たまにわからなくなるのですが、.finish-comment span:last-of-typeのような指定ではダメなのでしょうか?
色々調べてもイマイチパッとしないので、具体的に教えていただけると嬉しいです。

イメージ説明
JSFiddle

#追記
.finish-comment内に、spanは二つあり、その前後をそれぞれ装飾したいと考えています。ですが、:last-of-typeでしてしても、最初のspanまで適応されてしまうのですが、どういうことなのか教えていただきたいということです。

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

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

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

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

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

kei344

2017/07/23 09:04

「ダメ」とは?何がしたくて何を問題と思っているのかを具体的に記述されてはいかがでしょうか。
2001Y

2017/07/23 09:45

.finish-comment内に、spanは二つあり、その前後をそれぞれ装飾したいと考えています。ですが、:last-of-typeでしてしても、最初のspanまで適応されてしまうのですが、どういうことなのか教えていただきたいということです。
kei344

2017/07/23 10:30

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文を編集することをお勧めします。
2001Y

2017/07/23 13:02

ありがとうございます。
guest

回答1

0

ベストアンサー

:last-of-typeの仕様は以下の通りのため、

:last-of-type は、その親要素の中で特定のタイプを持つ子要素の内、最後のものにマッチします。

https://developer.mozilla.org/ja/docs/Web/CSS/:last-of-type

設問の場合、一つ目はaタグが親要素となり、その一番最後のspanタグとして、CSSが適用される。
二つ目はdivタグが親要素となり、その一番最後のspanタグとしてCSSが適用されます。

以下のようにすることで、期待される結果になると思います。

css

1.finish-comment > span:last-of-type { (略) } 2// もしくは 3.finish-comment span:last-child { (略) }

投稿2017/07/23 12:02

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

2001Y

2017/07/23 13:04

なるほどありがとうございます。 上のspanについても記述したいので、全てchildで書いた方が良さそうですね。 非常に曖昧な理解だったようで丁寧にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問