SELECTORS & RULES,CSS STUDY GROUPINHERITANCE & SPECIFICITY
View Slide
Kerrick LongThings I make and do Where to find me onlinemeetup.com/STLEmberLead Front-end Developerat Second Streetwww.KerrickLong.comtwitter.com/KerrickLonggithub.com/Kerrick
selector {property: value;property: value;}
SELECTORS & RULESSELECTORS
CSS SELECTORSHTML ELEMENTSSELECT
BASIC SELECTORSclass="hello world"id="intro">Example* /* Universal */h1 /* Type */.hello /* Class */.world /* Class */#intro /* ID */
selector {}
MULTIPLE SELECTORSclass="hello world"id="intro">Exampleh1#intro#intro.world.hello.world.world.helloh1.hello
ATTRIBUTE SELECTORSclass="hello world"id="intro"data-foo="bar-qux"data-bar="foo baz">Exampleh1[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"]
Examplea:linka:visiteda:hovera:activea:focusPSEUDO-CLASS SELECTORS
type="checkbox" />input:disabledinput:enabledinput:checkedPSEUDO-CLASS SELECTORS
h1:first-of-typeh1:last-of-typeh1:only-of-typeh1:nth-of-type(5)h1:first-childh1:last-childh1:only-childh1:nth-child(3)PSEUDO-CLASS SELECTORS
PSEUDO-CLASS SELECTORSExampleh1:not(.hello)h2:empty
PSEUDO-ELEMENTSExample::beforeExample::afterExampleLorem Ipsum…h2::beforeh2::afterp::first-linep::first-letter
COMBINATORSFooBarBazQuuxBangh1 h3 /* Descendant */h1 > h2 /* Child */h1 + h4 /* AdjacentSibling */h1 ~ h6 /* GeneralSibling */
SELECTORS & RULESRULES
CSS RULESSPECIFIC STYLESAPPLY
selector}property: value;property: value;
BACKGROUND PROPERTIESbackground-colorbackground-imagebackground-repeatbackground-attachmentbackground-position/* Short-hand */background
COLOR PROPERTIEScoloropacity
TEXT PROPERTIEStext-aligntext-decorationtext-indenttext-transformline-heightletter-spacingword-spacingwhite-space
FONT PROPERTIESfont-familyfont-stylefont-variantfont-weightfont-size/* Short-hand */font
WIDTHMARGIN BORDER PADDING CONTENTCONTENT-BOX
WIDTHMARGIN BORDER PADDING CONTENTBORDER-BOX
BORDER PROPERTIESborder-widthborder-(TRBL)-widthborder-colorborder-(TRBL)-colorborder-styleborder-(TRBL)-style/* Short-hand */border
MARGIN PROPERTIESmargin-topmargin-rightmargin-bottommargin-left/* Short-hand */margin/* TRBL - Trouble! */margin: 1px 2px 3px 4px;margin: 1px 2px;margin: 1px;
PADDING PROPERTIESpadding-toppadding-rightpadding-bottompadding-left/* Short-hand */padding/* TRBL - Trouble! */padding: 1px 2px 3px 4px;padding: 1px 2px 3px;padding: 1px 2px;padding: 1px;
LIST PROPERTIESlist-style-typelist-style-imagelist-style-position/* Short-hand */list-style
BOX SIZE PROPERTIESwidthmin-widthmax-widthheightmin-heightmax-height
VISUAL PROPERTIESdisplayfloatclearoverflowcursorpositiontoprightbottomleft
INHERITANCE & SPECIFICITYINHERITANCE
INHERITANCEFooBarBazQuuxBangh1 {color: red;}
INHERITANCE & SPECIFICITYSPECIFICITY
SPECIFICITY0 0 0 0STYLE="" #ID TYPE.CLASS,:PSEUDO-CLASSMOST SPECIFIC LEAST SPECIFIC
0 1 3 1STYLE="" #ID TYPE.CLASS,:PSEUDO-CLASSa#login.active.button:hover
0 2 0 0STYLE="" #ID TYPE.CLASS,:PSEUDO-CLASS#header img#logo
0 2 0 00 1 3 1WHICH IS MORE SPECIFIC?
0 2 0 00WHICH IS MORE SPECIFIC?