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 Pseudo Classes
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Frontend NE
August 29, 2015
Technology
480
0
Share
CSS Pseudo Classes
Elizabeth Gardiner take Frontend NE through CSS pseudo selectors and pseudo classes
Frontend NE
August 29, 2015
More Decks by Frontend NE
See All by Frontend NE
Standardizing 'select': What the future holds for HTML - Stephanie Stimac @ FrontendNE
frontendne
4
440
CSS Regression testing - James A Lambert @ FrontendNE
frontendne
1
360
Building a design system for Lloyds Banking - Lilly Dart @ FrontendNE
frontendne
0
1.5k
What I learnt about hiring diverse teams from conducting a fully-anonymous recruitment process - Bethan Vicent
frontendne
0
310
Web Design that Doesn't Make Trans People Uncomfortable - Jessica Kelsall
frontendne
0
780
Contain yourself - Docker for developers
frontendne
2
290
Design process of a website
frontendne
0
350
What the JAMstack?
frontendne
1
990
Talking the talk
frontendne
0
550
Other Decks in Technology
See All in Technology
エンジニアは生成AIと どのように向き合うべきか? ことばの意味という観点から
verypluming
3
220
はじめてのAI-DLC
yoshidashingo
2
550
情シスがMCP環境導入時に打ちのめされる認可の崖
oidfj
0
450
大規模環境でどのように監視を実現する?
yuobayashi
1
150
Amazon CloudFrontにおけるAIボットアクセス制御のポイント
kizawa2020
4
270
TSKaigi 2026 - 型プラグインシステムの実装に使われるテクニック
teamlab
PRO
2
430
eBPF Can Do It! A 5-Minute Tour of 5 Real-World PHP Issues Solved with eBPF
egmc
0
190
Generative UI × A2UI で AI エージェントを作った話 AI-DLC も使ってみた!
kmiya84377
1
170
ルール・ロール・ツールを創る / Creating Rules, Roles and Tools
ks91
PRO
0
170
Anthropic AIネイティブ・スタートアップ構築のプレイブック を理解する
nagatsu
0
190
EdgeプロファイルでAWSアカウントを安全に使い分ける
jhashimoto
0
110
責任あるソフトウェアエンジニアリングの紹介4章・5章 / RSE_Ch4-5
ido_kara_deru
0
340
Featured
See All Featured
エンジニアに許された特別な時間の終わり
watany
107
240k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
1
2.7k
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
4.2k
SEO for Brand Visibility & Recognition
aleyda
0
4.6k
Being A Developer After 40
akosma
91
590k
Fashionably flexible responsive web design (full day workshop)
malarkey
408
66k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
750
Into the Great Unknown - MozCon
thekraken
41
2.5k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
280
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
810
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
Transcript
Pseudo-classes Elizabeth Gardiner {@libwella}
http://www.w3schools.com/css/css_pseudo_classes.asp “A pseudo-class is used to define a special state
of an element.”
http://www.thefreedictionary.com/Psuedo pseu•do (ˈsu doʊ) adj., n., pl. -dos. adj. 1.
false or spurious; sham; pretended. n. 2. a false or pretentious person.
None
Dynamic Pseudo-classes
:hover
:link :visited :hover :active
https://flic.kr/p/3ruY7o
:link o :visited e :hover :active t e
:link :visited :hover :active
:link :visited :hover :active :focus
:link :visited :hover :active :focus
None
:link :visited :hover :active :focus
:link :visited :hover :active :focus } :any-link (proposed CSS4)
:link :visited :hover :active :focus :local-link } :any-link (proposed CSS4)
(proposed CSS4)
Structural Pseudo-classes
THE DOM!
https://flic.kr/p/9GVpoG
<ul> <li> <li> <li> <li> <li> <li> https://flic.kr/p/9GVpoG
HTML BODY UL li li li li li li
:nth-child
:nth-child(n)
:nth-child(3) <ul> <li> <li> <li> <li> <li> <li> https://flic.kr/p/9GVpoG
:first-child :last-child :first-of-type :nth-last-child :nth-of-type :nth-last-of-type :only-child :only-of-type :empty :blank
(CSS4 proposed)
:matches(CSS4 proposed) https://css-tricks.com/almanac/selectors/m/matches/
:target
BROWSER SUPPORT
DEMOS http://lea.verou.me/demos/ nth.html https://css-tricks.com/examples/ nth-child-tester/#
THE negation pseudo-class :not
Pseudo Elements
http://www.growingwiththeweb.com/2012/08/pseudo-classes-vs-pseudo- elements.html “A pseudo-element […] allows us to create items
that do not normally exist in the document tree”
::first-line ::first-letter ::before ::after
::first-line ::first-letter ::before ::after
https://css-tricks.com/pseudo- element-roundup/ http:// www.smashingmagazine.com/ 2011/07/13/learning-to-use-the- before-and-after-pseudo- elements-in-css/
Thanks! Elizabeth Gardiner {@libwella}