30 sélecteurs · 95 propriétés · 8 catégories
Documentation CSS
Les sélecteurs, pseudo-classes et propriétés CSS, avec chaque valeur montrée dans un exemple en direct. Modèle de boîte, Flexbox, Grid, typographie, transitions et animations.
125 entrées
Sélecteurs
Sélectionner des éléments par balise, classe, attribut et position dans l’arbre du document.
- Sélecteur de typeSélectionne tous les éléments portant un nom de balise donné, par exemple chaque paragraphe p ou chaque élément de liste li.
- .classeSélectionne les éléments qui ont la classe indiquée dans l’attribut class. Le sélecteur le plus utilisé pour styliser des composants.
- #idSélectionne l’élément portant l’identifiant indiqué dans l’attribut id. Il a une spécificité très élevée, donc ses règles sont difficiles à écraser par la suite.
- [attribut]Sélectionne les éléments selon un attribut HTML et sa valeur : exacte, au début, à la fin, un fragment, ou un mot dans une liste.
- *L’astérisque correspond à chaque élément. Il sert aux réinitialisations de styles et aux règles qui visent tous les enfants d’un conteneur donné.
- A BUn espace entre deux sélecteurs sélectionne les éléments B situés n’importe où à l’intérieur de l’élément A, à n’importe quelle profondeur.
- A > BLe signe > sélectionne les éléments B qui sont des enfants directs de l’élément A, c’est-à-dire situés exactement un niveau plus bas.
- A + BLe signe + sélectionne l’élément B qui se trouve immédiatement après l’élément A et partage le même parent que lui.
- A ~ BLe signe ~ sélectionne tous les éléments B qui se trouvent n’importe où après l’élément A et partagent le même parent que lui.
- A, BLa virgule combine plusieurs sélecteurs en une seule règle, pour leur donner les mêmes styles sans répéter les déclarations.
- &Permet d’écrire des règles à l’intérieur d’autres règles, comme en Sass. Le signe & y représente le sélecteur de la règle parente.
- SpécificitéLe poids d’un sélecteur, qui détermine quelle règle gagne lorsque plusieurs règles définissent la même propriété du même élément.
Pseudo-classes
États et positions des éléments : survol, focus, sélection, n-ième élément et validation.
- :hoverCorrespond à l’élément survolé par le curseur de la souris. La base des effets de survol sur les boutons, les liens et les cartes.
- :focusCorrespond à l’élément qui a le focus, c’est-à-dire qui reçoit actuellement la saisie au clavier, par exemple un champ de formulaire cliqué.
- :focus-visibleCorrespond à un élément ayant le focus seulement quand le navigateur juge que l’indicateur doit être visible, par exemple lors d’une navigation au clavier.
- :focus-withinCorrespond à un élément qui a lui-même le focus ou qui contient un élément avec le focus. Permet de mettre en valeur tout un formulaire ou une carte.
- :activeCorrespond à l’élément au moment de son activation, le plus souvent quand le bouton de la souris est enfoncé sur un bouton ou un lien.
- :first-childCorrespond à l’élément qui est le premier enfant de son parent.
- :last-childCorrespond à l’élément qui est le dernier enfant de son parent.
- :nth-child()Sélectionne des éléments selon leur position parmi leurs frères : un sur deux, un sur trois, les trois premiers ou tous à partir du septième.
- :nth-of-type()Sélectionne des éléments selon leur position parmi les frères portant la même balise, par exemple une image sur deux ou le troisième paragraphe.
- :not()Sélectionne les éléments qui ne correspondent à aucun des sélecteurs fournis, ni à aucun de la liste.
- :is()Fait correspondre l’élément à n’importe quel sélecteur de la liste. Raccourcit les longs sélecteurs répétitifs en une seule écriture.
- :where()Fonctionne comme :is(), mais a toujours une spécificité nulle. Idéale pour les styles de base, faciles à redéfinir.
- :has()Sélectionne un élément en fonction de ce qu’il contient ou de ce qui se trouve après lui. Permet de styliser un parent selon ses enfants.
- :checkedCorrespond à une case cochée, à un bouton radio sélectionné et à l’option choisie dans une liste select.
- :disabledCorrespond aux éléments désactivés d’un formulaire, c’est-à-dire ceux qu’on ne peut ni cliquer, ni cocher, ni modifier.
- :invalidCorrespond aux champs de formulaire dont la valeur enfreint les règles de validation HTML, par exemple un champ requis vide ou une adresse e-mail incorrecte.
- :placeholder-shownCorrespond à un champ input ou textarea qui affiche actuellement un texte de substitution, c’est-à-dire qu’il est vide et possède l’attribut placeholder.
- :rootCorrespond à l’élément racine du document, en HTML à la balise html. L’emplacement habituel pour les variables CSS de toute la page.
Modèle de boîte
Dimensions, marges, marges internes, bordures et débordement.
- widthDéfinit la largeur d’un élément.
- heightDéfinit la hauteur d’un élément.
- min-widthDéfinit une largeur minimale, en dessous de laquelle l’élément ne se réduit pas.
- max-widthDéfinit une largeur maximale, au-delà de laquelle l’élément ne s’étire pas.
- min-heightDéfinit une hauteur minimale, tout en laissant l’élément grandir avec son contenu.
- max-heightDéfinit la hauteur maximale d’un élément.
- marginDéfinit l’espace extérieur d’un élément par rapport à ses voisins.
- paddingDéfinit l’espace intérieur entre le contenu et la bordure.
- borderRaccourci qui définit l’épaisseur, le style et la couleur d’une bordure.
- border-widthDéfinit l’épaisseur d’une bordure.
- border-styleDéfinit le style de la ligne de bordure : continue, en tirets, en pointillés, et plus encore.
- border-colorDéfinit la couleur d’une bordure.
- border-radiusArrondit les coins d’un élément.
- box-sizingDécide si width et height incluent la marge intérieure et la bordure.
- outlineDessine un contour autour d’un élément, sans qu’il occupe de place dans la mise en page.
- overflowDécide quoi faire du contenu qui ne tient pas dans un élément.
- aspect-ratioDéfinit le rapport entre la largeur et la hauteur d’un élément.
- outline-offsetÉloigne le contour du bord de l’élément, ou le ramène vers l’intérieur, sans modifier la mise en page.
- overflow-xDécide quoi faire du contenu qui dépasse horizontalement. Sa jumelle overflow-y fait la même chose verticalement.
- margin-inlineDéfinit les marges au début et à la fin d’une ligne. La version logique de margin-left et margin-right, qui comprend le sens d’écriture.
- padding-inlineDéfinit l’espace intérieur au début et à la fin d’une ligne. La version logique de padding-left et padding-right, qui comprend le sens d’écriture.
- inline-sizeDéfinit la taille d’un élément le long de la ligne de texte. En écriture horizontale, c’est la largeur, et sa paire block-size définit la hauteur.
- border-imageRemplace une bordure classique par une image ou un dégradé découpé en coins et en bords.
Mise en page et positionnement
Mode d’affichage d’un élément, position, empilement et flottement.
- displayDétermine comment un élément se comporte dans la mise en page de la page et comment il organise ses enfants.
- positionChoisit la façon de positionner un élément : dans le flux, en relatif, en absolu, en fixe ou en collant.
- topÉloigne un élément positionné du bord supérieur de son point de référence.
- rightÉloigne un élément positionné du bord droit de son point de référence.
- bottomÉloigne un élément positionné du bord inférieur de son point de référence.
- leftÉloigne un élément positionné du bord gauche de son point de référence.
- insetUn raccourci qui définit top, right, bottom et left en une seule déclaration.
- z-indexDétermine quel élément se trouve au-dessus quand des éléments se chevauchent.
- floatDéplace un élément vers le bord gauche ou droit, et le texte le contourne de l’autre côté.
- clearForce un élément à descendre sous les éléments flottants qui le précèdent.
- visibilityMasque un élément, mais laisse l’espace vide qu’il occupait.
- container-typeTransforme un élément en conteneur dont les règles @container peuvent interroger la taille. Couvre aussi container-name et le raccourci container.
- columnsRépartit le contenu d’un élément en colonnes comme dans un journal. Raccourci pour column-width et column-count.
- column-ruleTrace une ligne entre les colonnes d’une mise en page multicolonne. Raccourci pour l’épaisseur, le style et la couleur de la ligne.
- containPromet au navigateur que l’intérieur d’un élément n’affecte pas le reste de la page, afin qu’il puisse limiter le recalcul de la mise en page et le rendu.
- content-visibilityPermet au navigateur d’ignorer le rendu du contenu qui n’est pas visible, et accélère ainsi les pages longues.
Flexbox
Disposition des éléments sur une seule dimension, en ligne ou en colonne.
- justify-contentRépartit les éléments le long de l’axe principal d’un conteneur flex ou grid.
- align-itemsAligne les éléments sur l’axe secondaire d’un conteneur flex ou grid.
- flex-directionDéfinit le sens de l’axe principal : les éléments flex s’alignent en ligne ou en colonne.
- flex-wrapPermet aux éléments flex de passer à la ligne suivante quand la place manque.
- flex-flowRaccourci qui réunit flex-direction et flex-wrap en une seule déclaration.
- align-contentRépartit des lignes entières d’éléments sur l’axe secondaire du conteneur.
- align-selfRemplace l’alignement d’un seul élément sur l’axe secondaire.
- orderChange l’ordre d’affichage d’un élément dans un conteneur flex ou grid.
- flex-growDétermine avec quelle avidité un élément grandit pour remplir l’espace libre.
- flex-shrinkDétermine à quel point un élément rétrécit quand la place manque dans le conteneur.
- flex-basisFixe la taille de départ d’un élément flex sur l’axe principal, avant qu’il ne commence à grandir ou à rétrécir.
- flexRaccourci qui règle flex-grow, flex-shrink et flex-basis d’un élément.
- gapDéfinit l’espace entre les éléments d’un conteneur flex, grid ou multi-colonnes.
- row-gapDéfinit l’espace entre les lignes d’un conteneur flex ou grid.
- column-gapDéfinit l’espace entre les colonnes d’un conteneur flex, grid ou multi-colonnes.
Grid
Une grille à deux dimensions avec lignes, colonnes et zones nommées.
- grid-template-columnsDéfinit les colonnes de la grille : leur nombre et leur largeur.
- grid-template-rowsDéfinit les lignes de la grille : leur nombre et leur hauteur.
- grid-template-areasDécrit la mise en page de la grille avec des zones nommées, presque comme un dessin dans le code.
- grid-templateRaccourci qui règle les lignes, les colonnes et les zones nommées de la grille en une seule déclaration.
- grid-auto-columnsFixe la largeur des colonnes que la grille crée automatiquement.
- grid-auto-rowsFixe la hauteur des lignes que la grille crée automatiquement.
- grid-auto-flowDécide comment les éléments sans position définie remplissent la grille.
- grid-columnDétermine dans quelles colonnes de la grille un élément commence et se termine.
- grid-rowDétermine dans quelles lignes de la grille un élément commence et se termine.
- grid-areaAssigne un élément à une zone nommée de la grille, ou règle en une fois ses lignes et ses colonnes.
- justify-itemsAligne tous les éléments dans leurs cellules le long de l’axe horizontal.
- justify-selfAligne un seul élément dans sa cellule de grille le long de l’axe horizontal.
- place-itemsRaccourci qui règle align-items et justify-items en même temps.
- place-contentRaccourci qui règle align-content et justify-content en même temps.
- place-selfRaccourci qui règle align-self et justify-self d’un seul élément.
Typographie
Polices, tailles, interlignage, alignement et décoration du texte.
- font-familyChoisit une police, avec une liste de polices de secours en cas d’indisponibilité de la première.
- font-sizeDéfinit la taille de la police.
- font-weightDéfinit la graisse de la police, du plus fin au plus gras.
- font-styleActive l’italique ou l’inclinaison du texte.
- line-heightDéfinit la hauteur de chaque ligne de texte, l’espacement entre les lignes.
- letter-spacingModifie l’espacement entre les lettres.
- word-spacingModifie l’espacement entre les mots.
- text-alignAligne le texte horizontalement : à gauche, à droite, au centre ou sur les deux bords.
- text-decorationAjoute ou supprime des lignes au niveau du texte : souligné, barré, ligne au-dessus.
- text-transformChange la casse des lettres : tout en majuscules, tout en minuscules, ou une majuscule au début de chaque mot.
- text-indentDéfinit le retrait de la première ligne de texte dans un bloc.
- text-shadowAjoute une ombre sous le texte.
- white-spaceDétermine comment traiter les espaces, les retours à la ligne et le retour automatique dans le texte.
- word-breakPermet de couper les mots n’importe où lorsqu’ils ne tiennent pas sur la ligne.
- overflow-wrapCoupe les mots longs uniquement lorsqu’ils dépasseraient sinon du conteneur.
- text-overflowDétermine comment marquer un texte coupé à la fin d’une ligne, par exemple avec des points de suspension.
- vertical-alignAligne verticalement les éléments en ligne et le contenu des cellules de tableau.
- font-variantActive des variantes de la police, par exemple les petites capitales ou des chiffres de largeur égale.
- fontRaccourci qui définit le style, la graisse, la taille, l’interligne et la police en une seule fois.
Comparaisons
Les différences entre des propriétés et des techniques de mise en page proches, et quand choisir laquelle.
- Flexbox vs GridFlexbox aligne les éléments sur un axe et s’adapte à leur contenu, alors que Grid organise une grille à deux dimensions, en lignes et colonnes, où vous les placez.
- margin vs paddingmargin est un espace transparent à l’extérieur de l’élément. padding est l’espace à l’intérieur de la bordure, entre le contenu et le bord, et prend le fond de l’élément.
- display vs visibility vs opacitydisplay: none retire l’élément de la mise en page, visibility: hidden le cache mais garde sa place, et opacity: 0 le rend transparent tout en le laissant cliquable.
- transition vs animationtransition anime le changement entre deux états après un déclencheur, par ex. :hover. animation rejoue les étapes de @keyframes toute seule, même en boucle.
- :nth-child() vs :nth-of-type()nth-child() compte tous les éléments du parent, quelle que soit la balise. nth-of-type() compte seulement les frères avec la même balise que le sélecteur choisi.
- border vs outlineborder fait partie du modèle de boîte et agrandit l’élément, alors que outline dessine un contour à l’extérieur, sans effet sur la mise en page ni la taille.
- :focus vs :focus-visiblefocus cible tout élément qui a le focus, même après un clic de souris. focus-visible affiche un indicateur seulement là où le navigateur le juge nécessaire.