Learn CSS: The Complete Guide

Nous avons créé un guide complet pour vous aider à apprendre le CSS, que vous soyez débutant avec les bases ou que vous souhaitiez explorer des CSS plus avancés.

Sélecteurs CSS

Alors, vous avez appris la base id, class et descendant sélecteurs de—puis le jour? Si c’est le cas, vous manquez un énorme niveau de flexibilité. Vous vous devez de valider ces sélecteurs CSS et CSS3 avancés en mémoire.

sélecteurs de base

1., *

* { margin: 0; padding: 0;}

éliminons les plus évidents, pour les débutants, avant de passer aux sélecteurs plus avancés.

le symbole étoile ciblera chaque élément de la page. Beaucoup de développeurs va utiliser cette astuce pour mettre à zéro le margins et padding. Bien que ce soit certainement très bien pour les tests rapides, je vous conseille de ne jamais l’utiliser dans le code de production. Il ajoute trop de poids sur le navigateur, et est inutile.

Le * peut également être utilisé avec des enfants de sélecteurs.,

#container * { border: 1px solid black;}

Cela va cibler chaque élément est un enfant de la balise #container div. Encore une fois, essayez de ne pas utiliser cette technique beaucoup, si jamais.

2. #X

#container { width: 960px; margin: auto;}

en Préfixant le symbole dièse à un sélecteur permet de cibler par id. C’est facilement l’utilisation la plus courante; cependant, soyez prudent lorsque vous utilisez les sélecteurs id.,

Demandez-vous: ai-je absolument besoin d’appliquer un id pour cet élément afin de les cibler?

id sélecteurs sont rigides et ne permettent pas de les réutiliser. Si possible, essayez d’abord d’utiliser un nom de balise, l’un des nouveaux éléments HTML5, ou même une pseudo-classe.

3. .X

.error { color: red;}

Ceci est un class sélecteur. La différence entre ids et classes, c’est que, avec ce dernier, vous pouvez cibler plusieurs éléments., Utilisez class es lorsque vous souhaitez que votre style s’applique à un groupe d’éléments. Sinon, utilisez ids pour trouver une aiguille dans une botte de foin, et stylisez uniquement cet élément spécifique.

4. X

a { color: red; }ul { margin-left: 0; }

Que faire si vous souhaitez cibler tous les éléments sur une page, en fonction de leur type, plutôt que d’un id ou classnom? Gardez les choses simples et utilisez un sélecteur de type. Si vous devez cibler toutes les listes non ordonnées, utilisez ul {}.,

démonstration en direct des sélecteurs de base

sélecteurs combinateurs

5. X Y

li a { text-decoration: none;}

Le plus souvent sélecteur est la balise descendant sélecteur. Lorsque vous avez besoin d’être plus précis avec vos sélecteurs, vous les utilisez. Par exemple, que se passe-t-il si, plutôt que de cibler toutes les balises d’ancrage, vous devez uniquement cibler les ancres qui se trouvent dans une liste non ordonnée? C’est précisément lorsque vous utiliseriez un sélecteur descendant.

pro-tip: si votre sélecteur ressemble àX Y Z A B.error, vous le faites mal., Demandez-vous toujours si il est absolument nécessaire d’appliquer tout ce poids.

6. X + Y

ul + p { color: red;}

Il s’agit d’un sélecteur adjacent. Il ne sélectionnera que l’élément qui est immédiatement précédé par l’ancien élément. Dans ce cas, seul le premier paragraphe après chaque ul aura du texte rouge.

7., X > Y

div#container > ul { border: 1px solid black;}

La différence entre le standard X Y et X > Y c’est que le second permettra de sélectionner uniquement les enfants directs. Par exemple, considérez le balisage suivant.

 <div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

Un sélecteur de #container > ul concernera uniquement la balise uls qui sont les enfants directs de la balise div avec un id de container., Il ne ciblera pas, par exemple, le ul qui est un enfant du premier li.

pour cette raison, l’utilisation du combinateur enfant présente des avantages en termes de performances. En fait, il est recommandé en particulier lorsque vous travaillez avec des moteurs de sélection CSS basés sur JavaScript.

8. X ~ Y

ul ~ p { color: red;}

Ce combinateur frère est similaire àX + Y, mais il est moins strict., Alors qu’un sélecteur adjacent (ul + p) ne sélectionnera que le premier élément immédiatement précédé de l’ancien sélecteur, celui-ci est plus généralisé. Il sélectionnera, en se référant à notre exemple ci-dessus, tous les éléments p, tant qu’ils suivent un ul.

