寝付けないから今日はぺらぺらしゃべるべさ
4月初旬にセールで購入した「できるポケット Web制作必携 HTML&CSS全事典 改訂4版」というhtml/cssの本で後続兄弟結合子を知った
自サイトでは複数のイラストを載せているhtmlページの画像間の隙間を作るために、全部のイラストに隙間を空ける指定をして、そこに:first-childで一番上の画像だけ隙間を消していた。つまり、2つの指定を書き込んでいた。
➀.ebox img{margin-top:50px;}
➁.ebox img:first-child{margin-top: 0;}
（※実際のソースでは.ebox2と.ebox3も書かれていますがここでは省略しました）

そこに本で知った、「○○ ~ ○○」という後続兄弟結合子（名前がわかんないけど多分これ？）だと、一文で済む。
:is(.ebox ,.ebox2 ,.ebox3) img ~ img{margin-top: 50px;}

MDN Web Docs https://developer.mozilla.org/ja/docs/Web/CSS/Subsequent-sibling_combinator を見ると、使い道わからんってなるんだけど、本に書いてあった最初以外 太字にするのがわかりやすかった

.test li ~ li{color:シャープd89}

<ul class="test">
<li>あああああ</li>
<li>いいいいい</li>
<li>ううううう</li>
</ul>

と書くと、↓になる

（※シャープの部分はてがろぐでタグ化してしまうのでカタカナで書いています）
一番上の<li>あああああ</li>はピンク（シャープd89）になっていない。っていう。
個人的に20へぇだった
(　･∀･)つ〃∩ へぇ～へぇ～へぇ～
若い人に20へぇとか通じなさそう

#html_css