Sie sind auf Seite 1von 18

P

g
i
n
a
1

Introduccin a la pseudo clase y seudo elementos en css3
En nuestro artculo Conceptos bsicos de CSS, hemos introducido los ms bsicos de los selectores CSS: selectores de elemento,
clase e id. Con estos selectores puede lograr mucho, pero no lo son todo en cuanto a selectores. Hay otros selectores que le
permiten seleccionar elementos para aplicarle estilos basndose en diversos criterios ms especficos y analizaremos la mayora
de ellos durante el transcurso de este artculo.
Nota: Estamos diciendo "la mayora" aqu, porque aunque la mayora de los navegadores actuales soportan todos los selectores
especificados en el Mdulo de selectores CSS3, nuevos selectores estn siendo agregados/modificados todo el tiempo
(mantngase verificando el borrador de trabajo de los selectores CSS4 para ms informacin sobre actualizaciones).
Selectores universales
Los selectores universales seleccionan todos los elementos de una pgina. Por ejemplo, la siguiente regla dice que cada elemento
de la pgina debe tener un borde negro slido de 1 pxel:
* {
border: 1px solid #000000;
}
Selectores de atributo
Los selectores de atributo le permiten seleccionar elementos en funcin de los atributos que contienen. Por ejemplo, usted
puede seleccionar todos los elementos <img> con un atributo altmediante el siguiente selector:
img[alt] {
border: 1px solid #000000;
}
Note los corchetes.
Usando este selector podra decidir colocar un borde negro alrededor de las imgenes que tienen un atributo alt y aplicar un
borde rojo brillante al resto de las imgenes. Esta sera una tcnica til a emplear en pruebas de accesibilidad.
Seleccin por el valor de un atributo
Los selectores de atributo se hacen inmediatamente ms tiles si consideramos que puede seleccionar por el valor del atributo, no
slo por el nombre del atributo. La regla siguiente selecciona todas las imgenes con un valor de atributo src de alerta.gif:
img[src="alerta.gif"] {
border: 1px solid #000000;
}
Nuevamente, esto puede ser til para fines de depuracin y quiz para aplicar estilos a iconos importantes o enlaces sin
necesidad de agregar IDs o clases adicionales.
Tenga en cuenta que esto no es soportado por IE6 y anteriores.

P

g
i
n
a
2

Seleccin basndose en una sub-cadena dentro del valor de un atributo
Aqu es donde los selectores de atributos se hcen an ms tiles. Para empezar, podemos seleccionar y aplicar estilos a nuestro
elemento <img src="alerta.gif"> usando el siguiente cdigo:
img[src^="alerta"] {
border: 1px solid #000000;
}
El carcter ^ indica que este selector debe seleccionar los elementos <img> slo si tienen la cadena alerta al comienzo del valor
del atributo src.
A continuacin, podemos seleccionar nuestro elemento <img src="alerta.gif"> con esto:
img[src$="gif"] {
border: 1px solid #000000;
}
El carcter $ indica que este selector debe seleccionar los elementos <img> slo si tienen la cadena gif al final del valor del
atributo src. Esto es realmente til para aplicar estilos a enlaces que apuntan a tipos especficos de recursos, como archivos PDF
o documentos de texto.
Por ltimo, podemos seleccionar nuestro elemento <img src="alerta.gif"> de esta manera:
img[src*="ert"] {
border: 1px solid #000000;
}
El carcter * indica que este selector debe seleccionar los elementos <img> slo si tienen la cadena ert en cualquier lugar dentro
del valor del atributo src.
Tenga en cuenta que stos no son soportados por IE8 y anteriores.
Seleccin basndose en elementos delimitados dentro del valor de un atributo
Si tuviera un elemento en una pgina con un nmero de clases aplicadas, por ejemplo:
<article class="resaltado archivo ingles"></article>
Podra seleccionarlo usando cualquiera de los siguientes selectores:
article[class~="resaltado"]
article[class~="archivo"]
article[class~="ingles"]
El carcter ~ indica que estos selectores deben seleccionar un elemento <article> cuyo valor de atributo class es una lista de
valores separados por espacios en blanco, pero slo si uno de esos valores es igual al valor indicado dentro de las comillas.

