Pseudoclases: Las pseudoclases nos permiten referirnos a elementos según su estado. Para indicarlas en la hoja de estilo, se escriben detrás del selector, separadas por dos puntos.
Ejemplo:
img:hover
Pseudoelementos: son elementos de una página, a los cuales no podemos referirnos como elementos normales, porque no están contenidos en una etiqueta específica.
Ejemplo:
li:first-line – Establece el estilo para la primera línea de un elemento.
Bien, ahora vamos a ver cuales son las mas utilizadas y a que elementos podemos aplicarlos.
Pseudoclases
Links
:hover – Este estado ocurre cuando el cursor del mouse se posiciona encima del link.
:focus – Parecido al hover, pero se activa cuando navegamos hasta el link usando el tabulador del teclado.
:visited – Selecciona los links que ya fueron visitados.
:active – El momento en el que hacemos click o activamos el link.
Ejemplos:
a:link { color:red; }
a:active { color:green; }
a:hover, a:focus { color:blue; }
a:visited { color:yellow; }
Para elementos Input
:focus – Como mencionamos anteriormente, selecciona el elemento sobre el que está enfocado el teclado. En un formulario, sera, por ejemplo, el campo de texto en el que esta el cursor y en el que vamos a escribir.
:target – Esta pseudoclase funciona en conjunto con el id de un elemento. Se activa cuando vamos a un url con un target al final, por ejemplo: http://es.wikipedia.org/wiki/Expedici%C3%B3n_Discovery#Objetivos.
:enabled – Selecciona los input que no tienen el atributo disabled=”true” y que podemos modificar.
:disabled – Selecciona los elementos con el atributo disabled=”true”. Normalmente el navegador coloca estos elementos en color gris.
:checked – Para las checkbox y radio que estan seleccionadas.
Ejemplos:
|
1 2 3 4 |
input:focus {background-color: rgb(156,153,133);} input:disabled {background-color: rgb(196,109,59);} input:checked {cursor: crosshair;} input:indeterminate {cursor: e-resize;} |
Para el árbol de etiquetas
:root – Selecciona al elemento raíz del DOM. Normalmente es el html.
:first-child – Selecciona al primer hijo de un tipo dentro de un elemento.
Ejemplos:
|
1 2 3 |
p:first-child {background-color:red;} /*Selecciona a todos los p que sean primer hijo*/ :first-child {background-color:yellow;} /*Selecciona a cualquier elemento que sea primer hijo*/ |
Seleccionara a todos los <p> que sean primer hijo.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div> <p>Soy primer hijo</p> <p>Soy segundo hijo</p> </div> <div> <h1>Soy un titulo</h1> <p>No soy primer hijo</p> </div> |
:last-child – Igual que :first-child pero para el ultimo hijo.
:nth-child(N) – Selecciona elementos basados en el valor de N:
- (n) Todos los hijos.
- (odd) o (2n+1) Todos los hijos en posicion impar.
- (even) o (2n) Todos los hijos en posicion par.
- nX Todos los hijos a partir de X.
- -nX Todos los hijos hasta X.
- Xn+Y Todos los hijos en las posiciones X*0+Y, X*1+Y, X*2+Y .. X*L+Y donde L es el numero total de hijos.
- X El hijo en la posicion X.
:nth-last-child(N) – Igual que :nth-child(N) pero empieza a contar desde el ultimo.
:first-of-type – Es más especifico que :first-child ya que se aplica a un tipo de elemento especifico. Por ejemplo,
si tenemos un div con varios p y img podemos aplicar un estilo solamente a la primera imagen del div con img:first-of-type independientemente si es el primer hijo del div. En otras palabras, lo que hacemos es que eliminamos de la seleccion todos los elementos que no correspondan a nuestro tipo y luego seleccionamos el primero.
:nth-of-type(N) – Las mismas reglas de seleccion que explicamos anteriormente para :nth-child(N) pero ignorando los elementos de otro tipo, como :first-of-type
:last-of-type – Igual que :first-of-type pero selecciona al ultimo.
:nth-last-of-type(N) – Igual que :nth-of-type(N) pero empieza a contar desde el ultimo.
:only-of-type – Selecciona al elemento si es el unico de su tipo dentro del padre.
Para el contenido
:empty – Selecciona a todos los elementos que no tengan hijos o texto.
:not(X) – Selecciona a todos los elementos que no posean una caracteristica X.
Por ejemplo:
|
1 2 3 4 5 6 7 |
/* Selecciona cualquier elemento que NO sea un párrafo */ :not(p) { color: blue; } |
Para el texto
:first-letter – Selecciona la primera letra.
:first-line – Selecciona la primera linea.
:lang(L) – Selecciona los elementos con el atributo lang=”L”. El idioma no tiene que ser valido y no se diferencia entre mayúsculas y minúsculas.
::selection – Indica el estilo del texto cuando es seleccionado o resaltado por el ususario.
Pseudoelementos
Posición relativa al elemento
:before – Permite insertar con content texto antes del elemento
:after – Inserta texto despues del elemento
Estos dos pseudoelementos parecen bastante sencillos, pero pueden llegar a ser muy poderosas, veamos algunos ejemplos:
|
1 2 3 4 5 |
a:visited:before { content: “\2713”; /*Agrega un checkmark a los links visitados*/ } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
a:hover:after{ content: attr(href); /*El atributo href del link*/ padding: 5px; position: absolute; text-decoration: none; color: red; background-color: white; box-shadow: 0px 0px 4px #222; z-index: 1000; border-radius: 4px; } |
| Para más información sobre las pseudoclases y pseudoelemtos, puedes dirigirte a este enlace, de donde se ha extraído la información mostrada en este punto.
Fuente: http://mytutorials85.blogspot.com.es/2012/04/pseudo-clases-en-css.html
|