Selección avanzada de elementos en CSS 2 y CSS 3

Generalmente, cuando queremos seleccionar un elemento 'especial' de nuestro HTML con CSS, llenamos este con id, class, span, que muchas veces son completamente inútiles, y casi siempre, para nada semánticos.

Este tip, que se complementa con el de pseudoclases y pseudoelementos, nos ayudará en la tarea de tener un HTML limpio y sin mucho class="" o <span>.

Seleccionando hermanos

Hermanos hacia abajo

Código :

li:hover + li { color:#333; }

Son hijos de un mismo padre... son hermanos!
Esto selecciona el primer <li> que se encuentre después del <li> que tiene el mouse encima, siempre que sean hijos de un mismo padre, por semántica, un <ul>.
Es decir, si pusiéramos el mouse encima de un elemento de la lista, el elemento de abajo cambiarlo su color de fuente a #333.

Código :

x + y {}

Resumiendo, selecciona el primer elemento y que se encuentre despues del elemento x y sean hijos del mismo padre.

Podemos alargar la cadena, agregando mas '+':

Código :

li:hover + li + li + li { color:#333; }

Con eso seleccionamos al :hover y a sus tres hermanos mas abajo.

Hermanos hacia arriba

Lo mismo que lo anterior, solo que es una propiedad de CSS3asique no es muy soportado. ¿Como es el código?

Código :

li ~ li { color:#333; }

con eso seleccionaríamos al hermano mayor de li.

Seleccionar descendientes

Código :

ul > a { color:#333; }

a desciende de ul, si entre ellos no hay mas escalas en el árbol... es su padre!
Entonces, con este seleccionamos al hijo, la relación tiene que ser directa.



Ahora, si queremos seleccionar al 2do en la relación (Algo que vendría siendo como el nieto) solo seguimos agregando '>':

Código :

ul > li > a { color:#333; }

Seleccionar según atributos

Ahora tiembla <span> del demonio!!! Con CSS3, ya es para morir... seleccionar según atributos. Con ejemplos de uso, verán como tengo razón, y dejarán de lado unos cuantos class y id.

Código :

div[atributo]{}

selecciona los div que tienen establecido el atributo sin importar su valor.

Ahora vean lo realmente interesante:

Código :

div[x=y]

Poniendo un ''=' después del nombre del atributo, y luego un valor, seleccionaremos todos los elementos que tengan un atributo 'x' con un valor 'y'.

Código :

[x~=y]

Con '~=' los elementos que tienen un atributo 'x' y al menos uno de sus valores es 'y' quedan seleccionados.

Código :

[x|=y]

Si tenemos un atributo cuyo valor esta separado con una serie de barras verticales, esto sera true si el primer de esos atributos es igual a 'y'.

Código :

[x^=y]

Si el valor del atributo 'x' empieza con el prefijo 'y', se selecciona.

Código :

[x$=y]

Si el valor del atributo 'x' termina con el sufijo 'y', seleccionado

Código :

[x*=y]

Si en cualquier parte del valor del atributo se encuentra a 'y', se selecciona.

Si mezclamos lo recién aprendido con:
El selector de todo, Asterisco (*).
La propiedad 'content'.
Psudoclases y pseudoelementos.
El límite lo pones tú (Es mentira pero tenía que decir una frase así).

Como notas, solo unas ideas de lo que podrían hacer:



y un link.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.