:first
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis août 2023.
La pseudo-classe CSS :first, liée à la règle @ @page décrit la mise en forme de la première page lors de l'impression d'un document. ( voir :first-child pour le premier élément d'un noeud )
/* Cible le contenu de la première page */
/* lorsqu'on imprime */
@page :first {
margin-left: 50%;
margin-top: 50%;
}
Note :
Vous ne pouvez pas modifier toutes les propriétés CSS avec cette pseudo-classe. Vous pouvez uniquement modifier les marges, orphans, widows et les sauts de page du document. De plus, vous ne pouvez utiliser que des unités de longueur absolues pour définir les marges. Toutes les autres propriétés seront ignorées.
Syntaxe
:first {
/* ... */
}
Exemples
Utilisation de :first pour les styles d'impression de page
Appuyez sur le bouton « Imprimer ! » pour imprimer l'exemple. Les mots sur la première page doivent être quelque part autour du centre, tandis que les autres pages auront leur contenu à la position par défauts :
<p>Première page.</p>
<p>Deuxième page.</p>
<button>Imprimer !</button>
@page :first {
size: 8.5in 11in;
margin-left: 3in;
margin-top: 5in;
}
p {
page-break-after: always;
font: 1.2em sans-serif;
}
document.querySelector("button").addEventListener("click", () => {
window.print();
});
Spécifications
| Specification |
|---|
| CSS Paged Media Module Level 3 # first-pseudo |