Démo en Live de Combinateur de Sélecteurs

sélecteur d’Attribut

9. X

a { color: green;}

appelé sélecteur d’attributs, dans notre exemple ci-dessus, cela ne sélectionnera que les balises d’ancrage qui ont un attributtitle., Les balises d’ancrage qui ne le font pas ne recevront pas ce style particulier. Mais que faire si vous avez besoin d’être plus précis? Découvrez l’exemple suivant!

10. X

a { color: #83b348; /* Envato green */}

l’extrait ci-dessus stylisera toutes les balises d’ancrage qui lient àhttps://code.tutsplus.com; elles recevront notre couleur verte de marque. Toutes les autres balises d’ancrage resteront inchangées.

Notez que nous dévoilons la valeur entre guillemets. N’oubliez pas de le faire également lorsque vous utilisez un moteur de sélection CSS JavaScript. Lorsque cela est possible, utilisez toujours des sélecteurs CSS3 sur des méthodes non officielles.,

cela fonctionne bien, bien que ce soit un peu rigide. Que se passe-t-il si le lien dirige effectivement vers Envato Tuts+, mais peut-être que le chemin est code.tutsplus.com plutôt que l’URL complète? Dans ces cas, nous pouvons utiliser un peu de la syntaxe des expressions régulières.

11. X

a { color: #83b348; /* Envato green */}

voilà, c’est ce dont nous avons besoin. L’étoile indique que la valeur en cours doit apparaître quelque part dans la valeur de l’attribut. De cette façon, cela couvre tutsplus.com, code.tutsplus.com, et même webdesign.tutsplus.com.

gardez à l’esprit qu’il s’agit d’une déclaration générale., Que faire si la balise d’ancrage liée à un site non Envato avec la chaîne tutsplus dans l’URL? Lorsque vous avez besoin d’être plus précis, utilisez ^ Et $, pour référencer le début et la fin d’une chaîne, respectivement.

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

Vous êtes-vous déjà demandé comment certains sites Web peuvent afficher une petite icône à côté des liens externes? Je suis sûr que vous les avez déjà vus; ce sont de bons rappels que le lien vous dirigera vers un site Web entièrement différent.

ceci est un jeu d’enfant avec le symbole carat., Il est le plus couramment utilisé dans les expressions régulières pour désigner le début d’une chaîne. Si nous voulons cibler tous d’ancrage, les balises qui ont un href qui commence par http, nous pourrions utiliser un sélecteur similaire à l’extrait présenté ci-dessus.

notez que nous ne recherchons pas; c’est inutile et ne tient pas compte des URL qui commencent par

maintenant, et si nous voulions plutôt styliser toutes les ancres qui renvoient à, disons, une photo?, Dans ces cas, recherchons la fin de la chaîne.

13. X

a { color: red;}

Encore une fois, nous utilisons les expressions régulières symbole, $ pour voir la fin d’une chaîne. Dans ce cas, nous recherchons toutes les ancres qui renvoient à une image—ou au moins une URL qui se termine par .jpg. Gardez à l’esprit que cela ne capturera pas les images GIF et PNG.

14. X

a { color: red;}

Comment compenser pour tous les différents types d’images?, Eh bien, nous pourrions créer plusieurs sélecteurs, tels que:

a,a,a,a { color: red;}

Mais c’est douloureux et c’est inefficace. Une autre solution possible consiste à utiliser des attributs personnalisés. Et si nous ajoutions notre propre attributdata-filetype à chaque ancre qui renvoie à une image?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

ensuite, avec ce crochet en place, Nous pouvons utiliser un sélecteur d’attributs standard pour cibler uniquement ces ancres.

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

En voici un spécial qui impressionnera vos amis. Pas trop de gens savent à propos de cette affaire., Le symbole tilde (~) nous permet de cibler un attribut qui a une liste de valeurs séparées par des espaces.

en allant de pair avec notre attribut personnalisé du numéro 15, ci-dessus, nous pourrions créer un attributdata-info, qui peut recevoir une liste séparée par des espaces de tout ce dont nous devons prendre note. Dans ce cas, nous allons prendre note des liens externes et des liens vers des images—juste pour l’exemple.,

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

avec ce balisage en place, Nous pouvons maintenant cibler toutes les balises qui ont l’une de ces valeurs, en utilisant l’astuce du sélecteur d’attributs~.

Assez chouette, hein?

démonstration en direct des sélecteurs D’attributs

Pseudo sélecteurs

16. X:visité et X:lien

a:link { color: red; }a:visited { color: purple; }

Nous utilisons la balise :link pseudo-classe de cibler toutes les balises d’ancrage qui n’ont pas encore cliqué sur.,

alternativement, nous avons également la pseudo-classe:visited, qui, comme vous vous en doutez, nous permet d’appliquer un style spécifique uniquement aux balises d’ancrage de la page sur lesquelles on a cliqué ou « visitées ».

17. X: checked

input:checked { border: 1px solid black;}

Cette pseudo—classe ne ciblera qu’un élément d’interface utilisateur qui a été coché-comme un bouton radio ou une case à cocher. C’est aussi simple que cela.

18. X:après

Le before et after pseudo-classes sont grandes., Chaque jour, semble-t-il, les gens trouvent de nouvelles façons créatives de les utiliser efficacement. Ils génèrent simplement du contenu autour de l’élément sélectionné.

beaucoup ont d’abord été introduits dans ces classes lorsqu’ils ont rencontré le hack clear-fix.

Ce hack utilise la balise :after pseudo classe pour ajouter un espace après l’élément, puis l’effacer. C’est une excellente astuce à avoir dans votre sac à outils, en particulier dans les cas où la méthode overflow: hidden; n’est pas possible.

pour une autre utilisation créative de cela, reportez-vous à mon conseil rapide sur la création d’ombres.,

selon la spécification des sélecteurs CSS3, vous devez techniquement utiliser la syntaxe pseudo-élément de deux deux-points::. Cependant, pour rester compatible, l’agent utilisateur acceptera également une seule utilisation de deux-points.

19. X:hover

div:hover { background: #e3e3e3;}

Oh viens. Vous savez ce que c’est. Le terme officiel pour cela est « pseudo-classe d’action utilisateur ». Cela semble déroutant, mais ce n’est vraiment pas le cas. vous voulez appliquer un style spécifique lorsqu’un utilisateur survole un élément? Cela va faire le travail!,

gardez à l’esprit que les anciennes versions d’Internet Explorer ne répondent pas lorsque la pseudo-classe:hover est appliquée à autre chose qu’une balise d’ancrage.

vous utiliserez le plus souvent ce sélecteur lors de l’application, par exemple, d’un border-bottom aux balises d’ancrage, lorsque survolé.

a:hover { border-bottom: 1px solid black;}

Pro-tip: border-bottom: 1px solid black; air mieux que la text-decoration: underline;.

20., X:non(sélecteur)

div:not(#container) { color: blue;}

La négation de la pseudo classe est particulièrement utile. Disons que je veux sélectionner tous les divs, sauf celui qui a un id de container. L’extrait ci-dessus gérera parfaitement cette tâche.

ou, si je voulais sélectionner chaque élément (non conseillé) à l’exception des balises de paragraphe, nous pourrions faire:

*:not(p) { color: green;}

21., X:: pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

Nous pouvons utiliser des pseudo-éléments (désignés par::) pour styliser des fragments d’un élément, comme la première ligne ou la première lettre. Gardez à l’esprit que ceux-ci doivent être appliqués aux éléments de niveau bloc afin de prendre effet.,

Un pseudo-élément est composé de deux points: ::

Cible de la Première Lettre d’un Paragraphe

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

Ce modèle est une abstraction qui vous permettra de trouver tous les paragraphes de la page, et puis la sous-cible uniquement la première lettre de l’élément.

ceci est le plus souvent utilisé pour créer un style de journal pour la première lettre d’un article.,

cible la première ligne d’un paragraphe

p::first-line { font-weight: bold; font-size: 1.2em;}

de même, le pseudo élément::first-line stylisera, comme prévu, la première ligne de l’élément uniquement.

« pour la compatibilité avec les feuilles de style existantes, les agents utilisateurs doivent également accepter la notation à deux points précédente pour les pseudo-éléments introduits dans les niveaux CSS 1 et 2 (à savoir, :first-line, :first-letter, :before Et :after). Cette compatibilité n’est pas autorisée pour les nouveaux pseudo-éléments introduits dans cette spécification., »- Spécifications des sélecteurs W3C

démonstration en direct des Pseudo sélecteurs

nième sélecteur enfant et type

22. X: nth-child (n)

li:nth-child(3) { color: red;}

rappelez-vous les jours où nous n’avions aucun moyen de cibler des éléments spécifiques dans une pile? La pseudo-classenth-child résout cela!

veuillez noter quenth-child accepte un entier comme paramètre, mais ce n’est pas basé sur zéro. Si vous souhaitez cibler le deuxième élément de la liste, utilisez li:nth-child(2).

On peut même l’utiliser pour sélectionner un ensemble de variables d’enfants., Par exemple, nous pourrions faire li:nth-child(4n) pour sélectionner un élément de liste sur quatre.

23. X: nth-last-child(n)

li:nth-last-child(2) { color: red;}

et si vous aviez une énorme liste d’éléments dans un ul, et que vous n’aviez besoin que d’accéder, disons, au troisième au dernier élément? Plutôt que de faire li:nth-child(397), vous pouvez plutôt utiliser la pseudo-classe nth-last-child.

cette technique fonctionne presque à l’identique du numéro 16 ci-dessus. La différence est qu’il commence à la fin de la collection, et fonctionne son chemin de retour.

24., X:nth-of-type(n)

ul:nth-of-type(3) { border: 1px solid black;}

Il y aura des moments où, plutôt que de sélectionner un child, vous devez sélectionner en fonction de la balise type de l’élément.

Imaginez un balisage contenant cinq listes non ordonnées. Si vous vouliez style seulement le troisième ul, et n’ont pas une unique balise id raccorder, vous pouvez utiliser la balise nth-of-type(n) pseudo classe. Dans l’extrait ci-dessus, seul le troisième ul aura une bordure autour de lui.

25., X: nth-last-of-type(n)

ul:nth-last-of-type(3) { border: 1px solid black;}

et oui, pour rester cohérent, nous pouvons également utiliser nth-last-of-type pour commencer à la fin de la liste des sélecteurs et revenir à la cible de l’élément souhaité.

26. X: first-child

ul li:first-child { border-top: none;}

Cette pseudo-classe structurelle nous permet de cibler uniquement le premier enfant du parent de l’élément. Vous l’utiliserez souvent pour supprimer les bordures des premier et dernier éléments de la liste.

Par exemple, disons que vous avez une liste de lignes, et chacun a un border-top et un border-bottom., Eh bien, avec cet accord, le premier et le dernier élément de cet ensemble aura l’air un peu bizarre.

de Nombreux créateurs de classes de first et last pour compenser cela. Au lieu de cela, vous pouvez utiliser ces pseudo-classes.

27. X:dernier enfant

ul > li:last-child { color: green;}

Le contraire de first-child, last-child aura pour cible le dernier élément de l’élément parent.

last-child Sélecteur Exemple

nous allons construire un exemple simple pour démontrer une utilisation possible de ces classes., Nous allons créer un élément de liste de style.

 <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>

pour le balisage, il n’y a rien de spécial: juste une simple liste.

Voici le CSS:

Ce style définira un arrière-plan, supprimera le remplissage par défaut du navigateur sur leul et appliquera des bordures à chaqueli pour fournir un peu de profondeur.

Pour ajouter de la profondeur à vos listes, appliquer un border-bottom chaque li qui est une nuance ou deux plus sombre que le li‘s couleur d’arrière-plan., Ensuite, appliquez un border-top qui est quelques nuances plus claires.

le seul problème, comme indiqué dans l’image ci—dessus, est qu’une bordure sera appliquée tout en haut et en bas de la liste non ordonnée-ce qui semble étrange. Utilisons les pseudo-classes:first-child et:last-child pour résoudre ce problème.

li:first-child { border-top: none;}li:last-child { border-bottom: none;}

nous Y voilà; qu’il fixe!

28., X: only-child

div p:only-child { color: red;}

honnêtement, vous ne vous retrouverez probablement pas trop souvent à utiliser la pseudo-classeonly-child. Néanmoins, il est disponible, si vous en avez besoin.

Il vous permet de cibler les éléments qui sont le seul enfant de son parent. Par exemple, en faisant référence à l’extrait ci-dessus, seul le paragraphe qui est le seul enfant du div sera coloré en rouge.

supposons le balisage suivant.,

<div><p> My paragraph here. </p></div><div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p></div>

Dans ce cas, le deuxième div‘s paragraphes ne sera pas ciblée; seule la première balise div. Dès que vous appliquez plus d’un enfant à un élément, la pseudo-classe only-child cesse de prendre effet.

29. X: only-of-type

li:only-of-type { font-weight: bold;}

Cette pseudo-classe structurelle peut être utilisée de manière intelligente. Il ciblera les éléments qui n’ont pas de frères et sœurs dans son conteneur parent. Par exemple, ciblons tous les ulqui n’ont qu’un seul élément de liste.,

tout d’Abord, demandez-vous comment vous feriez accomplir cette tâche. Vous pouvez faire ul li, mais cela ciblerait tous les éléments de la liste. La seule solution consiste à utiliser only-of-type.

ul > li:only-of-type { font-weight: bold;}

30. X: first-of-type

La pseudo-classe first-of-type vous permet de sélectionner les premiers frères et sœurs de son type.

Test

Pour mieux comprendre, faisons un test. Copiez le balisage suivant dans votre éditeur de code:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

maintenant, sans lire plus loin, essayez de comprendre comment cibler uniquement « List Item 2 »., Lorsque vous l’avez compris (ou abandonné), lisez la suite.

Solution 1

Il existe une variété de façons de résoudre ce test. Nous allons passer en revue une poignée d’entre eux. Commençons par utiliser first-of-type.

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

cet extrait dit essentiellement, de trouver la première liste non ordonnée sur la page, puis de ne trouver que les enfants immédiats, qui sont des éléments de liste. Ensuite, filtrez-le jusqu’au deuxième élément de liste de cet ensemble.

Solution 2

une Autre option est d’utiliser le sélecteur adjacent.,

p + ul li:last-child { font-weight: bold;}

Dans ce scénario, nous trouvons le ul qui procède immédiatement la balise p balise, et ensuite, trouver le dernier enfant de l’élément.

Solution 3

Nous pouvons être aussi odieux ou aussi ludiques que nous le souhaitons avec ces sélecteurs.

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

Cette fois, nous saisissons le premierul sur la page, puis trouvons le tout premier élément de liste, mais en commençant par le bas!,

démonstration en direct du nième sélecteur enfant et Type

Conclusion

Si vous compensez les anciens navigateurs, comme Internet Explorer 6, Vous devez toujours être prudent lorsque vous utilisez ces nouveaux sélecteurs. Mais ne laissez pas cela vous dissuader de les apprendre. Vous vous rendriez un énorme mauvais service. Assurez-vous de vous référer ici pour une liste de compatibilité du navigateur. Alternativement, vous pouvez utiliser L’excellent IE9 de Dean Edward.script js pour apporter la prise en charge de ces sélecteurs aux navigateurs plus anciens.,

Deuxièmement, lorsque vous travaillez avec des bibliothèques JavaScript, comme le populaire jQuery, essayez toujours d’utiliser ces sélecteurs CSS3 natifs sur les méthodes/sélecteurs personnalisés de la bibliothèque, lorsque cela est possible. Cela rendra votre code plus rapide, car le moteur de sélection peut utiliser l’analyse native du navigateur, plutôt que la sienne.

c’est génial que vous passiez du temps à apprendre les principes fondamentaux de la conception web, mais si vous avez besoin d’une solution rapide, l’un de nos modèles CSS prêts à l’emploi pourrait être une bonne option. Nous avons également quelques éléments CSS premium à considérer.,

• CSS3
  12 tables de tarification CSS élégantes pour votre dernier projet Web
  Monty Shokeen
• Bootstrap 4
  18 meilleurs plugins Bootstrap 4
  Monty Shokeen

accès GRATUIT à Envato Elements pendant 1 mois

enfin, voici une offre très spéciale pour vous aider à créer des sites et des applications d’apparence professionnelle. En plus d’utiliser ces sélecteurs CSS, pourquoi ne pas profiter de photos de haute qualité, de séquences vidéo, de polices premium, de graphiques, d’illustrations et plus encore?,

normalement, vous devez payer pour des ressources comme ça. Mais à l’heure actuelle, vous pouvez accéder gratuitement à des millions d’actifs créatifs pour vos projets de codage pendant un mois entier. Et de plus, vous obtenez des téléchargements illimités, de sorte que vous pouvez saisir autant que vous voulez au cours de ce mois, et ne payez que si vous décidez de continuer!,

Pour profiter de cette offre, cliquez sur cette spéciale lien inscription ou entrez le code ci-dessous sur la page d’inscription:

elements_cont_tuts-freemonth1-4bwkbp

N’attendez pas trop longtemps—l’offre est valable seulement pour un temps limité!