CSS PSEUDO-CLASSES

Existen algunos elementos especiales que se pueden seleccionar y en CSS se denominan pseudo-classes, que son identificadores especiales que van precedidos por dos puntos. Entre las pseudo-classes disponibles tenemos las siguientes:

• tipoElem:first-child : Selecciona el primer elemento dentro de una serie de elementos del tipo tipoElem. En el ejemplo, allí donde haya una serie de elementos li, el primero de ellos tendrá el doble de tamaño de fuente normal.

li:first-child {font-size: 200%;}

• tipoElem:last-child : Selecciona el último elemento dentro de una serie de elementos del tipo tipoElem. En el ejemplo, allí donde haya una serie de elementos li, el último de ellos tendrá el doble de tamaño de fuente normal.

li:last-child {font-size: 200%;}

• tipoElem:only-child : Selecciona un elemento si es hijo único, es decir, si es el único elemento dentro del contenedor tipoElem. En el ejemplo se seleccionan las imágenes que estén dentro de contenedores div cuya clase sea destacado y dentro de los cuales exista únicamente una imagen y le aplica un borde de anchura 10 píxeles.

div.destacado img:only-child{border-style:solid; border-width:10px;}

• tipoElem:nth-child(number) : Selecciona el elemento número number dentro de una serie de elementos de tipo tipoElem. No puede haber elementos intermedios de otro tipo en la serie. En el ejemplo, el tercer elemento de una serie de li tendría el doble del tamaño normal de fuente y el segundo elemento dentro de una serie de párrafos con clase destacado tendría el 50 % del tamaño normal.

li:nth-child(3) {font-size: 200%;}

p.destacado:nth-child(2) {font-size: 50%;}

• Elem1:not(tipoElem2) : Selecciona todos los elementos de tipo Elem1 que no sean de tipo tipoElem2. En el ejemplo, se seleccionan todos los párrafos cuya clase no sea destacado.

p:not(.destacado) {color: yellow;}

• tipoElem::first-letter : Selecciona la primera letra de tipoElem

p::first-letter {font-size: 300%;}

• tipoElem::first-line : Selecciona la primera línea de tipoElem

p::first-line {color:red}

• tipoElem::after : Posiciona al final del elemento tipoElem permitiendo añadir contenido usando content:”contenidoDeseado” con las propiedades que se indiquen.

h1::after {content:”***”; background-color: yellow;}

• tipoElem::before : Posiciona al principio del elemento tipoElem permitiendo añadir contenido usando content:”contenidoDeseado” con las propiedades que se indiquen.

h1::before {content:” — -”; color: blue;}

Selectores avanzados y pseudoclases CSS first-child, nth-child, last, not, -letter -line, after…