Clases de Diseño web

PSEUDO CLASES:

La pseudo-clase :first-child
La pseudo-clase :first-child combina un elemento que es el primer elemento hijo con otro elemento.
Sintaxis Esta regla nos indica que el selector es el primer hijo del elemento padre y que cumplirá con la propiedad incluida entre llaves.

Ejemplo: Vamos a ver como actúa first-child.

p:first-child {
color: red
}

<body> 
<div> 
<p>La propiedad definida anteriormente se cumplirá solamente para el primer elemento p que desciende del elemento div</p> 
<p>En este caso, la propiedad no tendrá efecto por no ser el primer elemento p del elemento div sino el segundo</p> 
</div> 
</body>

Resultado:
La propiedad definida anteriormente se cumplirá solamente para el primer elemento p que desciende del elemento div
En este caso, la propiedad no tendrá efecto por no ser el primer elemento p del elemento div sino el segundo.

En este caso la propiedad se cumple para el elemento que es descendiente del selector.

Los enlaces y las pseudo-clases :link y :visited

Las pseudo-clases :link y :visited se usan generalmente para diferenciar entre un enlace que aún no ha sido visitado por otro que ya fue activado. Para ello definimos 2 colores distintos para cada caso.

a:link {
color:red
}
a:visited {
color:green
}

<body> 
<a href="/fin.html">Si presiona el enlace cambiará al color verde</a>. 
</body>

Si se presiona se pondra en azul

Las pseudo-clases dinámicas :hover, :active y :focus

A veces necesitamos cambiar la forma de visualizar o interpretar algún objeto en respuesta a una acción del usuario. La pseudo-clase :hover se aplica generalmente cuando el cursor se desplaza por encima de un enlace.
La pseudo-clase :active se aplica cuando el elemento está siendo activado por el usuario, como por ejemplo cuando el usuario presiona un boton.
La pseudo-clase :focus se aplica cuando el elemento tiene el foco

a:link { color: red } 
a:visited { color: blue } 
selector:hover {propiedadvalor} 
selector:active {propiedadvalor} 
selector:focus {propiedadvalor}

Nota: la pseudo-clase :hover debe ser ubicada posteriormente a :link y :visited y anteriormente a :active.

a:link { color: red } 
a:visited { color: green} 
a:hover {color:blue} 
a:active {color:black} 
a:focus {background-color:yellow
}

<a href="/fin.html">Enlace dinámico</a>

Enlace dinamico

Volver arriba