Clase pseudo :not() de CSS

La clase pseudo :not() representa elementos que no coinciden con una lista de selectores.

También se conoce como la clase pseudo de negación. Es un selector de clase pseudo funcional que toma una lista de selectores como argumento y coincide con cualquier elemento que no coincida con dicho argumento. En Selectors Level 3, solo acepta selectores simples. Selectors Level 4 permite selectores compuestos o complejos. Los argumentos admitidos incluyen:

Selector de tipo (p. ej., p, span)
Selector de clase (p. ej., .element)
Selector de ID (p. ej., #header)
Selector de clase pseudo (p. ej., :last-child, :first-of-type)
Selector de atributo (p. ej., [type="text"])
El selector universal (*)

Notas importantes

El selector :not() funciona con clases pseudo, pero no admite pseudo-elementos.
La especificidad de :not() está determinada por el selector más específico en su argumento. Por ejemplo, :not(.foo) tiene la misma especificidad que .foo (0, 1, 0).
:not(.foo) coincide con cualquier cosa que no sea .foo, incluyendo <html> y <body>.
El selector :not() se aplica a cualquier elemento que no coincida con el argumento, no solo a un único elemento.

Versión

Selectors Level 3

Selectors Level 4

Sintaxis

Sintaxis de CSS :not()

css

selector:not(argument) {
  css declarations;
}

Ejemplo de la clase pseudo `:not()`:

Ejemplo de código CSS :not()

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        color: #666;
      }
      :not(p) {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:not() selector example</h2>
    <p>Lorem Ipsum is simply dummy text</p>
    <p>Lorem Ipsum is simply dummy text</p>
    <div>Lorem Ipsum is simply dummy text</div>
    <a href="https://www.w3docs.com" target="_blank">Link to W3docs</a>
  </body>
</html>

Try it Yourself »

En el siguiente ejemplo, hay una lista desordenada con una sola clase en la etiqueta <li>.

Ejemplo de la clase pseudo `:not()` con la etiqueta `<li>`:

Otro ejemplo de código CSS :not()

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text-blue {
        color: blue;
      }
      ul li:not(.text-blue) {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:not() selector example</h2>
    <ul>
      <li>List item 1</li>
      <li class="text-blue">List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>

Try it Yourself »

Práctica

¿Qué hace la clase pseudo :not en CSS?

Representa un elemento que no está representado por su argumentoSe utiliza para especificar un atributo particular para un elementoSelecciona cada elemento individual que no es el elemento especificadoEs lo opuesto a la clase pseudo :has

Clase pseudo :not() de CSS ​

Notas importantes ​

Versión ​

Sintaxis ​

Ejemplo de la clase pseudo :not(): ​

Ejemplo de la clase pseudo :not() con la etiqueta <li>: ​