:nth-child(n + 3) et :nth-last-child(n + 3)
Sélectionner tous les éléments à partir du 3e, depuis le début ou depuis la fin d'une série.
Ouvrir la démo : :nth-child(n + 3) et :nth-last-child(n + 3)Démos
Exemples interactifs en HTML, CSS et JavaScript.
Filtrer les démos par tag :
41 démos
@starting-style – exemple de base
Définir le style de départ d’une transition au premier rendu avec @starting-style.
Ouvrir la démo : @starting-style – exemple de base@starting-style – transition de display
Animer l’apparition d’un élément en display none avec @starting-style et transition-behavior allow-discrete.
Ouvrir la démo : @starting-style – transition de displayAdapter une carte à son contenu avec :has()
Changer la mise en page d'une carte quand elle contient une image grâce à :has().
Ouvrir la démo : Adapter une carte à son contenu avec :has()Anchor positioning – anchor-name et position-anchor
Ancrer un élément à un autre avec anchor-name, position-anchor et la fonction anchor().
Ouvrir la démo : Anchor positioning – anchor-name et position-anchorAnimation-timeline – scroll-timeline nommée
Piloter plusieurs animations depuis une scroll-timeline nommée sur un conteneur défilant.
Ouvrir la démo : Animation-timeline – scroll-timeline nomméeAnimation-timeline – timeline-scope
Partager une scroll-timeline nommée avec un élément extérieur au conteneur grâce à timeline-scope.
Ouvrir la démo : Animation-timeline – timeline-scopeAnimation-timeline scroll() – carré en rotation
Faire tourner un carré en fonction du défilement avec animation-timeline et scroll().
Ouvrir la démo : Animation-timeline scroll() – carré en rotationAnimation-timeline scroll() – valeur de progression
Afficher le pourcentage de défilement avec @property, un compteur CSS et animation-timeline.
Ouvrir la démo : Animation-timeline scroll() – valeur de progressionAnimation-timeline view() – animation-range
Limiter l’apparition d’une image à une portion de la view timeline avec animation-range.
Ouvrir la démo : Animation-timeline view() – animation-rangeAnimation-timeline view() – apparition avec inset
Décaler la zone de déclenchement de view() avec des valeurs d’inset pour faire apparaître une image.
Ouvrir la démo : Animation-timeline view() – apparition avec insetAnimation-timeline view() – apparition d’une image
Faire apparaître une image quand elle entre dans le viewport avec animation-timeline et view().
Ouvrir la démo : Animation-timeline view() – apparition d’une imageAnimation-timeline view() – plages multiples
Combiner les plages entry et exit dans une seule animation pilotée par view().
Ouvrir la démo : Animation-timeline view() – plages multiplesCibler un élément avec :nth-child()
Mettre en avant un élément précis d'une série grâce à :nth-child() et une custom property.
Ouvrir la démo : Cibler un élément avec :nth-child()Container size queries
Adapter la mise en page de cartes à la taille de leur conteneur avec @container et les unités cqi.
Ouvrir la démo : Container size queriesDétecter un élément vide avec :has() et :empty
Signaler une liste qui contient un élément vide en combinant :has() et :empty.
Ouvrir la démo : Détecter un élément vide avec :has() et :emptyDialog animé avec les CSS layers
Ouverture et fermeture d’un dialogue avec @starting-style, allow-discrete et overlay.
Ouvrir la démo : Dialog animé avec les CSS layersEffet de lueur au curseur avec setProperty
Halo lumineux qui suit le pointeur sur des cartes, piloté en JavaScript via setProperty et des custom properties.
Ouvrir la démo : Effet de lueur au curseur avec setPropertyLargeur de conteneur avec clamp()
Contraindre la largeur d'un élément entre un minimum et un maximum avec clamp().
Ouvrir la démo : Largeur de conteneur avec clamp()Loader 3D avec des variables CSS
Le même loader 3D sans préprocesseur, grâce aux custom properties et à calc().
Ouvrir la démo : Loader 3D avec des variables CSSLoader 3D avec des variables Sass
Loader animé en 3D construit avec des boucles et des variables Sass, compilées en CSS.
Ouvrir la démo : Loader 3D avec des variables SassMenu de navigation coulissant avec Popover
Construire un menu latéral coulissant sans JavaScript avec l’API Popover et @starting-style.
Ouvrir la démo : Menu de navigation coulissant avec PopoverNotation par étoiles avec :has() et ~
Colorer les étoiles précédant la note choisie en combinant :has() et le combinateur ~, sans JavaScript.
Ouvrir la démo : Notation par étoiles avec :has() et ~Notification Popover avec JavaScript
Afficher une notification de validation de formulaire avec showPopover() et des popovers manual.
Ouvrir la démo : Notification Popover avec JavaScriptPopover d’alerte – auto et manual
Comparer les popovers auto et manual et les actions toggle, show et hide de popovertargetaction.
Ouvrir la démo : Popover d’alerte – auto et manualPopover d’alerte avec @starting-style
Animer l’entrée et la sortie d’un popover d’alerte avec @starting-style et allow-discrete.
Ouvrir la démo : Popover d’alerte avec @starting-stylePositionnement par ancre CSS
Ancrer un élément flottant à un bouton avec anchor-name et position-anchor.
Ouvrir la démo : Positionnement par ancre CSSPositionnement par ancre CSS – anchor-size
Limiter la hauteur d’un élément ancré en fonction de la taille de son ancre avec anchor-size().
Ouvrir la démo : Positionnement par ancre CSS – anchor-sizePositionnement par ancre CSS – ancres multiples
Dimensionner un élément entre deux ancres déplaçables avec plusieurs anchor-name.
Ouvrir la démo : Positionnement par ancre CSS – ancres multiplesPositionnement par ancre CSS – position-try
Définir des positions de repli avec @position-try et position-try-fallbacks pour un élément ancré déplaçable.
Ouvrir la démo : Positionnement par ancre CSS – position-tryPositionnement par ancre CSS – position-visibility
Masquer un élément ancré selon la visibilité de son ancre avec position-visibility.
Ouvrir la démo : Positionnement par ancre CSS – position-visibilityPositionnement par ancre CSS interactif
Choisir le point d’ancrage d’éléments positionnés avec anchor() et position-anchor.
Ouvrir la démo : Positionnement par ancre CSS interactifQuantity query avec :has()
Changer le style d'un conteneur selon le nombre de ses enfants grâce à :has() et :nth-child().
Ouvrir la démo : Quantity query avec :has()Sélectionner l'élément précédent avec :has(+)
Cibler tous les éléments suivis d'un frère grâce à :has() et le combinateur +.
Ouvrir la démo : Sélectionner l'élément précédent avec :has(+)Styliser les liens avec :has() et les sélecteurs d'attribut
Ajouter icônes et couleurs aux liens selon leur href (externe, ancre, type de fichier) avec les sélecteurs d'attribut et :has().
Ouvrir la démo : Styliser les liens avec :has() et les sélecteurs d'attributSurcharge et héritage des variables CSS
Comprendre comment une custom property est héritée et surchargée selon l'élément qui l'utilise.
Ouvrir la démo : Surcharge et héritage des variables CSSSurvol de galerie avec :has()
Trois façons de flouter les images voisines au survol, du :not() sur le parent jusqu'à :has().
Ouvrir la démo : Survol de galerie avec :has()Transition sans @starting-style
Exemple de base d’une transition d’opacité sans @starting-style, où l’élément reste affiché.
Ouvrir la démo : Transition sans @starting-styleTyper une couleur avec @property
Comparer une custom property classique et une propriété typée <color> avec @property face à une valeur invalide.
Ouvrir la démo : Typer une couleur avec @propertyTypographie fluide avec clamp()
Adapter la taille des titres et paragraphes à la largeur de la fenêtre avec clamp().
Ouvrir la démo : Typographie fluide avec clamp()Variantes d'alertes avec les variables CSS
Décliner un composant d'alerte en surchargeant uniquement ses custom properties.
Ouvrir la démo : Variantes d'alertes avec les variables CSSAucune démo ne correspond aux tags sélectionnés.