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
210
ふかぼれ!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.3k
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
490
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
4
1.8k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
520
DOM Observable
petamoriken
1
240
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
650
Contributing to Deno is fun!
petamoriken
0
340
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.7k
linaria: Zero-Runtime CSS in JS
petamoriken
2
2.3k
Other Decks in Programming
See All in Programming
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
2
520
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
120
snacks.nvim内のセットアップ不要なプラグインを紹介 / introduce_snacks_nvim
uhooi
0
320
新卒から4年間、20年もののWebサービスと 向き合って学んだソフトウェア考古学
oguri
7
6.5k
ローコードサービスの進化のためのモノレポ移行
taro28
1
330
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
seike460
PRO
0
240
RailsでCQRS/ESをやってみたきづき
suzukimar
2
1.5k
Kubernetesで実現できるPlatform Engineering の現在地
nwiizo
2
1.7k
GDG Super.init(version=6) - From Where to Wear : 모바일 개발자가 워치에서 발견한 인사이트
haeti2
0
550
Gunma.web #55
tinykitten
0
130
OUPC2024 Day 1 解説
kowerkoint
0
390
‘무차별 LGTM~👍’만 외치던 우리가 ‘고봉밥 코드 리뷰’를?
hannah0731
0
520
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
Documentation Writing (for coders)
carmenintech
69
4.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
470
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
12
1.4k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
How STYLIGHT went responsive
nonsquared
99
5.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
28
2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Optimizing for Happiness
mojombo
377
70k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.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 セレクターモジュールには結構多くの機能がある ◦ 今日紹介出来なかったのもある • 子孫結合子、子結合子を覚えておけばなんとかなる ◦ 他の機能を使うと記述が楽になることがあるので 余力があれば知っておけば良さそう
所感