: no () - Trucos CSS

Anonim

La :not()propiedad en CSS es una pseudoclase de negación y acepta un selector simple o una lista de selectores como argumento. Coincide con un elemento que no está representado por el argumento. El argumento pasado no puede contener selectores adicionales o selectores de pseudoelementos.

La capacidad de usar una lista de selectores como argumento se considera experimental, aunque su soporte está creciendo al momento de escribir este artículo, incluidos Safari (desde 2015), Firefox (desde diciembre de 2020) y Chrome (desde enero de 2021).

/* the X argument can be replaced with any simple selectors */ :not(X) ( property: value; )

En este ejemplo tenemos una lista desordenada con una sola clase en el

  • : 
    

      

    •

    Nuestro CSS seleccionaría todos los

  • elementos excepto el (s) con una clase de .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    También puede hacer lo mismo usando pseudoclases que se consideran un selector simple.

    p:not(:nth-child(2n+1)) ( font-size: 3em; )

    Sin embargo, si usamos un selector de pseudoelementos como nuestro argumento, no producirá el resultado esperado.

    :not(::first-line) ( /* ::first-line is a pseudo element selector and not a simple selector */ color: white; )

    Selectores complejos

    /* select all

    s that are not descendants of */ p:not(article *) ( )

    Ejemplo visual

    Representación visual de los variados usos de :not()

    Especificidad

    La especificidad de la :not pseudoclase es la especificidad de su argumento. La :not() pseudoclase no añade especificidad al selector, a diferencia de otras pseudoclases.

    Las negaciones no se pueden anidar, por :not(:not(… )) lo que nunca se permite. Los autores también deben tener en cuenta que, dado que los pseudoelementos no se consideran un selector simple, no son válidos como argumento para :not(X). Tenga cuidado al usar selectores de atributos, ya que algunos no son ampliamente compatibles como otros. Se permite encadenar :not selectores con otros :notselectores.

    Soporte de navegador

    La :not()pseudoclase se ha actualizado en la especificación CSS Selectors Level 4 para permitir una lista de argumentos. En CSS Selectors Level 3, solo era capaz de aceptar un solo selector simple. Como resultado, el soporte del navegador está un poco dividido entre los borradores de Nivel 3 y Nivel 4.

    Selectores simples

    ES DECIR Borde Firefox Cromo Safari Ópera
    9+ Todos Todos Todos 12.1+ Todos
    Android Chrome Android Firefox Navegador de Android Safari de iOS Opera Mobile
    Todos Todos Todos Todos Todos

    Listas de selección

    Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

    Escritorio

    Cromo Firefox ES DECIR Borde Safari
    88 84 No 88 9

    Móvil / Tablet

    Android Chrome Android Firefox Androide Safari de iOS
    88 85 81 9.0-9.2

    Más información

    • Módulo de selectores CSS nivel 3
    • Especificación CSS Selectors Level 4