pseudo class 2

1st of type
p:first-of-type {
font-family:verdana;
color:#3CF
}
the 1st p will get formatted

last-of-type {

}

formats the last of the type

only-of-type {

}

:root {
background-color:purple;
border:2px solid:red;

}

all around the document

Empty
:empty {
background-color:red
border:2px solid
}

:target {

}

enabled

input:disabled+span { color:grey; (when disabled)
font-family:verdana;
font-size:1em
}

input:enabled+span { (when enabled)
color:green;
font-family:verdana;
font-size:1em
}
checked
input:checked+span { (now when an element is checked it will go blue)
color:blue;
font-family:verdana;
font-size:1em
}

* (all
not element
p*:not(q) (everything thats not in the q element will go red)
{
background:red;
:

cursor

#box {
background-color:purple;
border:dark purple solid 1px;
width:6em;
height:6em;
cursor:move;
}
#box {
background-color:purple;
border:dark purple solid 1px;
width:6em;
height:6em;
cursor:crosshair;
}

formatting

text align
inherit, centre, justify.. left and right

p{
text-align:justify;
text-decoration:line-through;
}
you can put overline and underline in text decoration.
where it is used most is with links
(a href)
a{
text-decoration:none;
}
most web users are used to clicking on links with lines under them. so its a good idea to leave an underline

letterspacing
p{
letter-spacing:(in addition to the default value) 1em;
}
so this puts 1em in addition to default on each letter

normal will make default.

word spacing

word-spacing:1em; will space between word elements.
both can be affected be align justify.

text-transform:(alter how the text would appear in the normal flow of the document) lowercase (so this will change everything to lowercase.
captilize make every letter at start of word word a capital.

text-transform:uppercase (makes every letter uppercase)

indent

text indent.. allows us to put an indent in the first line of text
to hide content from nonscreen readers, structuring headers off the page.
viewers in firefox, simply wont see the header.
p {
text-indent:1.5em;
width:8em;
}
so in the first line of text there will be a text indent.
you can also use %

pseudo class

hover state can be used on any element on our document.

div:hover{
height:5em;
width:5em;
background-color:pink;

}

so it will change color when u hover

focus
a:focus {
font-size:2em;
color:green;
}

on focus, our hyperlink is going to change - click on it will change or when i tab to it.

first child.

li {
color:green;
}

li:first-child {
font-size:2em;
color:pink;
}
the first child has become pink with 2em
will only match if its the first element of the parent element

lang

:lang (sp) {
color:orange
font-weight:bold;
}

so where the is spanish content, format with these properties in the declaration

not all browsers support the following yet

p:last-child {
color:red;
}

p:only-child {
color:red
}
so where there is an only child of it's parent, it will turn red

first of type
p:first-of-type {
font-family:verdana;
color:red;
}
first of its type in the p element will format in in red

Generated content

these allow us to generate content.
we are altering the presentation of the document, not the document itself.
#content:before {
content: "Designed by Daniel";
}

this will then go in before any content.

a counter -

ul {
counter-reset:count;(specified a name for our counter)
}

li:before {
counter-increment:count;
content: "number " counter (count) ": ";
}

pseudo-elements

aloow us to extend our selecter so we can be more specific as to what we want to select, first letter of a paragraph.
eg:
p:first-letter {
font-size:2em;
color:green
}

note css 3.. need 2 ::

p:first-line {
text-transform:capitalize;
}
note not all browsers support this property.
firefox does.
the amount on our first line can change.

*(everything)
*:selection {
background:green;
color:red;
}

any text that is selected by the user will now be highlighted and any text will be coloured red that is selcted.
opera and safari are the only 2 browsers that support this element.

Line Height

line-height, counts the line of text as part of the line height
you can also count measurments in ims and pixels
1.2em is about the default heieght. but does vary from browser to browser.