Regard sur le sélecteur de négation (NOT) CSS3
CSS a des sélecteurs qui vous permettent de sélectionner des éléments dans certaines conditions telles que :flotter, :concentrer, :actif, etc. Pourtant, aujourd'hui, nous ne couvrirons pas ces sélecteurs. Nous allons en examiner une qui est encore une méthode peu connue mais utilisée par la plupart des concepteurs de sites Web - c’est la :ne pas sélecteur ou aussi connu comme sélecteur de négation.
Qu'est ce que ça fait?
Je suis sûr que le :ne pas se nommer a déjà décrit sa fonction, qu’il va simplement sélectionner l'inverse de l'élément ou de la condition spécifiée. Par exemple:
Cette syntaxe sélectionnera tout élément autre que p (paragraphe).
:pas p) Bien que l'exemple ci-dessous sélectionne la div élément qui fait ne pas avoir la classe abc
div: not (.abc) Très bien, essayons maintenant ce sélecteur dans un exemple réel:
Tout d’abord, faisons quelques paragraphes avec quelques liens de Wikipedia et quelques liens avec des domaines fictifs. Voici le balisage HTML pour le paragraphe.
CSS: pas de sélecteur
Jujubes applicake sésame s'enclenche chupa chups gateau au chocolat. Gâteau à l'avoine, guimauve, wypas, gâteau au beignet et au caramel. Chupa chups ours en gélatine gélatine en gelée. Gaufrette au citron.
Beignet au chocolat gâteau au fromage gelée sucrée rouleau en poudre soufflà ??  ?? Â' © gâteau au chocolat. Wypas coton candy citron gouttes cookie candy donut bonbon massepain. Macaron bonbons à la réglisse jelly-o. Tarte au chocolat bonbons guimauve dragà ??  ?? Ã'à © à © e bonbons au coton brownie guimauve.
Pudding surmontant la griffe d'ours de guimauve. Tarte aux muffins gommeux brownie au gâteau aux fruits gelée de pain d'épices au sésame. Pudding de bonbons griffe d'ours. Muffin aux gâteaux aux carottes et aux bonbons de coton. Gelée de haricots tarte dragà ??  ?? Ã'à © e sweet glaçage plaquette de chocolat. Pain sucré au caramel au sucre et à la prune dragée ?? ?? muffin bonbon bonbon.
Cake pâtissier applicake massepain gâteaux aux fruits wypas. Glaçage au gâteau aux flocons d'avoine au chocolat. Caramels Barre de chocolat, croissant, gaufrette, tarte, cupcake, barre de chocolat. Biscuit bonbons cannes dragà ?? ?? Ã.Ã. © Bonbons brownie gâteau au sésame snaps gâteau au fromage en poudre tootsie rouleau biscuit griffe d'ours. Soufflà ??  ?? Ã' © gummi porte jelly beans sésame s'enclenche faworki biscuit dessert sucré bonbon.
Le plan est le suivant: nous allons sélectionner uniquement les liens qui ne pointent pas vers Wikipedia, puis attribuer un point d'exclamation à ces liens pour alerter l'attention sur ces liens..
Tout d'abord, nous allons ajouter un :après pseudo-élément sur tous les liens pour placer la marque, et nous le définissons comme un bloc en ligne élément.
a: after display: inline-block;
Ensuite, pour sélectionner chaque lien qui ne pointe pas vers Wikipedia, nous allons combiner les :ne pas sélecteur avec un sélecteur d'attribut. Le sélecteur d'attribut sélectionnera ici chaque balise d'ancre par laquelle l'attribut href commence http://en.wikipedia.org/ et en le combinant avec le :ne pas, il va évidemment sélectionner le contraire. Alors on y va:
a: not ([href ^ = "http://fr.wikipedia.org/"]): after background-color: # F8EEBD; bordure: 1px solide # EEC56D; border-radius: 3px 3px 3px 3px; couleur: # B0811E; contenu: "!"; taille de la police: 10 pt; marge gauche: 5px; rembourrage: 1px 6px; position: relative;
Ça marche! Les balises d'ancrage qui ne pointent pas vers Wikipedia ont maintenant un point d'exclamation.
Bug Chrome
Si vous affichez cela dans Chrome, vous remarquerez que l'effet de rendu n'est pas comme ci-dessus. Tous les liens semblent avoir un point d'exclamation indépendamment de l'URL.
Ce cas a en fait été traité comme un bug. Donc, pour corriger ce bogue, nous devons ajouter cette règle.
a [href ^ = "http://fr.wikipedia.org/"] / * Chrome Hack * / display: inline-block;
Et maintenant, le problème aurait dû être résolu.
- Démo
Conclusion
Dans certaines circonstances, en utilisant le :ne pas le sélecteur est vraiment l'option la plus efficace, comme dans l'exemple ci-dessus, où nous sommes en mesure de sélectionner des éléments aléatoires sans même ajouter de classe inutile, ni de balisage supplémentaire au document.
En utilisant ce sélecteur, vous pouvez réellement créer de superbes effets, dont voici un exemple: Fonctionnalité de filtrage avec CSS3
