Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel des CSS

Utiliser les sélecteurs d'attributs

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Bien souvent les balises HTML que vous stylez possèdent des attributs. Avec les sélecteurs CSS, il vous est possible de cibler encore plus finement les éléments pour leur appliquer des règles.
07:55

Transcription

Nous allons continuer à affiner nos sélecteurs en s'appuyant maintenant sur les attributs. Il est vrai que quand on reçoit en HTML, ou quand on construit une page HTML, souvent, on a beaucoup d'attributs qui font partie de notre document, ne serait-ce que parce qu'on a blindé notre document de balises aria, role, ou landmark, on a aussi des attributs HTML 5 qui sont souvent présents, des class, des attributs, etc. des title, des SRC, des href, et donc, on va pouvoir s'appuyer sur ces attributs-là pour pouvoir avoir des sélecteurs encore plus précis, plus fins. Alors ici, je les ai simplement matérialisé tous par l'attribut class, et j'ai donné des noms de class qui sont un peu particuliers, comme ici, il n'y en a pas, il y a une déclaration de class mais il n'y a rien du tout à l'intérieur. J'ai une class a, ab, b, abc, b a c, etc. donc vous voyez, avec des traits d'union, j'ai deux ID : un ID a, ici, dans la valeur n°6 et un ID b, ici, dans la valeur n°8, pour pouvoir définir. Alors vous allez me dire : « On n'utilise jamais des class a, b, ab, abc, etc. » On n'utilise pas ces lettres-là mais on peut utiliser les class de manière construite. Par exemple, vous pouvez très bien avoir une class marketing, et puis une class qui s'appellerait : « marketing direct » ou « marketing-direct », par exemple, ou « marketing-newsletter », « marketing-mail », « marketing-indirect ». Vous pouvez avoir plusieurs manières, en disant : « Attention, tous font partie du marketing, mais après, on a des spécificités. » Alors, plutôt que d'avoir deux class pour pouvoir définir qui serait qui, ça peut être le même nom qui va être utilisé. Après, on va pouvoir utiliser les sélecteurs en disant : « tout ce qui commence par marketing », par exemple. Alors c'est ce qu'on va voir de près, au niveau des sélecteurs d'attributs. Alors, prenons l'animation, ce sera un peu plus simple. Et reprenons ce cas de figure. Donc on va dire qu'on a une balise, quelle que soit la balise, une balise de type in line, de type block, peu importe, on a des balises qui ont un attribut, et ce, quel que soit l'attribut et ce, quelle que soit sa valeur. On va pouvoir venir filtrer, au travers de notre sélecteur, tout simplement, en indiquant : balise, crochet, attribut, crochet, ce qui veut dire qu"on va cibler tous les sélecteurs, toutes les balises qui auront un tel attribut. Maintenant, on peut être plus précis en disant : « attribut = "valeur" ». Alors, le « = » est discutable, beaucoup de littératures écrivent directement : «attribut = valeur ». Personnellement, je préfère utiliser : « attribut = "valeur" », un double quote, pas un simple quote, parce que je me suis aperçu qu'en travaillant avec du Javascript et en créant ces sélecteurs à la volée, que ce soit pour du jQuery ou du CSS, on se retrouve parfois avec des navigateurs qui décrochent et qui ne gèrent pas la chose. Il est préférable d'utiliser les double-guillemets, ce sera beaucoup plus secure, suivant les navigateurs et suivant l'aspect dynamique que vous allez donner à la création de ces sélecteurs. Ensuite, vous pouvez utiliser le « ^= », l'attribut doit commencer par cette valeur et là, ça rejoint pleinement ce que je vous disais sur marketing, marketing direct, marketing news, etc. Encore une fois, pensez à garder les guillemets autour de la valeur. Donc je ne vais pas le répéter à chaque fois, c'est facultatif, mais je vous le préconise. Ensuite, vous avez la possibilité d'utiliser « $ »,. Là, le « $ », c'est « $= », ça veut dire que ça se termine par ça. Alors là, c'est nickel pour pouvoir filtrer tout ce qui va être .pdf, .xls, .php, .js, etc. donc vous allez pouvoir filtrer directement, en fonction des liens sur la terminaison de l'attribut href par exemple, ou les images, les PNG, les JPEG, vous voyez, vous pouvez filtrer ces petits détails-là. Si vous mettez une « *= », ça veut dire que ça contient la valeur. Peu importe où se trouve la valeur dans le mot. Si je cherche « arkt », je vais le trouver au sein de marketing. Je n'ai pas besoin que ça soit délimité pour un mot, par un espace, ou autre. Pourquoi je vous dis ça ? Simplement parce que, ici, si vous utilisez le « ~= », à ce moment-là, ça veut dire que l'attribut contient une valeur, mais séparée par un espace. Cette valeur peut débuter ou finir la valeur de l'attribut, mais dès qu'elle est à l'intérieur, elle doit être séparée par un espace. Après, vous avez le pipe, le pipe, c'est ce caractère « | ». Sous Macintosh, il me semble que c'est le menu cmd + L, sur PC, c'est la touche alt gr + 6. Là, ça veut dire que ça va être séparé par un trait d'union, donc si j'écrit « marketing direct », je peux cibler direct car il y a un trait d'union qui le sépare, vous voyez ? Donc là, c'est assez intéressant, suivant la manière dont vous allez utiliser les attributs. Et ensuite, on peut coupler deux attributs. C'est à dire, je peux dire : « Je recherche une balise qui a tel et tel attribut. » Et bien sûr que l'on va pouvoir rentrer maintenant dans chacun de ces attributs avec des commence, finit, contient, etc. donc c'est illimité, et ça ne se limite pas à deux, vous pouvez en avoir trois. Ca va nous permettre de pouvoir travailler de manière chirurgicale sur nos sélecteurs d'attributs. Il ne nous reste plus qu'à le mettre en application sur ce fichier. Vous avez bien compris qu'ici, on a le fichier avec toutes les class, donc si je vais dans la feuille de style CSS, on a tous nos paragraphes qui sont en class background-color, ce vert, parfait. Maintenant, puisque tous l'ont également, je pourrais très bien venir ici et dire : « Je veux tous les p dont l'attribut class existe. » Et là, si j'actualise, ça change rien. Et je pourrais également dire : « Je ne veux que les class, qu'importe l'attribut qu'il y a devant. » Par contre, attention, toutes les balises HTML qui contiendraient l'attribut class seraient affectées également. C'est à vous de voir si vous laissez le p devant, s'il y a besoin, ou pas, en fonction de ce que vous allez utiliser. Maintenant, pour pouvoir aller les explorer une par une, va déjà consister à mettre un pseudo before, ici, donc p : : before, on verra le before, ne vous inquiétez pas. Son contenu, ça va être l'attribut class, et puis je vais concaténer, juste après ça, deux espaces, un trait d'union. Donc plutôt qu'un long discours, actualisons, vérifions, vous voyez, au-devant du paragraphe, il a été ajouté l'attribut class. Donc l'attribut class contient : a , ab b, etc. tout ce qu'on avait vu tout à l'heure dans le fichier source, ici, toutes ces valeurs-là. Elles sont placées dans le contenu et elles sont concaténées directement avec deux espaces, un trait d'union, un espace, devant, pour pouvoir le lire. Voyez, celui-là est vide. Ici, il n'y a rien, ni trait d'union, ni rien. Ce qui fait que ça va être plus facile pour voir si ça correspond bien ou pas. Alors ce que je vous propose ici, moi, c'est de commenter cette ligne et puis de faire varier chacune des valeurs par tous les sélecteurs. De cette façon, vous aurez, vous, toutes les possibilités de travail, après, sur ce fichier source. Ici, si je mets « class = a » si j'actualise, on voit qu'il n'y a que la class a qui contient « a », quelque part, qui est égal, purement, à « a ». Ici, qui commence par « a », vous voyez que toutes les class qui commencent par « a » sont sélectionnées, Toutes les class qui terminent par la lettre « c ». Ici, on voit bien que tout est concerné. Donc, vous voyez, c'est super facile d'utiliser ce genre de filtrage, ici, parce que si vos class et vos attributs ont été travaillés de manière prédéfinie à ce genre d'utilisation, après, c'est jouer sur du velours. Ici, maintenant, qui contient un « a », mais un « a » qui soit séparé par un espace. Donc, vous voyez, ici, le « a », il est utilisé vu qu'il est tout seul, et ici, il est utilisé car il y a un espace de chaque côté. J'aurais eu un « a » qui se termine, mettons, « ab a », ça aurait fonctionné également. Ne pas confondre avec « *a », qui, lui, dit : « Pourvu qu'il y ait un "a" dedans, peu importe comment il est placé. » Et également, ne pas confondre avec celui qui se focalise sur le trait d'union, qui, lui, utilise le fameux « | », ici, le caractère vertical. Et là, on ne va chercher que les « a », soit tout seuls, soit les « a », qui sont séparés par des traits d'union. Et puis, enfin, le fait de pouvoir utiliser plusieurs filtrages d'attributs, plusieurs sélecteurs d'attributs. Alors, je vais enregistrer. Pourvu qu'il y ait l'attribut class et l'attribut ID, ici. Donc si j'actualise la page, on voit bien que ça utilise l'attribut class et l'attribut ID, rappelez-vous, c'était le 6 et le 8, ici. Le 6, ici, qui a l'attribut a, et le 8. Et bien entendu, on peut aller filtrer en disant : « Mais je ne veux que l'ID qui est égal à "a", dont l'ID est égal à "a" », et vous voyez que vous pourrez, encore une fois, affiner votre sélection. Voilà, donc ne pas oublier, puisque les balises HTML sont truffées d'attributs, d'aller sélectionner par ces attributs-là.

L'essentiel des CSS

​Explorez et assimilez les outils de base des CSS pour en comprendre les interactions visuelles. Structurez et gérez ainsi l’apparence et le visuel de vos sites web.

5h09 (54 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :28 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !