CSS

[CSS] Pseudo-clase not para esquivar un first-child

[CSS] Seleccionarlo todo excepto una clase o elemento

En las hojas de estilo disponemos de decenas de tipos de selectores y pseudoclases, cuya intención es facilitarnos escoger a qué elemento aplicaremos un estilo.

Entre las pseudoclases más flexibles tenemos los child que nos permiten seleccionar un elemento en función de su posición dentro del DOM.

Así pues:

 

Pero… ¿y si lo que queremos es lo contrario? ¿Y si queremos aplicar un estilo a TODOS los elementos EXCEPTO uno en concreto?

 

La pseudo-clase :not

CSS3 incorporó la pseudoclase :not cuyo funcionamiento es aplicar el estilo a todos los elementos excepto al dado en el argumento.

Por ejemplo:

Esto haría que todos los ul dentro de Divs adquiriedan un color de fondo, excepto los primeros ul dentro de cada div.

Pero este método únicamente puede utilizarse con selectores simples, es decir:

  • selectores de tipo: p h1 div
  • selectores universales: * [lang^=en]  *.warning
  • selectores de atributos: [att][att=val]
  • selectores de clase: .casa.titulo2
  • selectores de ID:  #pie#menu_movil
  • selectores de pseudo-clase: ::before::first-line

 

Si queremos aplicarlo a algo más complejo, tendremos que crear un estilo global (en el ejemplo, uno para todos los ul) y luego uno en particular para el elemento al que no queríamos aplicarle ese estilo (Ej: a los ul primeros):

Si generase conflicto, podemos aplicar !important para imponer un estilo sobre otro:

 

 

Cristian Sarabia Martínez

Desde que a principios de los 90 mi padre desempolvó su Spectrum, no he dejado de probar y experimentar con la tecnología.

Enamorado del mundo web, Full Stack Developer de profesión y diseñador por devoción.

Ahora hago mis pinitos en esto del blogging para compartir con vosotros un poquito de todo lo que la comunidad me ha dado.

Escribir comentario

Haz clic aquí para dejar tu comentario