: não () - CSS-Tricks

Anonim

A :not()propriedade em CSS é uma pseudo classe de negação e aceita um seletor simples ou uma lista de seletores como argumento. Corresponde a um elemento que não é representado pelo argumento. O argumento passado não pode conter seletores adicionais ou quaisquer seletores de pseudoelemento.

A capacidade de usar uma lista de seletores como argumento é considerada experimental, embora seu suporte esteja crescendo no momento em que este artigo foi escrito, incluindo Safari (desde 2015), Firefox (desde dezembro de 2020) e Chrome (desde janeiro de 2021).

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

Neste exemplo, temos uma lista não ordenada com uma única classe no

  • : 
    

      

    •

    Nosso CSS selecionaria todos os

  • elementos, exceto aquele (s) com uma classe de .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    Você também pode fazer o mesmo usando pseudo classes, que são consideradas um seletor simples.

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

    No entanto, se usarmos um seletor de pseudoelemento como nosso argumento, ele não produzirá o resultado esperado.

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

    Seletores Complexos

    /* select all

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

    Exemplo Visual

    Representação visual dos diversos usos de :not()

    Especificidade

    A especificidade da :not pseudoclasse é a especificidade de seu argumento. A :not() pseudo-classe não adiciona especificidade ao seletor, ao contrário de outras pseudo-classes.

    Negações não podem ser aninhadas, portanto, :not(:not(… )) nunca é permitido. Os autores também devem observar que, uma vez que os pseudo-elementos não são considerados um seletor simples, eles não são válidos como um argumento para :not(X). Fique atento ao usar seletores de atributo, pois alguns não são amplamente suportados como outros. O encadeamento de :not seletores com outros :not seletores é permitido.

    Suporte de navegador

    A :not()pseudo classe foi atualizada na especificação CSS Selectors Nível 4 para permitir uma lista de argumentos. Nos seletores CSS de nível 3, ele só era capaz de aceitar um único seletor simples. Como resultado, o suporte ao navegador é um pouco dividido entre os rascunhos de Nível 3 e Nível 4.

    Seletores simples

    IE Beira Raposa de fogo cromada Safári Ópera
    9+ Todo Todo Todo 12,1+ Todo
    Android Chrome Android Firefox Navegador Android iOS Safari Opera Mobile
    Todo Todo Todo Todo Todo

    Listas de seleção

    Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.

    Área de Trabalho

    cromada Raposa de fogo IE Beira Safári
    88 84 Não 88 9

    Celular / Tablet

    Android Chrome Android Firefox Android iOS Safari
    88 85 81 9,0-9,2

    Mais Informações

    • Módulo Seletores CSS Nível 3
    • Especificação de seletores CSS de nível 4