CHAPTER 1 DESIGN PATTERNS: MAKING CSS EASY!
CSS Properties and Values: Specialized
List applies only to lists.
i list-style: TYPE POSITION IMAGE
i list-style-type: disc, circle, square, none, decimal,
lower-alpha, upper-alpha, lower-roman, upper-roman
i list-style-position: outside,inside
i list-style-image: none, url("file.jpg")
Table applies only to tables.
i border-collapse: separate, collapse
table-layout: auto, fixed
Cell applies only to cells.
vertical-align: baseline, bottom, middle, top
Inline applies only to inlines and inline-blocks.
vertical-align: baseline, LENGTH, %LineHeight,
text-bottom, text-top, middle, top, bottom
Page applies only to blocks and tables.
page-break-after: auto, always, avoid
page-break-before: auto, always, avoid
Selectors
- {} selects all elements
p {} selects allelements
.c {} selects all elements where class="c"
p.c {} selects allelements where class="c"
#main {} selects one element where id ="main"
a:link {} selects all unvisited links
a:visited{} selects all visited links
a:hover {} selects all links being hovered over
a:active {} selects the current link being activated
a:focus {} selects all links that have the focus
p:first-letter {} selects first letter of allelements
p:first-line {} selects first line of allelements
p:first-child {} selects first child of allelements
.c :first-line {} selects every 9th, 19th, 29th, etc., row
tr:nth-child(even) selects every even row of a table
tr:nth-child(2n+0) same as above
tr:nth-child(2n+0) same as above
tr:nth-child(10n+9) same as above
#n
#n > .c > :first-line {} child selector example
#n + .c + :first-line {} sibling selector example
#n , .c , :first-line {} applies independent selectors to same block of properties
[title] {} selects all elements with a title attribute
[title~="WORD"] {} selects all where title attribute contains "WORD"
[title="EXACT_MATCH_OF_ENTIRE_VALUE"] {} selects all with exact attribute match