Hojas de estilo en cascada

(CSS)

2. Selectores
 Selectores
• El selector es la parte de la regla de estilo que identifica el elemento concreto al que
se aplicarán las instrucciones de presentación. CSS ofrece varios tipos de selectores
que permiten mejorar la flexibilidad y la eficiencia en la creación de hojas de estilo.
• La declaración indica "qué hay que hacer" y el selector indica "a quién hay que
hacérselo". Por lo tanto, los selectores son imprescindibles para aplicar de forma
correcta los estilos CSS en una página.
• A un mismo elemento HTML se le pueden aplicar varias reglas CSS y cada regla CSS
puede aplicarse a un número ilimitado de elementos. En otras palabras, una misma
regla puede aplicarse sobre varios selectores y un mismo selector se puede utilizar
en varias reglas.

• Regla de estilo CSS:

selector { regla1: valor;

regla2: valor; ...}

2
 Selectores básicos. Selector universal
• Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo
elimina el margen y el relleno de todos los elementos HTML (por ahora no es
importante fijarse en la parte de la declaración de la regla CSS):

• El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no

se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a
todos los elementos de una página.

3
 Selectores Básicos. Basados en etiquetas.
• Asocia a cada etiqueta una declaración del estilo que se le aplica al selector. El
atributo hace referencia a la característica que se quiere modificar de la etiqueta.
• Partiendo del siguiente código y salida:

4
 Selectores Básicos. Basados en etiquetas.
• Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el
valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página:
p{
...
}
• Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta
HTML (sin los caracteres < y >) correspondiente a los elementos que se quieren
seleccionar.
• El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos de una
página HTML:

5
 Selectores Básicos. Basados en etiquetas.
• Si se quiere aplicar los mismos estilos • CSS permite agrupar todas las reglas
a dos etiquetas diferentes, se pueden individuales en una sola regla con un
encadenar los selectores. En el selector múltiple. Para ello, se
siguiente ejemplo, los títulos de incluyen todos los selectores
sección h1, h2 y h3 comparten los separados por una coma (,) y el
mismos estilos: resultado es que la siguiente regla CSS
es equivalente a las tres reglas
anteriores:

6
 Selectores Básicos. Basados en etiquetas.
• En las hojas de estilo complejas, es habitual agrupar las propiedades comunes de
varios elementos en una única regla CSS y posteriormente definir las propiedades
específicas de esos mismos elementos. El siguiente ejemplo establece en primer
lugar las propiedades comunes de los títulos de sección (color y tipo de letra) y a
continuación, establece el tamaño de letra de cada uno de ellos:

7
 Selectores Básicos. Selector descendente
• Selecciona los elementos que se encuentran dentro de otros elementos. Un
elemento es descendiente de otro cuando se encuentra entre las etiquetas de
apertura y de cierre del otro elemento.
• El selector del siguiente ejemplo selecciona todos los elementos <span> de la
página que se encuentren dentro de un elemento <p>:

El selector p span selecciona tanto texto1

como texto2. El motivo es que en el
selector descendente, un elemento no
tiene que ser descendiente directo del
otro. La única condición es que un
elemento debe estar dentro de otro
elemento, sin importar el nivel de
profundidad en el que se encuentre.
Al resto de elementos <span> de la
página que no están dentro de un
elemento <p>, no se les aplica la regla
CSS anterior.

8
 Selectores Básicos. Selector descendente
• Los selectores descendentes permiten aumentar la precisión del
selector de tipo o etiqueta. Así, utilizando el selector descendente es
posible aplicar diferentes estilos a los elementos del mismo tipo. El
siguiente ejemplo amplía el anterior y muestra de color azul todo el
texto de los <span> contenidos dentro de un <h1>:

• Con las reglas CSS anteriores:

• Los elementos <span> que se encuentran dentro de un elemento <p> se
muestran de color rojo.
• Los elementos <span> que se encuentran dentro de un elemento <h1>
se muestran de color azul.
• El resto de elementos <span> de la página, se muestran con el color por
defecto aplicado por el navegador.
• La sintaxis formal del selector descendente se muestra a continuación:

selector1 selector2 selector3 ... selectorN

9
 Selectores Básicos. Selector descendente
• Los selectores descendentes siempre están formados por dos o
más selectores separados entre sí por espacios en blanco. El
último selector indica el elemento sobre el que se aplican los
estilos y todos los selectores anteriores indican el lugar en el
que se debe encontrar ese elemento.
• En el siguiente ejemplo, el selector descendente se compone
de cuatro selectores:

• Los estilos de la regla anterior se aplican a los elementos de tipo <em> que
se encuentren dentro de elementos de tipo <span>, que a su vez se
encuentren dentro de elementos de tipo <a> que se encuentren dentro de
elementos de tipo <p>.

10
 Selectores Básicos. Selector descendente
• No debe confundirse el selector descendente con la
combinación de selectores: (Observad que van separados por
comas).

• Se puede restringir el alcance del selector descendente

combinándolo con el selector universal.
– En el siguiente ejemplo, el selector descendiente a aplica a
los dos enlaces, puesto que ambos se localizan bajo un
selector de tipo <p>, por tanto, los dos serán de color rojo:

11
 Selectores Básicos. Selector descendente
• Sin embargo, en el siguiente ejemplo solamente el segundo enlace se muestra de
color rojo:

• La razón es que el selector p * a se interpreta como todos los elementos de tipo <a>
que se encuentren dentro de cualquier elemento que, a su vez, se encuentre dentro
de un elemento de tipo <p>. Como el primer elemento <a> se encuentra
directamente bajo un elemento <p>, no se cumple la condición del selector p * a.

12
 Selectores basados en clases
• Si se considera el siguiente código HTML de ejemplo:

• ¿Cómo se pueden aplicar estilos CSS sólo al primer párrafo? El selector

universal (*) no se puede utilizar porque selecciona todos los elementos de la
página. El selector de tipo o etiqueta (p) tampoco se puede utilizar porque
seleccionaría todos los párrafos. Por último, el selector descendente (body p)
tampoco se puede utilizar porque todos los párrafos se encuentran en el mismo
sitio.
Una de las soluciones más
sencillas para aplicar estilos a un
solo elemento de la página
consiste en utilizar el atributo
class de HTML sobre ese
elemento para indicar
directamente la regla CSS que se
le debe aplicar: 13
 Selectores basados en clases
• A continuación, se crea en el archivo CSS una nueva regla llamada destacado con
todos los estilos que se van a aplicar al elemento. Para que el navegador no
confunda este selector con los otros tipos de selectores, se prefija el valor del
atributo class con un punto (.) tal y como muestra el siguiente ejemplo:

• El selector .destacado se interpreta como "cualquier elemento de la página cuyo

atributo class sea igual a destacado", por lo que solamente el primer párrafo
cumple esa condición.
• Este tipo de selectores se llaman selectores de clase y son los más utilizados junto
con los selectores de ID que se verán a continuación. La principal característica de
este selector es que en una misma página HTML varios elementos diferentes
pueden utilizar el mismo valor en el atributo class:

14
 Selectores basados en clases
• A continuación se muestra otro ejemplo de selectores de clase:

El elemento <span> tiene un

atributo class="error", por lo
que se le aplican las reglas CSS
indicadas por el selector .error.
Por su parte, el elemento <div>
tiene un atributo class="aviso",
por lo que su estilo es el que
definen las reglas CSS del
selector .aviso.

15
 Selectores basados en clases
• En ocasiones, es necesario restringir el alcance del selector de clase. Si se considera
de nuevo el ejemplo anterior:

16
 Selectores basados en clases
• ¿Cómo es posible aplicar estilos solamente al párrafo cuyo atributo class sea igual a
destacado? Combinando el selector de tipo y el selector de clase, se obtiene un
selector mucho más específico:

• El selector [Link] se interpreta como "aquellos elementos de tipo <p> que

dispongan de un atributo class con valor destacado". De la misma forma, el selector
[Link] solamente selecciona los enlaces cuyo atributo class sea igual a
destacado.
• De lo anterior se deduce que el atributo .destacado es equivalente a *.destacado,
por lo que todos los diseñadores obvian el símbolo * al escribir un selector de clase
normal.

17
 Selectores basados en clases
• No debe confundirse el selector de clase con los selectores anteriores:

18
 Selectores basados en clases
• Es posible aplicar los estilos de varias clases CSS sobre un mismo elemento. La
sintaxis es similar, pero los diferentes valores del atributo class se separan con
espacios en blanco. En el siguiente ejemplo:

• Al párrafo anterior se le aplican los estilos definidos en las reglas .especial,

.destacado y .error, por lo que en el siguiente ejemplo, el texto del párrafo se vería
de color rojo, en negrita y con un tamaño de letra de 15 píxel:

• En el ejemplo anterior, el color de la letra del texto es azul y no rojo. El motivo es

que se ha utilizado un selector de clase múltiple .[Link], que se interpreta
como "aquellos elementos de la página que dispongan de un atributo class con al
menos los valores error y destacado".
19
 Selectores basados en clases
Estas clases se asocian a una etiqueta.

Código:

Salida:

20
Selectores basados en clases abstractas
Clases que se pueden aplicar a cualquier etiqueta.

Código:

Salida:

21
Asocia una clase a una misma etiqueta
Asocia más de una clase a una misma etiqueta, siempre y cuando no haya conflicto entre
ellas.

Código:

Salida:

22
 Selectores de id
• En ocasiones, es necesario aplicar estilos CSS a un único elemento de la página.
Aunque puede utilizarse un selector de clase para aplicar estilos a un único
elemento, existe otro selector más eficiente en este caso.
• El selector de ID permite seleccionar un elemento de la página a través del valor de
su atributo id. Este tipo de selectores sólo seleccionan un elemento de la página
porque el valor del atributo id no se puede repetir en dos elementos diferentes de
una misma página.
• La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase,
salvo que se utiliza el símbolo de la almohadilla (#) en vez del punto (.) como prefijo
del nombre de la regla CSS:

En el ejemplo anterior, el
selector #destacado
solamente selecciona el
segundo párrafo (cuyo
atributo id es igual a
destacado).

23
 Selectores de id
• La principal diferencia entre este tipo de selector y el selector de clase tiene que ver
con HTML y no con CSS. Como se sabe, en una misma página, el valor del atributo id
debe ser único, de forma que dos elementos diferentes no pueden tener el mismo
valor de id. Sin embargo, el atributo class no es obligatorio que sea único, de forma
que muchos elementos HTML diferentes pueden compartir el mismo valor para su
atributo class.
• De esta forma, la recomendación general es la de utilizar el selector de ID cuando se
quiere aplicar un estilo a un solo elemento específico de la página y utilizar el
selector de clase cuando se quiere aplicar un estilo a varios elementos diferentes de
la página HTML.
• Al igual que los selectores de clase, en este caso también se puede restringir el
alcance del selector mediante la combinación con otros selectores. El siguiente
ejemplo aplica la regla CSS solamente al elemento de tipo <p> que tenga un
atributo id igual al indicado:

24
 Selectores de id
• A primera vista, restringir el alcance de un selector de ID puede parecer absurdo. En
realidad, un selector de tipo p#aviso sólo tiene sentido cuando el archivo CSS se
aplica sobre muchas páginas HTML diferentes.
• En este caso, algunas páginas pueden disponer de elementos con un atributo id
igual a aviso y que no sean párrafos, por lo que la regla anterior no se aplica sobre
esos elementos.
• No debe confundirse el selector de ID con los selectores anteriores:

25
 En lugar de utilizar . Utilizamos #
Los identificadores sólo se pueden usar en un único elemento. Se diferencian en que en
lugar de usar “.”, se usa “#”. Se sustituye también class por id.

Código:

Salida:

26
En lugar de utilizar . Utilizamos #
Código:

Salida:

27
 Selectores. Combinación
• CSS permite la combinación de uno o más tipos de selectores para restringir el
alcance de las reglas CSS. A continuación se muestran algunos ejemplos habituales
de combinación de selectores.
.aviso .especial { ... }
• El anterior selector solamente selecciona aquellos elementos con un
class="especial" que se encuentren dentro de cualquier elemento con un
class="aviso".
• Si se modifica el anterior selector:
[Link] [Link] { ... }
• Ahora, el selector solamente selecciona aquellos elementos de tipo <span> con un
atributo class="especial" que estén dentro de cualquier elemento de tipo <div> que
tenga un atributo class="aviso".
• La combinación de selectores puede llegar a ser todo lo compleja que sea
necesario:

• El anterior selector hace referencia al enlace con un atributo id igual a inicio que se
encuentra dentro de un elemento de tipo <li> con un atributo class igual a
destacado, que forma parte de una lista <ul> con un atributo id igual a
menuPrincipal.

28
 Selector anidado común

Este tipo de anidamiento es útil cuando, por ejemplo, se desea ver en rojo un texto en
negrita siempre y cuando esté incluido dentro de una etiqueta<h1> y en cursiva <i>
aunque entre medias haya otras etiquetas
29
 Selector anidado común
En principio no hay límite en el número de anidamiento que se pueden hacer, sin
embargo no es recomendable un anidamiento de más de 4 0 5 por motivos de
complejidad tanto para el navegador como para los diseñadores.
El anidamiento común se comporta igual si las etiquetas son consecutivas como si hay
etiquetas intermedias. El siguiente anidamiento mostrará las dos etiquetas en rojo:

30
Selectores avanzados: Selector de Hijos
Lo utilizaremos cuando queramos que sólo se cumpla la condición si
el elemento es hijo directo de otro elemento. Siguiendo con el ejemplo
anterior veremos que utilizamos el signo >, es la única diferencia, y
comprobamos que sólo aparece en rojo y en negrita cuando están
seguidos.

31
 Selectores avanzados: Selector de hijos
• Se trata de un selector similar al selector descendente, pero muy diferente en su
funcionamiento. Se utiliza para seleccionar un elemento que es hijo directo de otro
elemento y se indica mediante el "signo de mayor que" (>):

• En el ejemplo anterior, el selector p > span se interpreta como "cualquier elemento

<span> que sea hijo directo de un elemento <p>", por lo que el primer elemento
<span> cumple la condición del selector. Sin embargo, el segundo elemento <span>
no la cumple porque es descendiente pero no es hijo directo de un elemento <p>.

32
 Selectores avanzados: Selector de hijos
• El siguiente ejemplo muestra las diferencias entre el selector descendente y el
selector de hijos:

• El primer selector es de tipo descendente y por tanto se aplica a todos los

elementos <a> que se encuentran dentro de elementos <p>. En este caso, los estilos
de este selector se aplican a los dos enlaces.
• Por otra parte, el selector de hijos obliga a que el elemento <a> sea hijo directo de
un elemento <p>. Por lo tanto, los estilos del selector p > a no se aplican al segundo
enlace del ejemplo anterior.

33
 Selectores avanzados: Selector de hijos
• En el siguiente ejemplo comprobamos que deben cumplirse la condición completa
de hijos.

34
 Selectores avanzados: Selectores adyacentes
• El selector adyacente se emplea para seleccionar elementos que en el código HTML
de la página se encuentran justo a continuación de otros elementos. Su sintaxis
emplea el signo + para separar los dos elementos:

El ejemplo anterior dispone de dos

elementos <h2>, pero sólo uno de ellos
se encuentra inmediatamente después
• Si se considera el siguiente código HTML:
del elemento <h1>. Si se quiere aplicar
diferentes colores en función de esta
circunstancia, el selector adyacente es
el más adecuado:

Las reglas CSS anteriores hacen que

todos los <h2> de la página se vean de
color verde, salvo aquellos <h2> que se
encuentran inmediatamente después
de cualquier elemento <h1> y que se
muestran de color rojo. 37
 Selectores avanzados: Selectores adyacentes
• Técnicamente, los elementos que forman el selector adyacente deben cumplir las
dos siguientes condiciones:
• elemento1 y elemento2 deben ser elementos hermanos, por lo que su elemento
padre debe ser el mismo.
• elemento2 debe aparecer inmediatamente después de elemento1 en el código
HTML de la página.
• El siguiente ejemplo es muy útil para los textos que se muestran como libros:

• En muchos libros, suele ser habitual que la primera línea de todos los párrafos esté
indentada, salvo la primera línea del primer párrafo. Con el selector p + p, se
seleccionan todos los párrafos de la página que estén precedidos por otro párrafo,
por lo que no se aplica al primer párrafo de la página.
• Los elementos hermanos deben tener el mismo elemento padre, y "adyacente"
significa "inmediatamente después".

38
Selectores avanzados: Selectores adyacentes

39
Selectores avanzados: Selectores
adyacentes

40
 Selectores avanzados: Selectores Hermanos
• 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 detrás en el código HTML. En el selector adyacente la condición
adicional era que los dos elementos debían estar uno detrás de otro en el código
HTML, mientras que ahora la única condición es que uno esté detrás de otro.

El primer selector (h1 + h2) sólo selecciona el primer elemento <h2> de la página, ya
que es el único que cumple que es hermano de <h1> y se encuentra justo detrás en el
código HTML. Por su parte, el segundo selector (h1 ~ h2) selecciona todos los
elementos <h2> de la página salvo el segundo. Aunque el segundo <h2> se encuentra
detrás de <h1> en el código HTML, no son elementos hermanos porque no tienen el
mismo elemento padre.
41
 Selectores avanzados: Selectores
adyacentes/Hermanos
• Si se considera el siguiente ejemplo, ¿Cuál sería el resultado?:

42
 Selectores avanzados: Selectores
adyacentes/Hermanos
• Resultado:

43
Selectores avanzados: mezcla

44
 Selectores de atributos
• El último tipo de selectores avanzados lo forman los selectores de atributos, que
permiten seleccionar elementos HTML en función de sus atributos y/o valores de
esos atributos.
• Los cuatro tipos de selectores de atributos son:
• [nombre_atributo], selecciona los elementos que tienen establecido el atributo
llamado nombre_atributo, independientemente de su valor.
• [nombre_atributo=valor], selecciona los elementos que tienen establecido un
atributo llamado nombre_atributo con un valor igual a valor.
• [nombre_atributo~=valor], selecciona los elementos que tienen establecido un
atributo llamado nombre_atributo y al menos uno de los valores del atributo es
valor.
• [nombre_atributo|=valor], selecciona los elementos que tienen establecido un
atributo llamado nombre_atributo y cuyo valor es una serie de palabras separadas
con guiones, pero que comienza con valor. Este tipo de selector sólo es útil para los
atributos de tipo lang que indican el idioma del contenido del elemento.

45
 Selectores de atributos
• Ejemplos:

46
 Pseudoselectores
• Si queremos aplicar reglas de estilo a elementos especiales como: los vínculos
visitados, la primera línea de un párrafo o su primera letra, emplearemos los
pseudoselectores.
• Hay dos tipos de pseudoelectores: pseudoclases y pseudoelementos.
• Pseudoclases:

Para emplear una pseudoclase se escribe la

misma a continuación del selector
separándola de éste por el símbolo de dos
puntos (:).

47
 Pseudoselectores
1. a:link
• La pseudoclase a:link permite definir la apariencia de un enlace que todavía no se ha
seleccionado.
• No puede faltar este gran clásico de las hojas de estilo que consiste en suprimir el
subrayado por defecto de los enlaces.
• Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="UTF-8">
<style type="text/css">
a:link { text-decoration: none; color: black;}
</style>
</head>
<body>
<p><a href="[Link]">¡ Esto es, no obstante, un enlace !</a></p>
</body>
</html>
• Destacamos que también habría podido utilizarse la declaración de estilo a {text-
decoration: none;} para obtener este resultado. Habría suprimido el subrayado de todos
los estados del enlace (link, active, hover y visited).

48
 Pseudoselectores
2. a:visited
• La pseudoclase a:visited permite definir la apariencia de un enlace que ha sido visitado.
• Ejemplo

<!DOCTYPE html> <html lang="es">

<head>
<title>Html5</title>
<meta charset="UTF-8">
<style type="text/css">
a:visited {text-decoration: line-through; color: black;}
</style>
</head>
<body>
<p><a href="[Link]">Esto es un enlace visitado.</a></p>
</body>
</html>

49
 Pseudoselectores
3. a:hover
• La pseudoclase a:hover permite definir la apariencia de un enlace en el momento que se pasa
el ratón sobre él.
• Ejemplo
<!DOCTYPE html> <html lang="es">
<head>
<title>Html5</title>
<meta charset="UTF-8">
<style type="text/css">
a:hover { font-weight: bold; font-style: italic; font-size: 1.5em;}
</style>
</head>
<body>
<p><a href="[Link]">Esto es un enlace.</a></p>
</body>
</html>

50
 Pseudoselectores
4. a:active
• La pseudoclase a:active permite definir la apariencia de un enlace en el momento preciso en
que se hace clic sobre él.
• Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="UTF-8">
<style type="text/css"> a:active {text-decoration: underline overline;}
</style>
</head>
<body> <p><a href="[Link]">Esto es un enlace.</a></p>
</body>
</html>

51
 Pseudoselectores
• Comentarios
• La pseudoclase :active se utiliza, generalmente, de forma conjunta con :visited,
:hover y :link.
• Para obtener un resultado correcto es indispensable enunciar las apariencias
para los enlaces en el orden siguiente:
– :link
– :visited
– :hover
– :active
• Por si te ayuda, para recordarlo, se emplean las iniciales: LVHA.

52
 Pseudoselectores
• La pseudoclase :hover puede utilizarse sobre otros elementos además de
con los enlaces.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<style type="text/css">
div { width: 200px; height: 50px; border: 1px solid black;} div:hover {
background-color: rgb(125,165,205)}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

53
 Pseudoselectores
• Existen otras pseudoclases, que se emplean menos y no la admiten todos
los navegadores.
• :focus hace referencia a los elementos que tienen el foco, como ocurre, por
ejemplo, en los elementos de un formulario. Un ejemplo sería:
input:focus {background-color: yellow;}
• :first-child hace referencia el primer hijo de un elemento padre. En el
siguiente ejemplo se aplica el estilo al primer elemento de una lista
desordenada:
ul li:first-child {font-weight:
bold;}
• :lang(idioma) hace referencia al idioma en el que está un determinado
elemento. En el siguiente ejemplo se aplica el estilo a cualquier párrafo que
esté escrito en inglés:
p:lang(en) {color:
red}

54
 Pseudoselectores
• Otro ejemplo con lang:
:lang define las comillas para los elementos <q> con lang = "no":

• Salida:

55
 Pseudoselectores. Seudoelementos
• Pseudoelementos:
• CSS3 conserva estos pseudo-elementos aunque cambia su sintaxis. Para usarlos
escribiremos "::" en lugar de ":".

Estos pseudoelementos suelen ser partes de un elemento ya

existente, como puede ser su primera línea (:first-line) o su primera
letra (:first-letter), aunque también nos permite hacer referencia a
elementos sin concretar en la estructura del documento porque
dependen de la estructura del documento (:before y :after).
 :first-line. Selecciona la primera línea.
 :[Link] la primera letra.
 :before. Nos posiciona al inicio del contenido de un elemento.
 :after. Nos posiciona al final del contenido de un elemento.
La siguiente imagen muestra dónde apuntaría el selector en cada uno
de los casos:

56
• 1. :first-letter
Pseudoselectores
• Esta pseudoclase :first-letter permite definir la apariencia de la primera (y sólo de la primera) letra de un párrafo. Se
logra un efecto de letra capital.
• Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="UTF-8">
<style type="text/css">
#box { border: 1px solid black;
margin-left: 30px;
width: 200px;
padding: 10px;}
.letracapital:first-letter { margin-right: 5px;
font-size: 4em;}
</style>
</head>
<body>
<div id="box">
<div class="letracapital">He aquí un texto que ilustra
el efecto de letra capital que podemos obtener con: first-letter.</div>
</div>
</div>
</body>
</html>

57
 Pseudoselectores
• 2. :first-line
• Esta pseudoclase :first-line permite definir la apariencia de la primera (y sólo de la primera) línea de un
párrafo.
• La longitud de la primera línea es variable y dependerá del ancho del elemento caja, del tamaño de letra,
etc.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="UTF-8">
<style type="text/css">
.box { border: 1px solid black;
margin-left: 30px;
width: 200px;
padding:10px;}
.linea1:first-line { font-variant: small-caps;
font-weight: bold;}
</style>
</head>
<body>
<div class="box">
<p class="linea1">He aquí un texto que ilustra el efecto de
estilo
que podemos obtener con: first-line.</p>
</div>
</body> 59
</html>
 Pseudoselectores
• 1. :before
• La pseudoclase :before, asociada a la propiedad content, permite insertar un contenido antes de un
elemento.
• Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="UTF-8">
<style type="text/css">
h1:before {content:url([Link]);}
</style>
</head>
<body>
<h1>Capitulo 1</h1>
<p>Lorem ipsum dolor sit amet...</p>
<h1>Capitulo 2</h1>
<p>Lorem ipsum dolor sit amet...</p>
</body>
</html>

• La propiedad de estilo content agrega una flecha ([Link]) delante de cada título de nivel <h1>
(h1:before).

60
 Pseudoselectores
• 2. :after
• La pseudoclase :after, asociada a la propiedad content, permite insertar un contenido después de un
elemento.
• Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="UTF-8">
<style type="text/css">
h2:after {content:url([Link]);}
</style>
</head>
<body>
<h2>Capitulo 1</h2>
<p>Lorem ipsum dolor sit amet...</p>
<h2>Capitulo 2</h2>
<p>Lorem ipsum dolor sit amet...</p>
</body>
</html>

• La propiedad de estilo content agrega una imagen ([Link]) tras cada título de nivel <h2> (h2:after).

61
Pseudo-clases y clases de Css

62
Mueve el cursor sobre <div>

63
Herramienta simple Hover

64
La pseudo-clase de primer hijo.

65
La pseudo-clase de primer hijo.

66
La pseudo-clase de primer hijo.

67
 Ejercicios
• [Link]
[Link]
• [Link]
[Link]
• [Link]
[Link]

68
 Resumen

[Link]

69
 Bibliografía. Para saber más
• [Link]
• [Link]
• CSS Avanzado – Javier Eguíluz Pérez: CSS Avanzado.
• Curso CSS3. Antonio Navajas.
• Desarrollo de Aplicaciones Web. José Luis Comesaña.
• [Link]
• [Link]
• [Link]
• [Link]
• resumen de los patrones de selectores CSS existentes.
[Link]
Existe una herramienta llamada CSS Selectors test que permite comprobar los
selectores que soporta el navegador con el que se hace la prueba.

70