P

g
i
n
a
3

Ahora veamos un elemento en una pgina con un valor de ID en forma de una lista separada por guiones:
<article id="ingles-diario-resaltado"></article>
Podra seleccionarlo usando el siguiente selector:
article[id|="ingles"]
El carcter | indica que este selector debe seleccionar un elemento <article> cuyo valor del atributo id es una lista de valores
separados por guiones, pero slo si el valor ms a la izquierda es ingles.
Tenga en cuenta que stos no son soporatdos por IE8 y anteriores.
Selector de secundarios (hijos)
Puede utilizar un selector de secundarios (hijos) para seleccionar elementos especficos que son hijos de otros elementos
especficos. Por ejemplo, la siguiente regla cambiar el texto de elementos <strong> que son hijos de elementos <h3> a color
azul, pero no afectar a otros elementos <strong>:
h3 > strong {
color: blue;
}
Tenga en cuenta que los selectores de secundarios no son soportados en IE 6 o anteriores.
Note tambin que el carcter > a menudo es llamado un combinador en este contexto, ya que combina varios elementos en un
selector.
Selector de descendientes
Los selectores de descendientes son muy similares a los selectores de secundarios, excepto que los selectores de secundarios slo
seleccionan descendientes inmediatos; los selectores de descendientes seleccionan elementos coincidentes en cualquier lugar en
la jerarqua de elementos, no slo descendientes directos. Veamos lo que esto significa ms cuidadosamente. Considere el
siguiente fragmento de HTML:
<div>
<p>Hola</p>
<article>
<p>En este prrafo dir adis</p>.
</article>
</div>
En este fragmento de cdigo, el elemento <div> es el padre de todos los dems elementos. Tiene dos secundarios, un <p> y
un <article>. El elemento <article> tiene un elemento secundario nico: otro <p>.
Puede utilizar un selector de secundarios para seleccionar slamente el <p> que se encuentra inmediatamente dentro del <div>,
as:

P

g
i
n
a
4

div > p {
...
}
En cambio, si utiliza un selector de descendientes, sera as:
div p {
...
}
Ambos elementos <p> sern seleccionados.
Selector de hermano adjacente
Este selector le permite seleccionar un elemento especfico que viene inmediatamente despus de otro elemento especfico, en el
mismo nivel de la jerarqua de elementos. Tomemos el ejemplo siguiente
<h2>Mi encabezado</h2>
<p>Mi primer prrafo</p>
<p>Mi segundo prrafo</p>
<p>Mi tercer prrafo</p>
<p>Mi cuarto prrafo</p>
<p>Mi quinto prrafo</p>
Si desea seleccionar slo el elemento <p> que est inmediatamente despus del elemento <h2> (y cualquier otro
elemento <p> en la misma condicin que pueda aparecer ms adelante en el documento), puede utilizar la siguiente regla:
h2 + p {
...
}
Tenga en cuenta que el selector de hermanos adyacentes no es soportado por IE6 o anteriores.
Note tambin que el carcter + a menudo es llamado un combinador en este contexto, ya que combina mltiples elementos en
un selector.
Selectores de hermano general
El selector de hermano general es muy similar al selector de hermano adyacente, excepto que le permite seleccionar todos los
hermanos del tipo de elemento especificado, no slo el que aparece inmediatamente despus del elemento en el lado izquierdo.
La sintaxis es la siguiente:
h2 ~ p {
...

P

g
i
n
a
5

}
Volviendo a nuestro ejemplo anterior, este conjunto de reglas seleccionar todos los cinco elementos de prrafo, no slo el
primero. Tambin seleccionar el prrafo que se muestra a continuacin:
<h2>Mi encabezado</h2>
<h3>Mi subencabezado</h3>
<p>Mi prrafo</p>
Tenga en cuenta que el selector de hermanos generales no es soportado por IE8 o anteriores.
Note tambin que el carcter ~ a menudo es llamado un combinador en este contexto, ya que combina mltiples elementos en
un selector.

