GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Pseudo clases
Una pseudo-clase se utiliza para definir un estado especial de un elemento. Por ejemplo, se puede
utilizar para:

 Estilo de un elemento cuando se coloca el ratón sobre ella

 Estilo diferente para enlace de visitados y no visitados.
 Estilo de un elemento cuando se pone el foco

Sintaxis
La sintaxis de pseudo-clases:

selector:pseudo-class {
property:value;
}

Enlaces de pseudo-clases
Enlaces que se pueden mostrar de distintas maneras:

/* enlace no visitado */
a:link {
color: #FF0000;
}
/* enlace visitado */
a:visited {
color: #00FF00;
}
/* mouse sobre el enlace */
a:hover {
color: #FF00FF;
}
/* enlace seleccionado */
a:active {
color: #0000FF;
}
Ver: Código 151.html
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Las pseudo-clases y clases CSS

Las pseudo-clases se pueden combinar con clases CSS, al pasar sobre el enlace en el ejemplo, va a
cambiar de color:
a.highlight:hover {
color: #ff0000;
}

Ver: Código 152.html

El cursor sobre el <div>

Un ejemplo del uso de la pseudo-clase :hover en un elemento <div>:

div:hover {
background-color: blue;
}

Ver: Código 153.html

Herramienta de Información sencilla sobre “hover”

Pase el ratón sobre un elemento <div> para mostrar un elemento <p> (como un texto de ayuda):
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}

Ver: Código 154.html

La pseudo-clase “first-child”
La psudo-clase :first-child coincide con un elemento especificado que es el primer hijo de otro
elemento.
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Coincidir con el primer elemento <p>

En el siguiente ejemplo, el selector equivale a cualquier elemento <p> que es el primer hijo de
cualquier elemento:

p:first-child {
color: blue;
}

Ver: Código 155.html

Coincidir con los primeros <i> en todos los elementos <P>

En el siguiente ejemplo, el selector coincide con el primer elemento <i> en todos los elementos
<p>:

p i:first-child {
color: blue;
}

Ver: Código 156.html

Coincidir todos los <i> en primer hijo de elementos <P>

En el siguiente ejemplo, el selector de todos los partidos de <i> elementos en <p> elementos que
son el primer hijo de otro elemento:

p:first-child i {
color: blue;
}

Ver: Código 157.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

La pseudo-clase lang
La pseudo-clase :lang le permite definir reglas especiales para diferentes idiomas. En el siguiente
ejemplo, :lang define las comillas para los elementos <q> con lang = "no":
<style>
q:lang(no) {
quotes: "~" "~";
}
</style></html>

Ver: Código 158.html

Pseudo-elementos
Un pseudo-elemento en CSS es aquel que se utiliza para dar estilo a una parte en específico de un
elemento.

Por ejemplo, se puede utilizar para:

 Dar estilo a la primera letra, o línea, de un elemento.
 Insertar contenido antes, o después de un elemento.


Sintaxis
selector::pseudo-elemento {
propiedad:valor;
}

La manera de distinguir una pseudo-clase de un pseudo-elemento es por dos puntos dobles” : : ”

El pseudo-elemento primera línea

El pseudo-elemento ::first-line se utiliza para añadir un estilo especial a la primera línea de un
texto. El siguiente ejemplo da formato a la primera línea del texto en todos los elementos <p>:
p::first-line {
color: blue;
font-variant: small-caps;
}

Ver: Código 159.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Nota: El pseudo-elemento ::first-line sólo se puede aplicar a los elementos a nivel de bloque.
Las siguientes propiedades se aplican al pseudo-elemento ::first-line :

 Propiedades de la fuente
 Propiedades de color
 Propiedades de fondo
 Word-spacing.
 Espaciado de letras
 Text-decoration
 Vertical-align
 Text-transform
 Altura de la línea
 Clear.

El pseudo-elemento primera letra

El pseudo-elemento ::first-letter se utiliza para añadir un estilo especial a la primera letra de un
texto. El siguiente ejemplo da formato a la primera letra del texto en todos los elementos <p>:
p::first-letter {
color: blue;
font-size: xx-large;
}

Ver: Código 160.html

Nota: El pseudo-elemento ::first-line sólo se puede aplicar a los elementos a nivel de bloque.

Las siguientes propiedades se aplican al pseudo-elemento ::first-letter:

 Propiedades de la fuente.
 Propiedades de color.
 Propiedades de fondo.
 Propiedades de los márgenes.
 Propiedades de relleno.
 Propiedades de borde.
 Text-decoration.
 Vertical-align (sólo si "float" es "none")
 Text-transform.
 Altura de la línea.
 Float.
 Clear.
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Los pseudo-elementos y las clases primera letra

Los pseudo-elemento se pueden combinar con clases en CSS:

p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}

Ver: Código 161.html

El ejemplo anterior se mostrará la primera letra de los párrafos con class = "intro", en color rojo y
en un tamaño más grande.

Múltiples pseudo-elementos
También se pueden combinar varios pseudo-elementos, En el siguiente ejemplo, la primera letra
de un párrafo será de color rojo, en un tamaño de letra XX-Large. El resto de la primera línea será
azul, y en small-caps. El resto del párrafo será del tamaño de fuente y color predeterminado:

p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}

Ver: Código 162.html

El pseudo-elemento :: before
El pseudo-elemento ::before se puede utilizar para insertar un cierto contenido antes que el
contenido en sí de un elemento.
El ejemplo siguiente inserta una imagen antes de que el contenido de cada elemento <h1>:
h1::before {
content: url(imagenes/feliz.jpg);
}

Ver: Código 163.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

El pseudo-elemento :: after
El pseudo-elemento ::after se puede utilizar para insertar un cierto contenido antes que el
contenido en sí de un elemento.
El ejemplo siguiente inserta una imagen después de que el contenido de cada elemento <h1>:

h1::after {
content: url(imagenes/feliz.jpg);
}

Ver: Código 164.html

El pseudo-elemento :: selection
El pseudo-elemento ::selection coincide con una parte del elemento que el usuario selecciona. Las
siguientes propiedad CSS se pueden aplicar a ::selection: color, background, cursor y outline.
El ejemplo siguiente convierte el texto seleccionado en rojo sobre fondo amarillo:

::selection {
color: red;
background: yellow;
}

Ver: Código 165.html