ママのスキンケアのお悩みにおすすめアイテム

セレクタ―に"+"(プラス記号)を使い下記のようにCSSを記述しました。

p + p {
color: orange
}

下記の解説通り解釈すると<section>の後にある同じ階層にある3つのPタグの真ん中だけに”color:orange”が適用されるのではないでしょうか?

”+”(プラス記号)を使ったセレクタ―の使い方が自分の中でうまく解釈できません。
”~”(波ダッシュ? チルダ? 記号)を使ったセレクタ―の組み合わせとうまく整理できません。

”「~区切りだと後ろに続くもの」、「+区切りだとすぐ後ろだけ」というイメージですね。”とサイトに解説してありますが、一番下に記述したタグのように「+区切り」でもすぐ後ろだけがオレンジ色に変わるわけではありません。


どなたかわかりやすいように解説していただけないでしょうか? よろしくお願いいたします。



------------------------------------
あるサイトには以下のような説明があります。
https://saruwakakun.com/html-css/reference/selec …

◯ + ◯ {〜}

「+」で区切ると、同じ階層のすぐ隣(後ろ)の要素にのみCSSが適用されます。


使用例
(HTML)
<p>適用されない</p>
<p class="example">適用されない</p>
<p>適用される</p>
<p>適用されない</p>

(CSS)
.example + p {
/*.exampleのすぐ後のpタグに対して…*/
color: orange;
}


------------------------------------

https://saruwakakun.com/html-css/reference/selec …
「~」で区切ると同階層の後につづく要素に適用されます。
r
▼使用例

<p>適用されない</p>
<p class="example">適用されない</p>
<p>適用される</p>
<p>適用される</p>
.example ~ p {
color: orange;
}
/*.exampleの後のpタグに対して…*/

---------------------------------------------



<main>
<h1 class="ttl info">Title</h1>
<p>Hello, hello.</p>
<section>
<h1 class="ttl">Title</h1>
<p>Hello, hello.</p>

●<p>Hello, hello.</p>

<p>Hello, hello.</p>
</section>
</main>


(CSS)
p + p {
color:orange;
}

「(CSS)セレクタ―の組み合わせについて」の質問画像

A 回答 (1件)

><section>の後にある同じ階層にある3つのPタグの真ん中だけに”color:orange”が適用されるのではないでしょうか?


A,
いいえ、
p + pの場合だと、
Pの次P(次隣)がcolor:orangeになります!
真の隣なので、別のタグをを挟んだり順列だと無効になります。

<h1>title</h1>
<p>適用されない</p>
<p>前がPだから、次Pが適用される</p>
<p>前がPだから、次Pが適用される</p>
<p>前がPだから、次Pが適用される</p>

-----------
2個目だけにCSSで適用したいのなら、私なら、
h1 + p + p { color:orange;}

h1の 次Pの 次P って事です。

-----------

「~」でも、
:first-child
:nth-child(n)
からの応用でも可能ですが、貴方のスキルだと、まだ時期尚早でしょうから、
先に「+」を完璧に学習してからにしましょう。
頭で覚えるよりも、使って覚えた方が良いような気がします。

私は、「~」はまず利用しませんが、
「+」と「:first-child」は毎回のように利用します。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング