Online Mind Mapping and Brainstorming

Create your own awesome maps

Online Mind Mapping and Brainstorming

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account? Log In

CSS - crash course in Selectors, box model, Idan Gazit by Mind Map: CSS - crash course in Selectors, box model, Idan Gazit
0.0 stars - reviews range from 0 to 5

CSS - crash course in Selectors, box model, Idan Gazit

A deep dive

2 topics that are the heart of CSS


h1 {...}

h1 - selector

{..} - declaration block

in the begginning there was only

DOM tree, relationships, ancestors - decendants, parent - child, in reality - it's a complex graph, not a simple tree

selectors allow you to choose on which elements to work

5 types

Specific, example, p, p.large, p of class "large", #nav, element with id nav, *, universal, DANGER, bad idea to use it, only in certain cases, intro.large, multiple classes, not in IE6

Hierarchical, example, div p, descendamt, div > p, child, not in IE6, h1 + p, adjacent immediate sibling, not in IE6, awesome, css 3, div ~ p, general later sibling, not in IE6

Attribute, example, img[alt], not in IE6, img[alt="foo"], not in IE6, img[alt~="foo"], fee sub-string, not in IE6, img[alt|="foo"], not in IE6, css 3, ^=, not in IE6, $=, not in IE6, *=, not in IE6

Pseudo-classes, like a state, example, :first-child, IE8 still not 100%, :link, :visited, :hover, IE6 - links only, :active, one button is clicked on somethng, IE7 - links only, :focus, style for input elemenst in focus, not in IE8, :lang(foo), actual example, div>p:first-child, <div><p>da</p><p>no</p></div>, css 3, example, :first-of-type, not in FF3, :last-child, :only-child, :not, :empty, :nth-child(...), :nth-of-type(...), ... is formula, An+B, even, odd shortcuts, useful for zebra tables, not in FF3, :target, applies to links to the given target, highlight links to selected anchors, not in opera, non work in IE<9, actual example, div>p:first-of-type, li:only-child, ul with only 1 li, div.special *:not(ul), the use case for using *

Pseudo-elements, examples, :first-line, :first-letter, not in webkit, opera, :before, :after, not in IE8, actual example, li.optional:before, can be used to add content before elements with class "optional", Untitled, results in, Untitled


meaning, how "specific" the elements definition, you can understand the rules order by logic

law, later rules trump earlier rules if their of the same specifity, see spec,

rules of specifity (in this order), style, id's, attributes, classes, peseudo-classes, elements, pseudo-classes

this is translates to number prefixes, in order for the browser to process

Firebug & chrome debugger presents the specifity


support of anything in each browser


Steve Sauders says if you don't have 40K elements, no meaningful overhead in performance

The Box Model


doesn't work the way you expect, wtf

wtf 1

width & height apply just to the inner area, not including the padding & border

math, size + padding (both sides) + border (both sides) = actual size

more math, auto width, containing block - margin - border - padding = calculated width

wtf 2

margin collapsing, higher size takes over smaller

read the spec


The magic lantern or Laterna Magica is an early type of image projector developed in the 17th century.