Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
CSS Study Group 1
Kerrick Long
November 06, 2014
Programming
0
710
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
710
The ECMAScript formerly known as 6
kerrick
0
730
CSS Study Group 2
kerrick
1
670
Services & Component Collaboration
kerrick
0
520
Donate STL #Build4STL Hackathon Keynote
kerrick
0
160
Donate STL
kerrick
0
590
TDD With Ember.js
kerrick
0
680
JavaScript Promises - Thinking Sync in an Async World
kerrick
20
6.4k
Other Decks in Programming
See All in Programming
Cloud-Conference-Day-Spring Cloud + Spring Webflux: como desenvolver seu primeiro microsserviço reativo em Java?
kamilahsantos
1
150
あなたの会社の古いシステム、なんとかしませんか?~システム刷新から考えるDX化への道筋とバリエーション~/webinar20220420-systems
grapecity_dev
0
130
Airflow1=>Airflow2へのupgrade 事例紹介
reizist
0
120
質とスピード(2022春版、質疑応答用資料付き) / Quality and Speed 2022 Spring Edition
twada
PRO
29
18k
Kotlin 最新動向2022 #tfcon #techfeed
ntaro
1
1.2k
LOWYAの信頼性向上とNew Relic
kazumax55
4
370
機能横断型チームにおける技術改善
takeshiakutsu
3
480
デュアルトラックアジャイル× Agile Testingから 見えてきたQAのミライ
atamaplus
0
430
全国の中高生がプログラミングを学んでいるCloud9環境の仕組み@JAWS-UG_SRE支部_#3
asache3
0
120
Reactでアプリケーションを構築する多様化
sakito
4
3.4k
職場にPythonistaを増やす方法
soogie
0
320
tfcon2022_Web3Dひとめぐり.pdf
emadurandal
0
1.1k
Featured
See All Featured
Done Done
chrislema
174
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
11k
The World Runs on Bad Software
bkeepers
PRO
56
5.2k
Embracing the Ebb and Flow
colly
73
3.3k
The Pragmatic Product Professional
lauravandoore
19
2.9k
In The Pink: A Labor of Love
frogandcode
130
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Designing for humans not robots
tammielis
241
23k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Testing 201, or: Great Expectations
jmmastey
21
5.4k
Git: the NoSQL Database
bkeepers
PRO
415
59k
A Tale of Four Properties
chriscoyier
149
20k
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?