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
Perlで痩せる
yuukis
1
680
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
370
業務自動化をJavaとSeleniumとAWS Lambdaで実現した方法
greenflagproject
1
110
単体テストの始め方/作り方
toms74209200
0
450
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
270
Practical Tips and Tricks for Working with Compose Multiplatform Previews (mDevCamp 2025)
stewemetal
0
120
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
5
3.6k
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
270
技術懸念に立ち向かい 法改正を穏便に乗り切った話
pop_cashew
0
1.4k
GoのWebAssembly活用パターン紹介
syumai
3
10k
機械学習って何? 5分で解説頑張ってみる
kuroneko2828
0
210
Datadog RUM 本番導入までの道
shinter61
1
280
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Language of Interfaces
destraynor
158
25k
4 Signs Your Business is Dying
shpigford
184
22k
BBQ
matthewcrist
89
9.7k
The Cost Of JavaScript in 2023
addyosmani
50
8.4k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Done Done
chrislema
184
16k
It's Worth the Effort
3n
184
28k
Designing for humans not robots
tammielis
253
25k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Cult of Friendly URLs
andyhume
79
6.4k
Gamification - CAS2011
davidbonilla
81
5.3k
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?