Pseudo Class

not to be confused with elements - different

Hover pseudo class



style type="text/css">
div {
height:5em;
width:5em;
background-color:#F39;
}
div:hover {
height:8em;
width:8em;
background-color:#3C0;
}
/style>
/head>

body>


/body>



Focus pseudo class

style type="text/css">
a:focus {
font-size:2em;
color:#0F0;
}

/style>
/head>

body>


First Child pseudo class
will only match an element if it is the first child of a parent element

style type="text/css">
li {
color:#009;
}
li:first-child {
font-size:2em;
color:#C3C;
}
/style>
/head>

body>
ul>
li>1 /li>
li>2 /li>
li>3 /li>
li>4 /li>
/ul>


/body>



P lang pseudo class

style type="text/css">
:lang (sp) {
color:#F30;
font-weight:bold;
}
/style>
/head>

body>
p lang="sp">-Habla Ingles? /p
p lang="en">Do you speak English? /p>

p lang="sp">-Habla Ingles? lkf fdjgkd skfjdk gdkst g /p>

/body>



css3 standards pseudo class - not all browsers support these standards as yet
- last child

style type="text/css">

p:last-child {
color:#F00;
}
/style>
/head>

body>
div> - parent
p>text /p> - children
p>text /p>
p>text /p>
p>text /p>
/div>

/body>

- only child

style type="text/css">

p:only-child { - only works when there is only one child
color:#F00;
}
/style>
/head>

body>

div>
p>text /p>
/div>
/body>


- first of type
first of a specified type
style type="text/css">

p:first-of-type { - will change to first of the that type
font-family:Verdana, Geneva, sans-serif;
color:#3CF;
}
/style>
/head>

body>

div>
h2>header 2 /h2>
p>text 1 /p>
p>text 2 /p>
p>text 3 /p>
h2>header 2 /h2>
p>text 4 /p>
/div>
/body>

last-of-type & only-of-type

works as first-of-type

:root {
background-color:#9CF;
border:2px solid #F00;
}

:empty { - formats empty elements
background-color:#9CF;
border:2px solid #F00;
}

can be more specific
p:empty { - only affects the p elements
background-color:#9CF;
border:2px solid #F00;

:target {
backround:red;
}
p {
background:gray;
}
/style>
/head>
body>
p>Link : a href="#pelement">target p element /a>. /p>
p id="pelement">text text text /p>
/body>

hyperlink in first para is linking to #pelement


}