El selector :not css es un selector increíblemente poderoso que todo desarrollador web debería conocer ????.
Muchos desarrolladores web no conocen este selector y no lo utilizan porque no comprenden su poder.
Esta guía va a cambiar todo eso. En esta guía, voy a compartir contigo todo lo que necesitas saber para comenzar a usar el selector :not css... ¡de inmediato!
Aprenderá a utilizar el selector :not css con 4 ejemplos diferentes , lo que significa que podrá empezar a utilizarlo inmediatamente en su próximo proyecto.
Todo lo que necesitas es leer esta guía sin saltarte ningún paso.
Hay muchos casos de uso en los que :not css selector puede resultar útil.
¿Qué sucede si desea agregar un margen superior a todos los elementos excepto al primer hijo? ¿O desea omitir un elemento o clase específica para diseñar?
¿Qué es el selector :not() en CSS?
Su fórmula es muy simple y directa. Considere :not css como except u skip .
Cuando desee aplicar los estilos a todos los elementos omitiendo la clase o elemento específico, entonces :not css selector es el camino a seguir.
Profundicemos en varios ejemplos o casos de uso, para que pueda comprender el poder real de :not css selector.
:no selector css con otra clase pseduo
Agregue el margen superior a todos los elementos de la lista excepto al primer hijo. Es un caso muy común y lo utilizamos de vez en cuando.
Entonces, tenemos elementos de lista donde ul tiene una lista de nombres de clase, y a los elementos li se les asigna un elemento de lista de clase común.
Seleccionamos la clase de elemento de lista y agregamos :not selector .
Después de eso, use :first-child , que también es otro selector, para seleccionar el primer hijo de la lista de elementos.
Ahora nuestro comando se parece a .list-item:not(:first-child) , lo que significa que aplica los estilos a todos los elementos de la lista excepto al primer hijo.
A continuación se muestra un ejemplo funcional con salida:
<h2 class="heading">Example #1</h2>
<ul class="list">
<li class="list-item">PHP</li>
<li class="list-item">CSS</li>
<li class="list-item">HTML</li>
<li class="list-item">JS</li>
</ul>
.list-item:not(:primer hijo){
margin-top:1rem;
background-color: #ff5852;
}
css no selector con la clase o id
Agregue el color de fondo a todos los elementos de la lista excepto a la clase .active.
Tenemos el mismo caso que en el primer ejemplo. La única diferencia es que en lugar de usar el primer hijo, nos dirigiremos a la clase que tiene un elemento de lista, y esa es la clase .active .
Nuestro comando se parece a .list-item:not(.active) , lo que significa que aplica los estilos a todos los elementos de la lista excepto al elemento de la lista con otra clase que es .active .
Solo una nota rápida aquí, también puede usar la identificación, .list-item:not(#active) . Para que esto funcione, deberá colocar una identificación activa en el elemento del elemento de lista.
<h2 class="heading">Example #2</h2>
<ul clase="lista">
<li class="list-item">PHP</li>
<li class="list-item active">CSS</li>
<li class="list-item">HTML</li>
<li class="list-item">JS</li>
</ul>
.list-item:not(.active){ background-color: #ff5852; }
Consejo:
:not css selector se puede utilizar para un elemento específico, un elemento secundario específico, un atributo específico, un nombre de clase específico dentro del elemento, etc.
selector css not() con el atributo
Aplique el color de fondo a todos los elementos de la lista excepto al que tiene el atributo attr=php .
Entonces, acabamos de agregar attr con fines de demostración, puede agregar o seleccionar cualquier tipo de atributo y sí, attr es solo un nombre aleatorio.
Nuestro comando se parece a .list-item:not(), lo que significa que aplica los estilos a todos los elementos de la lista excepto al elemento de la lista con un valor de atributo establecido en php.
A continuación se muestra un ejemplo funcional con salida:
<h2 class="heading">Example #3</h2>
<ul clase="lista">
<li class="list-item" attr="php">PHP</li>
<li class="list-item" attr="css">CSS</li>
<li class="list-item" attr="html">HTML</li>
<li class="list-item" attr="js">JS</li>
</ul>
.list-item:not([attr=php]){
background-color: #ff5852;
}
:no selector css con el elemento hijo
Aplique color de fondo a todo el elemento secundario interno (etiqueta de anclaje) de los elementos de la lista, excepto al que tiene la clase .active
Nuestro comando se parece a .list-item:not(.active) a , lo que significa que aplica los estilos a todos los anclajes (a) de los elementos de la lista, excepto al que tiene la clase .active.
A continuación se muestra un ejemplo funcional con salida:
<h2 class="heading">Example #4</h2>
<ul class="list">
<li class="list-item"><a href="">PHP</a></li>
<li class="list-item active"><a href="">CSS</a></li>
<li class="list-item"><a href="">HTML</a></li>
<li class="list-item"><a href="">JS</a></li>
</ul>
.list-item:not(.active) a{
background-color: #ff5852;
}
Espero que este artículo te haya resultado útil y que te haya brindado otro conjunto de habilidades para agregar a tu arsenal de codificación.
Si está interesado en obtener más información sobre consejos y trucos de CSS, le recomendamos que se suscriba a nuestro boletín .
Siempre nos complace escuchar sus comentarios, así que no dude en hacérnoslo saber compartiéndolos con otros.
Como desarrollador web, definitivamente también te encantará esta guía: Consejos rápidos para crear tu propio sitio web como desarrollador web
Aquí hay una guía completa para la cuadrícula CSS.