La seudo-clase
Muchos elementos del lenguaje de marcas HTML disponen de estados especiales o usos asociados a ellos. Podemos
aplicar estilos diferentes a estos elementos basndonos en esos estados o usos en nuestras hojas de estilo CSS. Por
ejemplo, el elemento a tiene cuatro estados:
normal: Su estado normal.
visited: Cuando ya hemos visitado el link al que hace referencia.
hover: Cuando tenemos el cursor situado encima del mismo.
active: Cuando hacemos click sobre l.
Una pseudo clase es un estado o uso predefinido de un elemento al que se le puede aplicar un estilo independientemente
de su estado por defecto. Existen cuatro tipos diferentes de pseudo clases:
Links: Estas pseudo clases se usan para dar estilo al enlace tanto en su estado normal por defecto como cuando
ya ha sido visitado, mientras mantenemos el cursor encima de l o cuando hacemos click en l
Dinamicas: Estas pseudo clases pueden ser aplicadas a cualquier elemento para definir como se muestran
cuando el cursor est situado sobre ellos, o haciendo click en ellos o bien cuando son seleccionados
Estructurales: Permiten dar estilo a elementos basndonos en una posicin numrica exacta del elemento
Otras: Algunos elementos pueden ser estilizados de manera diferente basndonos en el lenguaje o que tipo de
etiqueta no son.
A continuacin puedes ver una tabla con todas las pseudo clases soportadas:
Formato Nombre A los elementos se les aplica estilo si Compatibilidad
Pseudo clases de Enlace y Dinmicos
:link Enlace el valor del atributo href no est en el histrico IE4, FF1, O3.5, S1, CSS1
:visited Enlace Visitado el valor del atributo href est en el histrico IE4, FF1, O3.5, S1, CSS1
:target Enlace Objetivo un enlace objetivo FF1.3, O9.5, S1.3, CSS3
:active Activo se ha hecho click sobre el elemento IE7, FF1, O3.5, S1, CSS1
:hover Sobre el cursor se encuentra sobre el elemento IE4*, FF1, O3.5, S1, CSS2
:focus Foco el elemento captura el foco del documento IE7, FF1, O7, S1, CSS2
* Solo disponible para el elemento a antes de IE7

P

g
i
n
a
6

Pseudo clases Estructurales y Otras
:root Raz es el elemento principal de un documento FF1.5, O9.5, S3.1, C3, CSS3
:empty Vaco no tiene nodos hijos FF1.5, O9.5, S3.1, C3, CSS3
:only-child Hijo nico no tiene nodos hermanos FF1.5, O9.5, S3.1, C3, CSS3
:only-of-type Solo del Tipo tiene un selector nico entre sus hermanos FF1.5, O9.5, S3.1, C3, CSS3
:first-child Primer Hijo es el primer nodo hijo de otro elemento FF1.5, O9.5, S3.1, C3, CSS3
:nth-of-
type(n)
Nth del Tipo es el nth elemento con ese selector FF1.5, O9.5, S3.1, C3, CSS3
:last-child ltimo Hijo es el ltimo nodo hijo de un elemento FF1.5, O9.5, S3.1, C3, CSS3
:first-of-type Primero del Tipo es el primer elemento de su tipo de selector en el elemento
primario
FF1.5, O9.5, S3.1, C3, CSS3
:last-of-type ltimo del Tipo es el ltimo elemento de su tipo de selector en el elemento
primario
FF1.5, O9.5, S3.1, C3, CSS3
:lang Lenguaje tiene un cdigo de lenguaje especficamente definido IE8, FF1.5, O9.5, S3.1, C3, CSS2.1
:not Negacin no est usando un selector especfico FF1.5, O9.5, S3.1, C3, CSS3
* Parece ser que IE9 soporta todas las pseudo clases. Y pasa los tests de CSS3.info

