pseudoclases y pseudoelementos

by cristian_cena

HTML

<!--
  -- PSEUDO CLASES/ELEMENTOS
  -->

<a href="#">enlace</a>
<a href="javascript:void(0);">enlace</a>

<form>
Nombre: <input type="text" name="nombre" /><br />
Apellido: <input type="text" name="apellido" />
</form>

<p class="primera_letra">Hola mundo!</p>

<p class="primera_linea">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus gravida erat quis cursus. Integer hendrerit, libero feugiat interdum vulputate, augue augue ornare risus, mollis consequat lectus eros sed nisl. Curabitur luctus euismod massa id tristique. 
</p>

<ul>
    <li>primer hijo</li>
    <li>item 2</li>
    <li>item n</li>
</ul>

<ol>
    <li>1</li>
    <li>2</li>
    <li>n</li>
</ol>

<p lang="it">La pasta della nonna</p>

CSS

a{color:white; text-decoration:none;}
/*respetar el siguiente orden: link->visited->hover->active*/
a:link{background:red;}
a:visited{background:gray;}
a:hover{background:green; text-decoration:underline;}
a:active{background:blue;}

input:focus{background-color:yellow;}

p.primera_letra:first-letter{font-size:200%; color:yellow; background:gray;}

p.primera_linea:first-line{font-weight:bold;}

ul li:first-child{background:red;}

ol li:before{content:"item: "; font-weight:bold;}
ol li:after{content:" ..."; font-weight:bold; color:red;}

p:lang(it){background:yellow;}

JavaScript

/*
nota:
:focus en ie8 necesita que declaremos un doctype.
*/