CSS rough notes

________________________________
CSS rough notes
based on the book for 70-480 exam: http://shop.oreilly.com/product/0790145373939.do

________________________________
CSS: resolution of conflicting rules
CSS rules override previous rules, with a 'last one wins' policy.

the priority is calculated using these properties, in order:
- important
- specificity
- text order ('last one wins')

the specificity is calculated as a single number abc, where the components a b and c are:
a = # of id attributes in selector
b = # of class selectors, attribute selectors, pseudo classes
c = # of element names (type selectors)

so if a = 2, b = 3, c = 1 -> specificity = 231.

If there is a conflict that cannot be resolved by important and then specificity, then the conflict is reolved by text order, or 'last one wins'.  Starting with the lowest text order:
- browser/agent CSS
- user CSS
- author CSS
- auther important CSS
- user important CSS

________________________________
positioning of elements

_________________
position:
static: default html flow
relative: relative to default
absolute: position within first non-static parent (or else the window)
fixed: position relative to the window
float: other elements flow around

_________________
clear
div {clear: both; } /* element 'starts again' after position: for example after a flow */

_________________
position tricks and tips
/* tip: use margin to fine-tune position */
margin-top: -5px;
_________________
box-sizing

the css box model

/* use box-sizing to change how width, height attributes are used */

{box-sizing: content-box;} /* default */

{box-sizing: border-box;}
{box-sizing: padding-box;}

_________________
auto center
/*auto-center: - requires a width */
div {margin-left:auto; margin-right:auto; width: 100px;}

________________________________
selectors:
/*note: also used in jQuery */

li a { } -> all a that are contained by some parent li (can be slow)
li > a { }  -> all a that are contained by direct parent li (faster)
_________________
pseudo classes
- single colon

:nth-child(3) /* 3rd child */
:nth-child(10n + 3) /* 3rd child of every 10 children */

:nth-child(odd) /* odd-numbered children */

:nth-child(even) /* even-numbered children */

:first-of-type(div) /* first child that is of type div */

... many others ....

ref: https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes

_________________
pseudo elements:
- double colon
- only 5 of them
- surprisingly powerful (see ref below)

p::first-line
::first-letter
::before
::after { content: 'Note:'; color: red; }
::selection

ref: some really nice effects:
http://css-tricks.com/pseudo-element-roundup/
_________________
combined rules:
- allows reuse of a rule:
button, p { } /* will apply to all button and all p */

_________________
chained rules:
- chain rules, in order to be more specific:
a[href]:hover:after { } 

_________________
attribute selectors:
a[href*='contained']:hover { }
a[href^='starts with']:hover { }
a[href$='ends with']:hover { }

a[href~='valueInAspaceSeparatedList']:hover { }

_________________
other selectors:

dir+h1 {} /* h1 directly adjacent to div as a sibling */

dir~h1 {} /* h1 that has a sibling of div */

________________________________