Algunas veces, los diseadores necesitan dar estilo al primer elemento nodo hijo de otro elemento. Esto es muy habitual por
ejemplo con las listas. El pseudo elemento :first-child ha estado disponible desde CSS2, sin embargo CSS3 ofrece mucha ms
potencia a la hora de trabajar con este tipo de problema.
:first-child: Fija el aspecto del primer elemento de un tipo de selector si es el primer nodo hijo de su elemento padre.
:first-of-type: Fija el aspecto del primer elemento de un tipo de selector si es el primer nodo hijo que aparece con su tipo de
selector en su elemento padre (esto parece complejo pero en los ejemplos veremos que no lo es).
:nth-child(#): Fija el aspecto de una ocurrencia especfica del elemento nodo hijo especificado. Por ejemplo, el tercer elemento
nodo hijo de una lista no ordenada sera li:nth-child(3). Adems se pueden usar pequeas expresiones como parmetro para
por ejemplo seleccionar todos los elementos impares:li:nth-child(2n+1);, los pares: li:nth-child(2n);. Los elementos impares
tambin pueden ser seleccionados con li:nth-child(odd);
:nth-of-type(#): Fija la apariencia de una ocurrencia especfica del elemento con el tipo de selector especificado en un elemento
padre. Por ejemplo la segunda lista no ordenada sera ul:nth-of-type(2). Tambin permite los mismos parmetros que :nth-
child(#).
:nth-last-of-type(#): Fija el aspecto de una ocurrencia especfica del elemento con el tipo de selector especificado pero desde
abajo. Por ejemplo la octava lista no ordenada empezando por abajo sera ul:nth-last-of-type(8). Tambin le es aplicable la
parametrizacin de :nth-child(#). Para ms informacin sobre las pseudo clases estructurales puedes visitar la pgina de la
especificacin en la W3C.
:last-child: Fija el aspecto del ltimo hijo del tipo de selector de un elemento padre.
:last-of-type: Fija el aspecto de la ltima instancia de un selector particular en el elemento padre.
Bueno, voy a escribir un cacho de ejemplo para mostrar todo esto utilizando las conocidas listas no ordenadas:
<ul id="ex">
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
<li>Cuarto</li>
<li>Quinto</li>
</ul>
Ya tenemos el cdigo HTML ahora vamos a escribir el CSS:

li:first-child { font-size: .9em; }

P

g
i
n
a
7

li:first-of-type { color: blue; }
li:nth-of-type(4) { font-size: 2em; }
li:nth-last-of-type(3) { font-size: 1.5em; }
li:last-of-type { color: blue; }
li:last-child { font-size: 2.5em; }
Esto debe de renderizar los elementos de la lista de menor a mayor tamao de fuente y el primer y ltimo elemento de la lista
deben ser azules:
Primero
Segundo
Tercero
Cuarto
Quinto
Aplicando estilo a idiomas en particular
La pseudo clase :lang() nos permite especificar estilos que dependen del idioma especificado por la propiedad language:
<p>Esto es Castellano</p>
<p lang="en">This is English</p>
Ahora el cdigo CSS:

p:lang(en) {
color: blue;
font-style: italic;
font-weight: bold;
}

Esto mostrara el prrafo en Ingls en cursiva y negrita:
Esto es Castellano This is English
Pasando de aplicar estilo a un elemento
Si no queremos dar estilo a un selector especfico, ahora podemos hacerlo gracias al pseudo elemento :not:
<p>Esto es una serie de prrafos para no perder costumbre con el elemento del ejemplo</p>
<p class="notme">Yo no debo de tener el estilo del resto de prrafos por que soy <em>guai</em></p>
<p>Y bueno, es un ejemplo muy tonto pero funciona. no?</p>
Ahora el cdigo CSS:

p:not(.notme) {

P

g
i
n
a
8

color: blue;
font-style: italic;
}
El prrafo del medio no debera de tener la fuente en color azul y cursiva:
Esto es una serie de prrafos para no perder costumbre con el elemento del ejemplo
Yo no debo de tener el estilo del resto de prrafos por que soy guai Y bueno, es un ejemplo muy tonto pero funciona. no?

Selectores de CSS 3 2DA. PARTE
Al igual que las pseudoclases, los pseudoelementos se aaden a los selectores, pero, a diferencia de las primeras, no describen un
estado sino que permiten aadir estilos a una parte concreta del documento. Por ejemplo, el pseudoelemento ::first-
line selecciona solo la primera lnea del elemento especificado por el selector.
La futura versin CSS 3 incluye todos los selectores de CSS 2.1 y aade otras decenas de selectores, pseudo-clases y pseudo-
elementos. La lista provisional de novedades y su explicacin detallada se puede encontrar en el mdulo de selectores de CSS 3.
En primer lugar, CSS 3 aade tres nuevos selectores de atributos:
elemento[atributo^="valor"], selecciona todos los elementos que disponen de ese atributo y cuyo valor comienza
exactamente por la cadena de texto indicada.
elemento[atributo$="valor"], selecciona todos los elementos que disponen de ese atributo y cuyo valor termina
exactamente por la cadena de texto indicada.
elemento[atributo*="valor"], selecciona todos los elementos que disponen de ese atributo y cuyo valor contiene la cadena
de texto indicada.
De esta forma, se pueden crear reglas CSS tan avazadas como las siguientes:
/* Selecciona todos los enlaces que apuntan a una direccin de correo electrnico */
a[href^="mailto:"] { ... }
/* Selecciona todos los enlaces que apuntan a una pgina HTML */
a[href$=".html"] { ... }
/* Selecciona todos los ttulos h1 cuyo atributo title contenga la palabra "captulo" */
h1[title*="captulo"] { ... }
Otro de los nuevos selectores de CSS 3 es el "selector general de elementos hermanos", que generaliza el selector adyacente de CSS 2.1.
Su sintaxis es elemento1 ~ elemento2 y selecciona el elemento2 que es hermano de elemento1 y se encuentra detrs en el cdigo
HTML. En el selector adyacente la condicin adicional era que los dos elementos deban estar uno detrs de otro en el cdigo
HTML, mientras que ahora la nica condicin es que uno est detrs de otro.
Si se considera el siguiente ejemplo:
h1 + h2 { ... } /* selector adyacente */
h1 ~ h2 { ... } /* selector general de hermanos */
<h1>...</h1>

P

g
i
n
a
9

<h2>...</h2>
<p>...</p>
<div>
<h2>...</h2>
</div>
<h2>...</h2>
El primer selector (h1 + h2) slo selecciona el primer elemento <h2> de la pgina, ya que es el nico que cumple que es
hermano de <h1> y se encuentra justo detrs en el cdigo HTML. Por su parte, el segundo selector (h1 ~ h2) selecciona todos
los elementos <h2> de la pgina salvo el segundo. Aunque el segundo <h2>se encuentra detrs de <h1> en el cdigo HTML,
no son elementos hermanos porque no tienen el mismo elemento padre.
Los pseudo-elementos de CSS 2.1 se mantienen en CSS 3, pero cambia su sintaxis y ahora se utilizan :: en vez de : delante del
nombre de cada pseudo-elemento:
::first-line, selecciona la primera lnea del texto de un elemento.
::first-letter, selecciona la primera letra del texto de un elemento.
::before, selecciona la parte anterior al contenido de un elemento para insertar nuevo contenido generado.
::after, selecciona la parte posterior al contenido de un elemento para insertar nuevo contenido generado.
CSS 3 aade adems un nuevo pseudo-elemento:
::selecion, selecciona el texto que ha seleccionado un usuario con su ratn o teclado.
Las mayores novedades de CSS 3 se producen en las pseudo-clases, ya que se aaden 12 nuevas, entre las cuales se encuentran:
elemento:nth-child(numero), selecciona el elemento indicado pero con la condicin de que sea el hijo ensimo de su
padre. Este selector es til para seleccionar el segundo prrafo de un elemento, el quinto elemento de una lista, etc.
elemento:nth-last-child(numero), idntico al anterior pero el nmero indicado se empieza a contar desde el ltimo hijo.
elemento:empty, selecciona el elemento indicado pero con la condicin de que no tenga ningn hijo. La condicin implica
que tampoco puede tener ningn contenido de texto.
elemento:first-child y elemento:last-child, seleccionan los elementos indicados pero con la condicin de que sean
respectivamente los primeros o ltimos hijos de su elemento padre.
elemento:nth-of-type(numero), selecciona el elemento indicado pero con la condicin de que sea el ensimo elemento
hermano de ese tipo.
elemento:nth-last-of-type(numero), idntico al anterior pero el nmero indicado se empieza a contar desde el ltimo hijo.
Algunas pseudo-clases como :nth-child(numero) permiten el uso de expresiones complejas para realizar selecciones avanzadas:
li:nth-child(2n+1) { ... } /* selecciona todos los elementos impares de una lista */
li:nth-child(2n) { ... } /* selecciona todos los elementos pares de una lista */
/* Las siguientes reglas alternan cuatro estilos diferentes para los prrafos */

P

g
i
n
a
1
0

p:nth-child(4n+1) { ... }
p:nth-child(4n+2) { ... }
p:nth-child(4n+3) { ... }
p:nth-child(4n+4) { ... }
Empleando la pseudo-clase :nth-of-type(numero) se pueden crear reglas CSS que alternen la posicin de las imgenes en funcin
de la posicin de la imagen anterior:
img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }
Otro de los nuevos selectores que incluir CSS 3 es :not(), que se puede utilizar para seleccionar todos los elementos que no
cumplen con la condicin de un selector:
:not(p) { ... } /* selecciona todos los elementos de la pgina que no sean prrafos */
:not(#especial) { ... } /* selecciona cualquier elemento cuyo atributo id no sea "especial" */
Aunque todava faltan muchos aos hasta que la versin CSS 3 sustituya a la actual versin CSS 2.1, los navegadores que ms se
preocupan por los estndares (Opera, Safari y Firefox) incluyen soporte para varios o casi todos los selectores de CSS 3.
Existe una herramienta llamada CSS Selectors test que permite comprobar los selectores que soporta el navegador con el que se
hace la prueba.
:nth-child(N). Selecciona los elementos en base a sus posiciones en una lista de elementos hijos dentro de un elemento padre. N es
el nmero de la posicin.
Cdigo :
/*Selecciona los elementos impares de la clase .nthchild*/
.nthchild:nth-child(odd){
color:red;
}
:nth-last-child(N). Selecciona los elementos tomando de referencia el ltimo elemento de una lista. N es el nmero de posicin
desde el ltimo elemento, donde el valor 1 equivaldra al ltimo.
Cdigo :
/*Selecciona el penltimo elemento de la clase .nthlastchild*/
.nthlastchild:nth-last-child(2){
color:blue;
}

P

g
i
n
a
1
1

:nth-of-type(N). Selecciona los elementos de un tipo concreto dentro de los hijos de un elemento padre.
Cdigo :
/*Selecciona los prrafos pares dentro de una capa*/
div>p:nth-of-type(even){
color:red;
}
:nth-last-of-type(N). Igual que el anterior tomando como referencia el ltimo elemento de la lista.
:last-child. Selecciona el ltimo elemento de la lista de elementos hijos. Sera el anlogo al :first-child de CSS2 y es equivalente a
:nth-last-child(1).
:first-of-type. Selecciona el primer elemento de un tipo concreto dentro de la lista de hijos.
Cdigo :
/*Selecciona el primer prrafo dentro de una capa*/
div>p:first-of-type{
font-style:italic;
}
:last-of-type. Selecciona el ltimo elemento de un tipo.
Cdigo :
/*Selecciona el ltimo prrafo dentro de una capa*/
div>p:last-of-type{
font-style:italic;
}
:only-child. Selecciona el elemento si es el nico elemento hijo.
:only-of-type. Selecciona el elemento si es el nico elemento hijo de ese tipo.
:root. Selecciona el elemento raz del documento.
:empty. Selecciona los elementos que no tienen hijos.
:enabled. Selecciona los elementos de la interfaz que tengan un estado de enable.
:disabled. Selecciona los elementos de la interfaz que tengan un estado disabled.
:checked. Selecciona los checkboxes o radio buttons que estn activados.
:not(S). Selecciona los elementos que no coincidan con el selector especificado.

P

g
i
n
a
1
2

Cdigo :
/*Selecciona los h3 que no pertenezcan a la clase .rojo*/
h3:not(.rojo){
font-style:italic;
}
Veamos algunos, que ya existan en CSS2.1 y que solo cambian un poco su sintxis y alguno nuevo en CSS3:
::first-line
El pseudo-elemento ::first-line nos permite seleccionar la primera lnea de texto de un elemento. Por ejemplo, la siguientes lneas
CSS nos mostrarn en maysculas la primera lnea de cada prrafo:
1
2
3
p::first-line {
text-transform: uppercase;
}
::first-letter
El pseudo-elemento ::first-letter permite seleccionar la primera letra de la primera lnea de texto de un elemento. Por ejemplo, para
mostrar en maysculas la primera letra del texto de cada prrafo podramos:
1
2
3
p::first-letter {
text-transform: uppercase;
}
::before y ::after
Los pseudo-elementos ::before y ::after se utilizan en combinacin con la propiedad content de CSS para aadir contenidos antes o
despus del contenido original de un elemento.
Por ejemplo, las siguientes reglas CSS aaden el texto Unidad delante de cada ttulo de seccin H1 y el carcter . detrs de
cada prrafo:
1
2
h1::before { content: "Unidad - "; }
p::after { content: "."; }
El contenido insertado mediante los pseudo-elementos :before y :after se tiene en cuenta en los otros pseudo-elementos :first-
line y :first-letter.
::selection
El pseudo-elemento ::selection referencia al texto seleccionado por el usuario. Por ejemplo, con estas lneas CSS, cuando
seleccionemos el texto del prrafo, la seleccin tendr color de fondo azul en vez del tpico gris.
1
2
3
4
p::selection{
background-color:blue;

}
Salvo este ltimo, los dems ya podamos utilizarlos en CSS2.1. La nica diferencia es que antes se utilizaban con :, por
ejemplo :after y ahora en CSS3 es con ::, es decir ::after.













P

g
i
n
a
1
3

Analicemos los puntos tratados a travs del siguiente ejemplo:
Cdigo HTML5

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="ejemplo de HTML5">
<meta name="KEYWORDS" content="HTML5, CSS3, JAVASCRIPT">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('li').has('ul').mouseover(function(){
$(this).children('ul').show();
}).mouseout(function(){
$(this).children('ul').hide();
})
}
});
</script>
<title>Sistema Web-SOLITECH FJ</title>
<<link rel = "stylesheet" href ="estilo-estructura-page.css">
</head>

<body>
<div>
<div id="agrupar">
<header id="cabecera">
<h1>Este es el titulo principal del sitio web</h1>
<div id="Logotipo">
<img src="./Imagenes/logo.gif" alt="Logotipo FDV" />
</div>
</header>

<nav>
<ul id="menu">
<li><a href="inicio.html">Home</a></li>
<li><a href="categoria.html">Categories</a>
<ul>
<li><a href="css.html">CSS</a></li>
<li><a href="graficos.html">Graphic
design</a></li>
<li><a href="herramientas.html">Development
tools</a></li>
<li><a href="web.html">Web design</a></li>
</ul>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

P

g
i
n
a
1
4


<section id="seccion">

</section>

<aside id="columna">
<blockquote>Mensaje uno </blockquote>
<blockquote>Mensaje dos </blockquote>
</aside>

<footer id="pie">
Derechos Reservados &copy; 2013-2014
</footer>
</div>
</div>
</body>
</html>


AHORA EL CODIGO CSS3

#body
{
text-align: center;
}

#agrupar
{
width:960px;
margin:15px auto;
text-align:left;
}

#cabecera
{
border: 1px solid #999999;
padding: 20px;
height:150px;
/*background-color: #FFFBB9;
border-radius: 0px 0px 10px 10px;
box-shadow: 0px 0px 10px #000 inset;*/
position: relative;
z-index:2;
color:blue;
background: linear-gradient(30deg, #FFFFFF, #006699);
/*
background:url(\Imagenes\pro_five_0b.gif) no-repeat right top;
background: linear-gradient(top, #FFFFFF 50%, #006699 90%);
background: radial-gradient(center, circle, #FFFFFF 0%, #006699 200%);
border:1px dashed #a64e06;*/

}
#ContenidoCabezera
{
width:960px;
margin: auto;

P

g
i
n
a
1
5

box-shadow:0px 0px 3px #000;
}

#Logotipo
{
width:20%;
float: right;
text-align:center;
margin-top: auto;
/*height:120px;*/
}

#Logotipo >img
{
box-shadow: 0px 0px 5px #000;
}

/*menu*/
/*Cambia los estilos predeterminados de ul.*/
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
/*El selector #menu es bsicamente el ul principal de este men. las siguiente reglas de CSS3
nos ayudan a crear gradientes, sombras y esquinas redondeadas al menu*/
#menu {
width: 960px;
/*margin: 60px auto;*/
margin:0; list-style:none;
border: 1px solid #222;
/*background-color: #111;*/
background-color: #111033;
background-image: linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777;
}
/*caja vacia*/
#menu:before,
#menu:after {
content: "";
display: table;
}

#menu:after {
clear: both;
}

