Slide 1

Slide 1 text

SELECTORS & RULES, CSS STUDY GROUP INHERITANCE & SPECIFICITY

Slide 2

Slide 2 text

Kerrick Long Things I make and do Where to ﬁnd me online meetup.com/STLEmber Lead Front-end Developer at Second Street www.KerrickLong.com twitter.com/KerrickLong github.com/Kerrick

Slide 3

Slide 3 text

selector { property: value; property: value; }

Slide 4

Slide 4 text

SELECTORS & RULES SELECTORS

Slide 5

Slide 5 text

CSS SELECTORS HTML ELEMENTS SELECT

Slide 6

Slide 6 text

BASIC SELECTORS

Example

* /* Universal */ h1 /* Type */ .hello /* Class */ .world /* Class */ #intro /* ID */

Slide 7

Slide 7 text

selector { }

Slide 8

Slide 8 text

MULTIPLE SELECTORS

Example

h1#intro #intro.world .hello.world .world.hello h1.hello

Slide 9

Slide 9 text

ATTRIBUTE SELECTORS

Example

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"]

Slide 10

Slide 10 text

Example a:link a:visited a:hover a:active a:focus PSEUDO-CLASS SELECTORS

Slide 11

Slide 11 text

input:disabled input:enabled input:checked PSEUDO-CLASS SELECTORS

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

PSEUDO-CLASS SELECTORS

Example

h1:not(.hello) h2:empty

Slide 14

Slide 14 text

PSEUDO-ELEMENTS

Example

::before Example ::after

Example

Lorem Ipsum…

h2::before h2::after p::first-line p::first-letter

Slide 15

Slide 15 text

COMBINATORS

Foo

Bar

Baz

Quux

Bang

h1 h3 /* Descendant */ h1 > h2 /* Child */ h1 + h4 /* Adjacent Sibling */ h1 ~ h6 /* General Sibling */

Slide 16

Slide 16 text

SELECTORS & RULES RULES

Slide 17

Slide 17 text

CSS RULES SPECIFIC STYLES APPLY

Slide 18

Slide 18 text

selector } property: value; property: value;

Slide 19

Slide 19 text

BACKGROUND PROPERTIES background-color background-image background-repeat background-attachment background-position /* Short-hand */ background

Slide 20

Slide 20 text

BACKGROUND PROPERTIES background-color background-image background-repeat background-attachment background-position /* Short-hand */ background

Slide 21

Slide 21 text

COLOR PROPERTIES color opacity

Slide 22

Slide 22 text

TEXT PROPERTIES text-align text-decoration text-indent text-transform line-height letter-spacing word-spacing white-space

Slide 23

Slide 23 text

FONT PROPERTIES font-family font-style font-variant font-weight font-size /* Short-hand */ font

Slide 24

Slide 24 text

WIDTH MARGIN BORDER PADDING CONTENT CONTENT-BOX

Slide 25

Slide 25 text

WIDTH MARGIN BORDER PADDING CONTENT BORDER-BOX

Slide 26

Slide 26 text

BORDER PROPERTIES border-width border-(TRBL)-width border-color border-(TRBL)-color border-style border-(TRBL)-style /* Short-hand */ border

Slide 27

Slide 27 text

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;

Slide 28

Slide 28 text

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;

Slide 29

Slide 29 text

LIST PROPERTIES list-style-type list-style-image list-style-position /* Short-hand */ list-style

Slide 30

Slide 30 text

BOX SIZE PROPERTIES width min-width max-width height min-height max-height

Slide 31

Slide 31 text

VISUAL PROPERTIES display float clear overflow cursor position top right bottom left

Slide 32

Slide 32 text

INHERITANCE & SPECIFICITY INHERITANCE

Slide 33

Slide 33 text

INHERITANCE

Foo

Bar

Baz

Quux

Bang

h1 { color: red; }

Slide 34

Slide 34 text

INHERITANCE & SPECIFICITY SPECIFICITY

Slide 35

Slide 35 text

SPECIFICITY 0 0 0 0 STYLE="" #ID TYPE .CLASS, :PSEUDO-CLASS MOST SPECIFIC LEAST SPECIFIC

Slide 36

Slide 36 text

0 1 3 1 STYLE="" #ID TYPE .CLASS, :PSEUDO-CLASS a#login.active.button:hover

Slide 37

Slide 37 text

0 2 0 0 STYLE="" #ID TYPE .CLASS, :PSEUDO-CLASS #header img#logo

Slide 38

Slide 38 text

0 2 0 0 0 1 3 1 WHICH IS MORE SPECIFIC?

Slide 39

Slide 39 text

0 2 0 0 0 WHICH IS MORE SPECIFIC?