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 Study Group 1
Search
Kerrick Long
November 06, 2014
Programming
0
1.3k
CSS Study Group 1
Kerrick Long
November 06, 2014
Tweet
Share
More Decks by Kerrick Long
See All by Kerrick Long
15 Things You Shouldn't Do In Ember Anymore
kerrick
0
1.1k
The ECMAScript formerly known as 6
kerrick
0
1.3k
CSS Study Group 2
kerrick
1
1.1k
Services & Component Collaboration
kerrick
0
770
Donate STL #Build4STL Hackathon Keynote
kerrick
0
360
Donate STL
kerrick
0
810
TDD With Ember.js
kerrick
0
1.1k
JavaScript Promises - Thinking Sync in an Async World
kerrick
20
7.9k
Other Decks in Programming
See All in Programming
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
NPOでのDevinの活用
codeforeveryone
0
830
Porting a visionOS App to Android XR
akkeylab
0
460
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
9
5k
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
140
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
Hack Claude Code with Claude Code
choplin
4
2k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
GitHub's CSS Performance
jonrohan
1031
460k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
We Have a Design System, Now What?
morganepeng
53
7.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Scaling GitHub
holman
460
140k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Transcript
SELECTORS & RULES, CSS STUDY GROUP INHERITANCE & SPECIFICITY
Kerrick Long Things I make and do Where to find
me online meetup.com/STLEmber Lead Front-end Developer at Second Street www.KerrickLong.com twitter.com/KerrickLong github.com/Kerrick
selector { property: value; property: value; }
SELECTORS & RULES SELECTORS
CSS SELECTORS HTML ELEMENTS SELECT
BASIC SELECTORS <h1 class="hello world" id="intro" > Example </h1> *
/* Universal */ h1 /* Type */ .hello /* Class */ .world /* Class */ #intro /* ID */
selector { }
MULTIPLE SELECTORS <h1 class="hello world" id="intro" > Example </h1> h1#intro
#intro.world .hello.world .world.hello h1.hello
ATTRIBUTE SELECTORS <h1 class="hello world" id="intro" data-foo="bar-qux" data-bar="foo baz" >
Example </h1> h1[data-foo] h1[data-foo="bar-qux"] h1[data-bar~="baz"] h1[data-foo|="bar"] h1[data-foo^="b"] h1[data-bar$="z"] h1[data-foo*="ar"]
<a href="/example/"> Example </a> a:link a:visited a:hover a:active a:focus PSEUDO-CLASS
SELECTORS
<input disabled /> <input checked type="checkbox" /> input:disabled input:enabled input:checked
PSEUDO-CLASS SELECTORS
h1:first-of-type h1:last-of-type h1:only-of-type h1:nth-of-type(5) h1:first-child h1:last-child h1:only-child h1:nth-child(3) PSEUDO-CLASS SELECTORS
PSEUDO-CLASS SELECTORS <h1 class="goodbye"> Example </h1> <h2></h2> h1:not(.hello) h2:empty
PSEUDO-ELEMENTS <h1>Example</h1> <h2> ::before Example ::after </h2> <h3>Example</h3> <p>Lorem Ipsum…</p>
h2::before h2::after p::first-line p::first-letter
COMBINATORS <h1>Foo <h2>Bar <h3>Baz</h3> </h2> </h1> <h4>Quux</h4> <h6>Bang</h6> h1 h3
/* Descendant */ h1 > h2 /* Child */ h1 + h4 /* Adjacent Sibling */ h1 ~ h6 /* General Sibling */
SELECTORS & RULES RULES
CSS RULES SPECIFIC STYLES APPLY
selector } property: value; property: value;
BACKGROUND PROPERTIES background-color background-image background-repeat background-attachment background-position /* Short-hand */
background
BACKGROUND PROPERTIES background-color background-image background-repeat background-attachment background-position /* Short-hand */
background
COLOR PROPERTIES color opacity
TEXT PROPERTIES text-align text-decoration text-indent text-transform line-height letter-spacing word-spacing white-space
FONT PROPERTIES font-family font-style font-variant font-weight font-size /* Short-hand */
font
WIDTH MARGIN BORDER PADDING CONTENT CONTENT-BOX
WIDTH MARGIN BORDER PADDING CONTENT BORDER-BOX
BORDER PROPERTIES border-width border-(TRBL)-width border-color border-(TRBL)-color border-style border-(TRBL)-style /* Short-hand
*/ border
MARGIN PROPERTIES margin-top margin-right margin-bottom margin-left /* Short-hand */ margin
/* TRBL - Trouble! */ margin: 1px 2px 3px 4px; margin: 1px 2px; margin: 1px;
PADDING PROPERTIES padding-top padding-right padding-bottom padding-left /* Short-hand */ padding
/* TRBL - Trouble! */ padding: 1px 2px 3px 4px; padding: 1px 2px 3px; padding: 1px 2px; padding: 1px;
LIST PROPERTIES list-style-type list-style-image list-style-position /* Short-hand */ list-style
BOX SIZE PROPERTIES width min-width max-width height min-height max-height
VISUAL PROPERTIES display float clear overflow cursor position top right
bottom left
INHERITANCE & SPECIFICITY INHERITANCE
INHERITANCE <h1>Foo <h2>Bar <h3>Baz</h3> </h2> </h1> <h2>Quux</h2> <h3>Bang</h3> h1 {
color: red; }
INHERITANCE & SPECIFICITY SPECIFICITY
SPECIFICITY 0 0 0 0 STYLE="" #ID TYPE .CLASS, :PSEUDO-CLASS
MOST SPECIFIC LEAST SPECIFIC
0 1 3 1 STYLE="" #ID TYPE .CLASS, :PSEUDO-CLASS a#login.active.button:hover
0 2 0 0 STYLE="" #ID TYPE .CLASS, :PSEUDO-CLASS #header
img#logo
0 2 0 0 0 1 3 1 WHICH IS
MORE SPECIFIC?
0 2 0 0 0 WHICH IS MORE SPECIFIC?