:not() y border-radius

:NOT & BORDER-RADIUS

01 :NOT

Poderosa herramienta en CSS que te permite seleccionar elementos que no cumplan con un cierto criterio de selección.

Descripción

Esta pseudoclase no permite seleccionar y aplicar estilos a todo aquello que no cumpla cor cierto criterio de selección que recibe como parametro y su sintaxis básica es la siguiente:

Ejemplo 1

Supongamos que tienes una lista y deseas aplicar un estilo a todos los elementos de la lista excepto al primer elemento. Puedes utilizar :not(:first-child) para lograrlo:

Gracias a estos estilos, en este ejemplo, todos los elementos <li> excepto el primer elemento tendrán el color de texto azul.

Ejemplo 2

Imagina que tienes una serie de enlaces y deseas aplicar un estilo a todos los enlaces, excepto aquellos que tengan la clase .special. Puedes usar :not(.special) para hacerlo:

En este ejemplo, todos los enlaces <a> excepto aquellos con la clase .special tendrán subrayado. Es importante tener en cuenta que :not() puede contener solo un selector simple, es decir, no puede contener combinaciones complejas de selectores. Además, algunas pseudoclases y pseudoelementos no pueden usarse dentro de :not(). Por ejemplo, no es válido utilizar :not(:hover) ya que :hover no es un selector simple. La pseudoclase :not() es una herramienta útil para aplicar estilos de manera selectiva y excluir elementos específicos en ciertas situaciones. Sin embargo, debes usarla con cuidado y evitar la sobreutilización, ya que puede afectar el rendimiento y la complejidad del código CSS.

02 BORDER-RADIUS

Esta propiedad permite darles un aspecto más suave y agradable visualmente.

Descripción

la propiedad border-radius en CSS se utiliza para agregar esquinas redondeadas a los elementos HTML. La sintaxis básica de la propiedad border-radius es la siguiente:

Descripción

Puedes usar un solo valor para aplicar un radio de borde a las cuatro esquinas de un elemento. También puedes especificar cuatro valores para controlar individualmente el radio de cada esquina en el siguiente orden:

1. superior izquierda
2. superior derecha
3. inferior derecha
4. inferior izquierda.

Ejemplo s

En este ejemplo, todos los bordes del <div> tendrán un radio de 10px, lo que resultará en esquinas redondeadas.

En este ejemplo, los radios de las esquinas serán: 20px para la esquina superior izquierda, 5px para la esquina superior derecha, 30px para la esquina inferior derecha y 15px para la esquina inferior izquierda.

Notas Importantes

La propiedad border-radius es especialmente útil para crear elementos con bordes redondeados, como botones, tarjetas o imágenes. También puede utilizarse en conjunto con la propiedad background-image para crear imágenes con bordes redondeados. Es importante tener en cuenta que el valor de border-radius no debe ser negativo y no puede ser mayor que la mitad del tamaño de la caja para las esquinas redondeadas individuales. Además, si un elemento tiene bordes específicos definidos a través de las propiedades border-top, border-right, border-bottom y border-left, estos pueden anular el efecto de border-radius. En general, border-radius es una propiedad CSS útil para mejorar el aspecto visual de tus elementos y darles un diseño más atractivo.