En este artículo, aprenderemos cómo crear una regla CSS para todos los elementos excepto una clase específica.
Enfoque: use el :not(selector) , también conocido como pseudoclase de negación , que toma un selector simple como argumento y le permite diseñar todos los elementos, excepto el elemento especificado por el selector. Nunca podemos usar la negación anidada :not(:not(selector)) porque los pseudo-elementos no son simples selectores. Entonces no es válido.
Sintaxis:
:not(Selector){
// CSS
property: value;
}
Ejemplo 1: en el siguiente código, coloreamos todos los elementos de la etiqueta p excepto una clase especificada por el selector. El resultado ilustra cómo se estilizan todos los elementos, excepto una clase.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p:not(.element4) {
color: green;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>All styled elements except one class</h3>
<b>
<p>Element 1</p>
<p>Element 2</p>
<p>Element 3</p>
<p class="element4">Element 4</p>
</b>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra otra forma de usar :not(selector) en la práctica.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
li:not(.except) {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>All styled elements except one class</h3>
<b>
<p>Shopping List</p>
<ul>
<li class='except'>Coffee</li>
<li>Sugar</li>
<li>Milk</li>
</ul>
</b>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por chiragchouhan163 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA