: pas () - Astuces CSS

Anonim

La :not()propriété en CSS est une pseudo-classe de négation et accepte un sélecteur simple ou une liste de sélecteurs comme argument. Il correspond à un élément qui n'est pas représenté par l'argument. L'argument passé ne peut pas contenir de sélecteurs supplémentaires ou de sélecteurs de pseudo-éléments.

La possibilité d'utiliser une liste de sélecteurs comme argument est considérée comme expérimentale, bien que sa prise en charge augmente au moment de la rédaction de cet article, notamment Safari (depuis 2015), Firefox (depuis décembre 2020) et Chrome (depuis janvier 2021).

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

Dans cet exemple, nous avons une liste non ordonnée avec une seule classe sur le

  • : 
    

      

    •

    Notre CSS sélectionnerait tous les

  • éléments sauf celui (s) avec une classe de .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    Vous pouvez également faire de même en utilisant des pseudo-classes considérées comme un simple sélecteur.

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

    Cependant, si nous utilisons un pseudo sélecteur d'élément comme argument, il ne produira pas le résultat attendu.

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

    Sélecteurs complexes

    /* select all

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

    Exemple visuel

    Représentation visuelle des utilisations variées de :not()

    Spécificité

    La spécificité de la :not pseudo-classe est la spécificité de son argument. La :not() pseudo-classe n'ajoute pas à la spécificité du sélecteur, contrairement aux autres pseudo-classes.

    Les négations ne peuvent pas être imbriquées et ne sont donc :not(:not(… )) jamais autorisées. Les auteurs doivent également noter que puisque les pseudo-éléments ne sont pas considérés comme un simple sélecteur, ils ne sont pas valides comme argument de :not(X). Soyez attentif lorsque vous utilisez des sélecteurs d'attributs car certains ne sont pas largement pris en charge comme d'autres. L'enchaînement des :not sélecteurs avec d'autres :not sélecteurs est autorisé.

    Prise en charge du navigateur

    La :not()pseudo classe a été mise à jour dans la spécification CSS Selectors Level 4 pour autoriser une liste d'arguments. Dans CSS Selectors Level 3, il n'était capable d'accepter qu'un seul sélecteur simple. En conséquence, la prise en charge du navigateur est un peu divisée entre les brouillons de niveau 3 et de niveau 4.

    Sélecteurs simples

    C'EST À DIRE Bord Firefox Chrome Safari Opéra
    9+ Tout Tout Tout 12.1+ Tout
    Chrome Android Android Firefox Navigateur Android Safari sur iOS Opera Mobile
    Tout Tout Tout Tout Tout

    Listes de sélecteurs

    Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

    Bureau

    Chrome Firefox C'EST À DIRE Bord Safari
    88 84 Non 88 9

    Mobile / tablette

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

    Plus d'information

    • Module de sélecteurs CSS niveau 3
    • Spécification des sélecteurs CSS niveau 4