Les pseudo-classes :first, :left, :right et :blank.

:first

Résumé des caractéristiques du sélecteur :first

Description rapide
Pseudo-classe désignant le première page.
Statut
Standard
Module W3C
Module CSS - Media paginé
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: REC (recommandation)

Les pseudo-classes :first, :left, :right et :blank.

Ces quatre pseudo-classes sont utilisables en combinaison avec la directive @page. Elles permettent de cibler respectivement la première page imprimée, les pages de gauche, les pages de droite, et les pages vides.

Une page vide peut être provoquée par un saut de page forcé jusqu'à la prochaine page de gauche par exemple :
break-before:left;

Attention ! Très peu de propriétés sont utilisables avec @page. Les règles portant sur des propriétés autres que celles énumérées ci-dessous seront ignorées :

  • Propriétés définissant les marges : la propriété résumée margin et les propriétés détaillées équivalentes.
  • Les propriétés widows et orphans, relatives à la gestion des ruptures du texte en fin de page.
  • Quelques autres propriétés telles que size qui définit la taille des pages imprimées, page-orientation, etc.

A savoir aussi, concernant les pages imprimées.

Pseudo-classes pour cibler certaines pages.
Cette directive est un sélecteur qui cible les pages imprimées.
Définit la présence d'une marge supplémentaire pour les pages imprimées.
Choisit les traits de coupe et repères d'alignement.
Définit une page nommée (voir la directive @page) pour imprimer cet élément ou cette partie du document.
Définit si les pages imprimées doivent être tournées, et vers la droite ou la gauche.
S'utilise avec la directive @page.
Dimensions et orientation des pages imprimées.

Il est prévu aussi une pseudo-classe :blank pour cibler les pages vides mais les navigateurs ne la reconnaissent pas.

Exemples avec :first, :left, :right et :blank.

Des marges différentes ont été définies pour les pages imprimées de ce document :
La première page a des marges droite et gauche identiques.
Les pages de gauche ont une marge droite plus importante.

Des sauts de page forcés ont été placé avant chaque titre h2 afin que le document imprimé comporte plusieurs pages.

Bien entendu, pour constater tout cela, vous devrez imprimer le document, ou tout au moins l'afficher en aperçu.

Compatibilité des navigateurs.

A part Firefox  , tous les navigateurs modernes traitent correctement les trois premières pseudo-classes. En ce qui concerne :blank il faudrait déjà qu'il soit possible de provoquer des pages vides lors de l'impression.

Colonne 1
Support de la pseudo-classe :first, utilisée avec @page, et permettant de cibler la première page imprimée.
Colonne 2
Support des pseudo-classes left et right avec la directive @page, permettant de distinguer les pages gauche et droite lors de l'impression.
Colonne 3
Prise en charge du sélecteur par pseudo-classe :right pour cibler les pages de droite lors d'une l'impression en recto-verso.
Colonne 4
Prise en charge par les navigateurs de sélecteur par pseudo-classe :blank qui cible les pages vides.
1
Pseudo-classe
:first
2
Pseudo-classe
:left
3
Pseudo-classe
:right
4
Pseudo-classe
:blank
Estimation de la prise en charge globale.
95%
93%
95%
0%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Safari

Safari sur IOS

Opéra

Firefox pour Androïd

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse
Caniuse
Caniuse

Historique des pseudo-classe ciblant les pages imprimées.

Voir aussi...

Les pseudo-classes :first, :left, :right et :blank font partie du module "module CSS - Media paginé" (CSS Paged Media Module).
Les définitions suivantes sont également décrites dans ce même module.

    :left
    Pseudo-classe désignant les pages de gauche (pages paires).
    :right
    Pseudo-classe désignant les pages de droite (pages impaires).
    @page
    Cette directive est un sélecteur qui cible les pages imprimées.