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
Frontend NE
August 29, 2015
Technology
0
330
CSS Pseudo Classes
Elizabeth Gardiner take Frontend NE through CSS pseudo selectors and pseudo classes
Frontend NE
August 29, 2015
Tweet
Share
More Decks by Frontend NE
See All by Frontend NE
Standardizing 'select': What the future holds for HTML - Stephanie Stimac @ FrontendNE
frontendne
4
210
CSS Regression testing - James A Lambert @ FrontendNE
frontendne
1
200
Building a design system for Lloyds Banking - Lilly Dart @ FrontendNE
frontendne
0
920
What I learnt about hiring diverse teams from conducting a fully-anonymous recruitment process - Bethan Vicent
frontendne
0
140
Web Design that Doesn't Make Trans People Uncomfortable - Jessica Kelsall
frontendne
0
520
Contain yourself - Docker for developers
frontendne
2
150
Design process of a website
frontendne
0
130
What the JAMstack?
frontendne
1
590
Talking the talk
frontendne
0
310
Other Decks in Technology
See All in Technology
技術イベントはなんとかひねり出す 日経の技術広報の取り組み/techpr3
nishiuma
0
220
LLMプロダクト事業の立ち上げにおける挑戦
layerx
PRO
7
1.4k
初心者が行く!サーバレスWebアプリ開発の道
nagaharutogawa
0
440
Azureコストは水道代/The_47th_Tokyo_Jazug
aeonpeople
3
350
WebXR で Web をもっと楽しもう
qst_exe
0
110
GitHub最新情報キャッチアップ 2024年3月
dzeyelid
16
3.1k
Kubeflow Pipelines v2 で変わる機械学習パイプライン開発
asei
4
330
データ化エンジニアとしての1年を振り返る
sansantech
PRO
3
250
KTC_DBRE.pdf
_awache
0
290
私のRSpecの書き方 / How I write RSpec
tmtms
4
820
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
7
100k
サービスメッシュ環境における OpenTelemetry 活用 / OpenTelemetry in Service Mesh
k6s4i53rx
2
800
Featured
See All Featured
For a Future-Friendly Web
brad_frost
170
8.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Atom: Resistance is Futile
akmur
258
25k
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
Practical Orchestrator
shlominoach
180
9.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
RailsConf 2023
tenderlove
0
510
Mobile First: as difficult as doing things right
swwweet
215
8.5k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
Building Your Own Lightsaber
phodgson
97
5.6k
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}