Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Mo...
Search
petamoriken / 森建
November 08, 2024
Programming
0
240
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
福岡フロントエンド勉強会 #2
https://connpass.com/event/333108/
petamoriken / 森建
November 08, 2024
Tweet
Share
More Decks by petamoriken / 森建
See All by petamoriken / 森建
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.4k
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
520
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
4
2.1k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
560
DOM Observable
petamoriken
1
260
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
690
Contributing to Deno is fun!
petamoriken
0
370
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.9k
linaria: Zero-Runtime CSS in JS
petamoriken
2
2.3k
Other Decks in Programming
See All in Programming
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
440
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
600
生成AI時代のコンポーネントライブラリの作り方
touyou
1
240
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
140
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.4k
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
500
技術同人誌をMCP Serverにしてみた
74th
1
660
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
400
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
A designer walks into a library…
pauljervisheath
207
24k
Side Projects
sachag
455
42k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Language of Interfaces
destraynor
158
25k
Statistics for Hackers
jakevdp
799
220k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
For a Future-Friendly Web
brad_frost
179
9.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Transcript
ふかぼれ! CSS セレクターモジュール 福岡フロントエンド勉強会 #2 pixiv Inc. 森内建太 petamoriken 2024.11.8
2 自己紹介 • Web エンジニア • Deno コントリビューター • ECMAScript や Web 標準 を追うのが好き petamoriken カスタマーオペレーション
&セーフティ本部 オペレーション開発部
3
4 © ンバヂ https://x.com/nbaji9 https://www.nicovideo.jp/watch/sm42515407
JavaScript 好きですが 今日は CSS の話をします 5
6 CSS で(HTML の)要素選択に使われるパターンのこと 以下の例だと ul や ul > li がそれにあたる CSS セレクター
7 ※ 以降見やすくするために DOM ツリーを AA で表します
8 単純セレクター(Simple Selector) 特定要素にマッチ
9 全称セレクター(Universal Selector) 全ての要素にマッチ
10 セレクターリスト 複数のセレクターをまとめて 記述できる
結合子などを使った複雑セレクター 11
12 子孫結合子(Descendant Combinator) 前のセレクターの子孫要素に マッチ
13 子結合子(Child Combinator) 前のセレクターの子要素に マッチ
14 (余談)@scope • 子孫結合子、子結合子だと子孫要素の途中で打ち切る ことが出来ない • @scope で途中の子孫要素までで打ち切ることができる
15 後続兄弟結合子(Subsequent-sibling Combinator) 前のセレクターの後ろの兄弟 要素にマッチ
16 次兄弟結合子(Next-sibling Combinator) 前のセレクターの直後の兄弟 要素にマッチ
17 :not() セレクターに該当しない要素に マッチ 引数を複数取れる :not(P, Q) と :not(P):not(Q) は等価
18 :is() と :where() セレクターリストを一つに まとめられる A B, D B とだいたい等価 不正なセレクターが混ざっても 無視される違いがある
:is() と :where() は詳細度が違う
19 :nth-child() と :nth-last-child() 兄弟要素の位置でマッチ 2n + 1 は odd(奇数) 2n は even(偶数) とも書ける
20 :nth-child() と :nth-last-child() of で兄弟要素から該当する要素 における位置でマッチさせる事 ができる
21 :has() (相対)セレクターでマッチ 子孫から親要素であったり、前 の兄弟要素であったりと逆向き に辿ることができる
22 :empty 子に要素やテキストを持たない 要素にマッチ 子がホワイトスペーステキスト のみでもマッチするが、まだど のブラウザも対応してない
23 • CSS セレクターモジュールには結構多くの機能がある ◦ 今日紹介出来なかったのもある • 子孫結合子、子結合子を覚えておけばなんとかなる ◦ 他の機能を使うと記述が楽になることがあるので 余力があれば知っておけば良さそう
所感