#menu {
zoom:1;
}

/*lista de elementos*/
#menu li {
float: left;
border-right: 1px solid #222;

P

g
i
n
a
1
6

box-shadow: 1px 0 0 #444;
position: relative;
}
/*Selecciona un elemento "a" de que es hijo de un "li";
el elemento "li" debe ser un descendiente del "#Menu".*/
#menu a {
float: left;
padding: 12px 30px;
color: #999; /* Colors: Light Gray #eaeaea, Dark Gray #828282, Red #c60000 */
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}

#menu li:hover > a {
color: #fafafa;
/*color: red;*/
}
}

*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}

/*Reglas CSS3 utilizadas para animar a los submens a traves de transiciones*/
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
border-radius: 3px;
transition: all .2s ease-in-out;
}

#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}

#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}


P

g
i
n
a
1
7

#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menu ul li:last-child {
box-shadow: none;
}

#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

#menu ul a:hover {
background-color: #0186ba;
background-image: linear-gradient(#04acec, #0186ba);
}

#seccion
{
float: right;
width: 690px;
margin: 6px 0px;
min-height: 639px;
/*background-color: #a64e06;*/
background: radial-gradient(center, circle, #FFFFFF 0%, #006699 200%);
border: 1px solid #999999;
/*box-shadow:0px 0px 5px #000 inset;*/
}

/*estilo del primer y ultimo elemento*/ Primera y ltima lista de elementos de estilos
#menu ul li:first-child > a {
border-radius: 3px 3px 0 0;
}

#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}

#menu ul ul li:first-child a:after {
left: -6px;

P

g
i
n
a
1
8

top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}

#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}

#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}

#menu ul li:last-child > a {
border-radius: 0 0 3px 3px;
}

/*estilo para la columna izquierda*/
#columna {
float: left;
width: 216px;/* 220px*/
min-height: 600px;
margin: 6px 0px;
padding: 20px;
/*background: #a64e06;*/
background: linear-gradient(top, #FFFFFF 50%, #006699 90%);
border: 1px solid #999999;
}
/*estilo para el pie de la pagina*/
#pie
{
clear: both;
text-align: center;
/*padding: 20px;
border-top: 2px solid #999999;*/
height:40px;
background-color: #A64E06;
/*border-radius: 0px 0px 20px 20px;
box-shadow:0px 0px 5px #000 inset;*/
}

Das könnte Ihnen auch gefallen