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.2k
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.2k
CSS Study Group 2
kerrick
1
1k
Services & Component Collaboration
kerrick
0
740
Donate STL #Build4STL Hackathon Keynote
kerrick
0
310
Donate STL
kerrick
0
810
TDD With Ember.js
kerrick
0
1.1k
JavaScript Promises - Thinking Sync in an Async World
kerrick
20
7.5k
Other Decks in Programming
See All in Programming
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
130
Developer Joy == Developer Productivity (really!)
hollycummins
1
220
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
540
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
120
Modernisation Progressive d’Applications PHP
hhamon
0
110
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
210
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
The Shape of a Service Object
inem
0
530
GraphQLの魅力を引き出すAndroidクライアント実装
morux2
3
810
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
マルチモジュールにおけるテスト最適化
fxwx23
0
210
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
220
Featured
See All Featured
Facilitating Awesome Meetings
lara
49
6k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Designing for Performance
lara
604
68k
The Language of Interfaces
destraynor
153
23k
[RailsConf 2023] Rails as a piece of cake
palkan
48
4.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
48k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
Making Projects Easy
brettharned
113
5.8k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.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?