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
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
470
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
780
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
PipeCDのプラグイン化で目指すところ
warashi
1
270
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
Deep Dive into ~/.claude/projects
hiragram
14
2.5k
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
Team operations that are not burdened by SRE
kazatohiei
1
310
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
Hack Claude Code with Claude Code
choplin
4
2k
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
Featured
See All Featured
Bash Introduction
62gerente
613
210k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Unsuck your backbone
ammeep
671
58k
Writing Fast Ruby
sferik
628
62k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
How to Ace a Technical Interview
jacobian
278
23k
Scaling GitHub
holman
460
140k
Site-Speed That Sticks
csswizardry
10
690
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
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?