Comunidad de diseño web y desarrollo en internet online

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.

<ul>
<a>Correcto</a>
<li><a>Incorrecto</a></li>
</ul>


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:

a[href^="http://www.tupagina.com"] { color: #888; } /* Enlaces internos personalizados!! */
a[href^="ftp://"] { color: #888; } /*¿Si es un enlace ftp? Avísale al usuario con un color especial ^^ */


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.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate