Tailwind CSS es un marco que usamos para diseñar nuestro sitio web sin escribir explícitamente CSS.
Para usar Tailwind CSS, solo tenemos que agregar la siguiente biblioteca en la sección de encabezado de nuestro archivo HTML . El selector :not() en Tailwind CSS es un pseudoselector que se utiliza para diseñar un elemento que tiene un estilo especial.
Enlace CDN:
<script src="https://cdn.tailwindcss.com"></script>
Sintaxis:
[&:not(selector)]:( CSS property)
Ejemplo 1: en este ejemplo, hemos usado diferentes etiquetas como h1, h2, h3 , p y div junto con diferentes propiedades de estilo para una mejor comprensión del selector :not() . Podemos ver claramente cómo se puede usar el selector :not() para diseñar. En la etiqueta h1, hemos usado :not(h2) para el color del texto, por lo que se le aplica el color rojo, pero para el tamaño de letra, hemos usado :not(h1) por el cual no se le aplica el tamaño 2xl .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="p-4"> <h1 class= "text-blue-500 text-4xl [&:not(h2)]:text-red-500 [&:not(h1)]:text-2xl"> GeeksforGeeks </h1> <h2 class= "text-green-500 text-4xl [&:not(h2)]:text-red-500 [&:not(h1)]:text-2xl"> GeeksforGeeks </h2> <h3 class= "text-blue-500 text-4xl [&:not(h1)]:text-red-500 [&:not(h3)]:text-2xl"> GeeksforGeeks </h3> <p class= "text-blue-500 text-4xl [&:not(p)]:text-red-500 [&:not(h1)]:text-2xl"> GeeksforGeeks </p> <div class= "text-blue-500 text-4xl [&:not(h1)]:text-red-500 [&:not(h1)]:text-2xl"> GeeksforGeeks </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, hemos usado el pseudo-selector :not() para aplicar estilo a las etiquetas secundarias de la etiqueta HTML div , podemos ver cómo el selector :not() se usa para el estilo de las etiquetas h3 y h4 en etiqueta div .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=, initial-scale=1.0"> <script src= "https://cdn.tailwindcss.com"> </script> </head> <body class="p-4"> <div class="[&>:not(h4)]:text-green-500 [&>:not(h4)]:text-5xl [&>:not(h3)]:text-cyan-700 [&>:not(h3)]:text-3xl"> <h3>GeeksforGeeks</h3> <h4>A Computer Science Portal For Geeks</h4> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por pushpamkjha14 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA