CSSで3番目以降を:nth-child(n + 3)で書く

　CSS には :nth-child() - CSS: Cascading Style Sheets | MDN という疑似クラスがあって、何番目の兄弟かを指定できる。 :nth-child(3) とかやると 3番目、みたいな感じで、 1 始まりになっている。

li:nth-child(3) {
  background-color: gold;
  font-size: 2em;
}

• 恵比寿
• 大黒天
• 福禄寿
• 毘沙門天
• 布袋
• 寿老人
• 弁財天

　これの書き方に :nth-child(2n + 1) みたいなものがあって、こうすると奇数番目だけ指定できる。これは 2n だけじゃなくて、たとえば 5n にすれば 5個おきになる。

li:nth-child(2n + 1) {
  background-color: gold;
  font-size: 2em;
}

• 恵比寿
• 大黒天
• 福禄寿
• 毘沙門天
• 布袋
• 寿老人
• 弁財天

　そして :nth-child(n + 3) とかすると、 1個おき (3個オフセット) ということで、 3番目以降全部を指定できる。

li:nth-child(n + 3) {
  background-color: gold;
  font-size: 2em;
}

• 恵比寿
• 大黒天
• 福禄寿
• 毘沙門天
• 布袋
• 寿老人
• 弁財天

　これは面白くて、 :nth-child(-n + 3) とか書くと 1〜3番目だけを指定できる (n が 0 から増えていくので、マイナスをつけておくと、 3 からどんどん減っていく、という感じ)。

li:nth-child(-n + 3) {
  background-color: gold;
  font-size: 2em;
}

• 恵比寿
• 大黒天
• 福禄寿
• 毘沙門天
• 布袋
• 寿老人
• 弁財天

　注意として、この場合は最初の 3つになるので、 n + 3 の結果を反転させたい場合は -n + 2 と書く必要がある (例でいうと n + 3 でも -n + 3 でも福禄寿が大きい)。

　ブラウザがこういうのをどうやって計算してるのか (特に n とか書いたときいつまで計算したらいいかどう判断してるのかとか) が気になる。

■

　日常で目にするフレーズや耳にする音からゲームの内容やテレビ番組の効果音を思い出すことがよくあって、そのたびにそれがどれくらいしっかり思い出せるか確かめてみるのが趣味なので、そういう場面で暇だったら記憶を辿ってみている。

　今日は物を触ったときに出た音がゼルダの伝説ブレスオブザワイルドの操作案内のダイアログが出るときの音にそっくりで、なんだっけこれ→あのダイアログか、とちゃんと具体的に思い出すことができた。

　「ぐるりを」という言い回しを聞くとたいてい思い出すゴルゴ13のシーン(教会で祈る標的を教会の外から狙撃する直前)があるのだけど、これは具体的にどの話かまでは覚えていない、しかしそのシーンのあたりのセリフがかなりの七五調で感動した旨をツイートしていることは覚えているので、検索したらタイトルはわかりそう。

　追記: あった。

ゴルゴ13(111)の"黒い通信"やばくて、2ページの間に"何を心配してるんだ、マードック？""どうしても、あの情報が気になって……""あんなのは偽情報に決まってる！どこから狙撃できるというんだ""すみません……外の様子を、見てきます……"と57557557577575が登場している

— ニムトフテ (@hogextend) 2020年9月27日

■

chrome.google.com

　UserCSS の Chrome 拡張機能を Manifest V3 移行の p-r をマージしてリリースした*1*2。 Manifest V2 support timeline - Chrome Developers の話題。 localStorage から chrome.storage にデータを移行するバージョンを挟んで*3、 Chrome ウェブストアのデベロッパーダッシュボードでバージョンの分布を見て、皆さまのバージョンが全部上がっていそうなのを確認してリリースできた*4。こういう感じでやっていけることはちゃんとわかったので、別の Chrome 拡張機能もだんだんやっていきたい。

*1:つくっておいたのでコミットを分けて動くのを見直してマージした

*2:バージョンは v0.4.0

*3:Chrome拡張機能をManifestV3に上げる活動 - hogashi.*

*4:まだ10人くらいしか使ってないので難易度が低い

はてなブログおみくじ2014

はてなブログおみくじ2014

　超ド級ロマンチック今年もよろしくおねがいします。

今日の落書き

　before 疑似要素でブログを書くとどうなるのか、と思ったけど、改行ができないことがわかってきた。それ以外は見た感じは変化がなくて、カーソルを持ってくると文字列選択ができないことがわかるくらいで、素朴に文字をどんどん書いていくだけなら before でもやっていけそう。どういうメリットがあるかは不明。
　この文章も before に入っています。

<span class="hogashi-blog-w-before">ここに本文</span>

<style>
.hogashi-blog-w-before {
  display: none;
}
</style>

<script>
const style = Array.from(document.querySelectorAll('span.hogashi-blog-w-before')).map((span, i) => {
  const id = `hogashi-blog-w-before-${i}`;
  span.insertAdjacentHTML('beforebegin', `<span id="${id}"></span>`);
  return `#${id}:before { content: "${span.innerText}"; }`
}).join('\n');
document.querySelector('body').insertAdjacentHTML('beforeend', `<style>${style}</style>`);
</script>

■

　映像と音のズレをクライアント側で好きに修正できる仕組みがほしいな、と色んな配信映像を見てて思うことが多い。 OBS とかで頑張ったらできたりするんだろうか。

■

　ゼルダの伝説ブレスオブザワイルドの DLC のサブクエストみたいなのと、 VRChat とを、それぞれ数時間くらいやった土曜日だった。どちらもどうやっていくといいのかがかなり難しい。 Analogue Pocket も届いていたり、今日は夜ご飯を食べそこねていたりと、久しぶりに娯楽に力が注がれ始めている。