recursal/MDN huggingface dataset:
:link
=====

La pseudo-classe **`:link`** permet de sélectionner les liens à l'intérieur d'éléments. Elle sélectionnera tout lien n'ayant pas été visité, même ceux qui seraient déjà mis en forme via des sélecteurs utilisant d'autres pseudo-classes comme `:hover`, `:active` ou `:visited`.


```css
/\* Cible les liens qui n'ont pas encore \*/
/\* été visités \*/
a:link {
  color: red;
}
```


Afin que la mise en forme s'applique au mieux, la règle `:link` doit être placée avant les autres : `:link` — `:visited` — `:hover` — `:active`. La pseudo-classe `:focus` est habituellement placée juste avant ou juste après `:hover`, en fonction de l'effet désiré.

**Note :** On utilisera `:any-link` pour sélectionner un élément qu'il ait été visité ou non.

Syntaxe
-------

Error: could not find syntax for this itemExemples
--------

### CSS


```css
a:link {
  color: red;
}

.external:link {
  background-color: lightblue;
}
```

### HTML


```html
<p>
  Et si on allait voir
  <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/">
    un peu de JavaScript ?
  </a>
</p>
<p>
  Sinon, on peut continuer à se cultiver sur CSS autre part
  <a class="external" href="https://css-tricks.com/"> comme CSS Tricks. </a>
</p>
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # selector-link |
| Selectors Level 4 # link |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `:link`
* `:visited`
* `:hover`
* `:active`.
scroll-padding-top
==================

La propriété **`scroll-padding-top`** est une propriété qui permet de définir le remplissage sur le côté haut entre l'élément et la zone de défilement.

Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (*scrollport*). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.

Exemple interactif
------------------

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
scroll-padding-top: auto;

/\* Valeurs de longueur \*/
/\* Type <length> \*/
scroll-padding-top: 10px;
scroll-padding-top: 1em;
scroll-padding-top: 10%;

/\* Valeurs globales \*/
scroll-padding-top: inherit;
scroll-padding-top: initial;
scroll-padding-top: unset;
```

### Valeurs

`<length-percentage>`

Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.

`auto`

Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à `0px` mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | conteneurs d'ascenseurs |
| Héritée | non |
| Pourcentages | relative to the scroll container's scrollport |
| Valeur calculée | comme spécifié |
| Type d'animation | by computed value type |

Syntaxe formelle
----------------
```

scroll-padding-top =   
  auto                       |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Spécifications
--------------

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-physical |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
:fullscreen
===========

La pseudo-classe **`:fullscreen`** permet de cibler tout élément qui est en mode plein écran. Si plusieurs éléments ont été mis en plein écran, tous ces éléments seront ciblés.

Syntaxe
-------

Error: could not find syntax for this itemNotes d'utilisation
-------------------

La pseudo-classe `:fullscreen` permet de configurer la taille, le style ou la disposition du contenu lorsque les éléments passent de l'état plein écran à l'état normal et vice versa.

Exemples
--------

Dans cet exemple, on change la couleur d'un bouton selon que le document est en plein écran ou non. On n'utilise pas JavaScript pour changer les styles.

### CSS

On utilise deux règles. La première qui permet de définir la couleur d'arrière plan pour le bouton « Passer en mode plein écran » lorsque l'élément n'est pas en plein écran. Pour distinguer ce cas, on utilise `:not(:fullscreen)`, qui permet de cibler les éléments qui n'ont pas la pseudo-classe `:fullscreen`.


```css
#fs-toggle:not(:fullscreen) {
  background-color: #afa;
}
```


Lorsque le document est en mode plein écran, on utilise cette fois-ci la pseudo-classe `:fullscreen` et on définit une autre couleur (ici un rouge pâle).


```css
#fs-toggle:fullscreen {
  background-color: #faa;
}
```

### HTML


```html
<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>

<p>
  This demo uses the <code>:fullscreen</code> pseudo-class to automatically
  change the style of a button used to toggle full-screen mode on and off,
  entirely using CSS.
</p>

<button id="fs-toggle">Toggle Fullscreen</button>
```


Dans ce fragment de code HTML, c'est l'élément `<button>` avec l'identifiant `"fs-toggle"` qui changera d'une couleur à une autre selon que le document est en plein écran ou non.

Spécifications
--------------

| Specification |
| --- |
| Fullscreen API Standard # :fullscreen-pseudo-class |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'API Fullscreen
* Le guide de l'API Fullscreen (en-US)
* `::backdrop`
* Les API DOM :
    + `Element.requestFullscreen()`,
    + `Document.exitFullscreen()`,
    + `Document.fullscreenElement` (en-US)
* L'attribut `allowfullscreen`
:dir()
======

La pseudo-classe CSS **`:dir()`** permet de cibler un élément selon la direction du texte qu'il contient.


```css
/\* Cible le contenu avec du texte \*/
/\* écrit de droite à gauche \*/
:dir(rtl) {
  background-color: red;
}
```


`:dir()` ne prend en compte que la valeur *sémantique* de la direction, celle qui est définie par le document (la plupart du temps un document HTML). Elle ne tiendra pas compte de la direction liée à la mise en forme, purement stylistique, modifiée par des propriétés telles que `direction`.

**Note :** La pseudo-classe `:dir()` ne fonctionne pas de la même façon que le sélecteur d'attribut `[dir=…]`. Ce dernier utilise la valeur de l'attribut `dir` et il n'y a aucune correspondance lorsque l'attribut n'est pas défini (même si l'élément HTML hérite de la valeur de son élément parent). De la même façon `[dir=rtl]` ou `[dir=ltr]` ne pourront pas correspondre à la valeur `auto` qui peut être utilisée sur l'attribut `dir`. Au contraire, `:dir()` calculera la correspondance en fonction de la valeur utilisée par l'agent utilisateur (qu'elle soit héritée ou qu'elle vaille `auto`).

**Note :** En HTML, la direction est définie grâce à l'attribut `dir`. Pour les autres types de document, cela peut être déterminé autrement.

Syntaxe
-------

La pseudo-classe `:dir()` nécessite un paramètre qui indique la direction du texte qu'on souhaite cibler.


```css
:dir([ltr | rtl]) {
  /\* ... \*/
}
```

### Paramètres

`ltr`

Cible les éléments écrits de gauche à droite.

`rtl`

Cible les éléments écrits de droite à gauche.

Exemples
--------

### HTML


```html
<div dir="rtl">
  <span>test1</span>
  <div dir="ltr">
    test2
    <div dir="auto">עִבְרִית</div>
  </div>
</div>
```

### CSS


```css
:dir(ltr) {
  background-color: yellow;
}

:dir(rtl) {
  background-color: powderblue;
}
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # selector-ltr |
| Selectors Level 4 # the-dir-pseudo |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* La pseudo-classe relative à la langue : `:lang`
* L'attribut HTML `lang`
* L'attribut HTML `translate`
:-moz-drag-over
===============

**Non standard:** Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

La pseudo-classe **`:-moz-drag-over`** permet de mettre en forme un élément lorsqu'un événement `drag-over` est appelé dessus.

Syntaxe
-------
```

element:-moz-drag-over { propriétés de mise en forme }
```

Exemples
--------

### CSS


```css
td:-moz-drag-over {
  color: red;
}
```

### HTML


```html
<table border="1">
  <tr>
    <td width="100px" height="100px">Drag Over</td>
  </tr>
</table>
```

### Résultat

Spécifications
--------------

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.
::spelling-error
================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Le pseudo-élément **`::spelling-error`** représente une portion de texte que le navigateur signale comme étant mal orthographiée.


```css
::spelling-error {
  color: red;
}
```

Propriétés autoriséees
----------------------

Seul un sous-ensemble restreint de propriétés CSS peut être utilisé dans une règle dont le sélecteur contient `::spelling-error` :

* `color`,
* `background-color`,
* `cursor`,
* `caret-color`
* `outline` et les propriétés détaillées correspondantes,
* `text-decoration` et les propriétés détaillées correspondantes.
* `text-emphasis-color`,
* `text-shadow`
Syntaxe
-------


```css
::spelling-error {
}
```

Exemples
--------

### CSS


```css
p::spelling-error {
  color: red;
}
```

### HTML


```html
<p>Alice devina tout de suite qu’il cherch l’éventail et la paire de gants.</p>
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-spelling-error |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `::grammar-error`
page-break-after
================

**Attention :** Cette propriété a été remplacée par la propriété `break-after`.

La propriété CSS **`page-break-after`** permet d'ajuster les sauts de page placés *après* l'élément courant.


```css
/\* Valeurs avec un mot-clé \*/
page-break-after: auto;
page-break-after: always;
page-break-after: avoid;
page-break-after: left;
page-break-after: right;
page-break-after: recto;
page-break-after: verso;

/\* Valeurs globales \*/
page-break-after: inherit;
page-break-after: initial;
page-break-after: unset;
```


Cette propriété s'applique aux éléments de blocs qui génèrent une boîte. Elle ne s'appliquera pas à un `<div>` qui ne génère pas de boîte.

Synonymes avec `break-after`
----------------------------

La propriété `page-break-after` est désormais remplacée par `break-after`.

Si pour des raisons de compatibilité, on doit traiter `page-break-after` comme synonyme, on pourra utiliser le tableau de correspondance des valeurs suivant :

| `page-break-after` | `break-after` |
| --- | --- |
| `auto` | `auto` |
| `left` | `left` |
| `right` | `right` |
| `avoid` | `avoid` |
| `always` | `page` |

Syntaxe
-------

### Valeurs

`auto`

Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).

`always`

Le saut de page est toujours forcé après l'élément.

`avoid`

Les sauts de page sont évités après l'élément.

`left`

Le saut de page est forcé après l'élément afin que la prochaine page soit mise en forme comme une page gauche.

`right`

Le saut de page est forcé après l'élément afin que la prochaine page soit mise en forme comme une page droite.

`recto` 
Expérimental

Si la page progresse de gauche à droite, cette valeur est équivalente à `right`. Si la page progresse de droite à gauche, elle est synonyme de `left`.

`verso` 
Expérimental

Si la page progresse de gauche à droite, cette valeur est équivalente à `left`. Si la page progresse de droite à gauche, elle est synonyme de `right`.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | les éléments de bloc dans le flux normal de l'élément racine. Les agents utilisateurs peuvent également l'appliquer sur d'autres éléments comme `table-row`. |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

Syntaxe formelle
----------------
```

page-break-after =   
  auto     |  
  always   |  
  avoid    |  
  left     |  
  right    |  
  inherit    
  
```

Exemples
--------


```css
/\* On force une nouvelle page à la suite \*/
/\* d'une note en bas de page \*/
div.footnotes {
  page-break-after: always;
}
```

Spécifications
--------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # page |
| CSS Paged Media Module Level 3 # page-break-after |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `break-before`
* `break-after`
* `break-inside`
* `page-break-before`
* `page-break-inside`
* `orphans`
* `widows`
text-decoration-thickness
=========================

La propriété CSS **`text-decoration-thickness`** définit l'épaisseur ou la largeur de la ligne de décoration utilisée sur le texte d'un élément (la ligne qui raye, souligne ou surligne le texte).

Syntaxe
-------


```css
/\* Un seul mot-clé\*/
text-decoration-thickness: auto;
text-decoration-thickness: from-font;

/\* Une valeur de longueur \*/
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;

/\* Valeurs globales \*/
text-decoration-thickness: inherit;
text-decoration-thickness: initial;
text-decoration-thickness: unset;
```

### Valeurs

`auto`

Le navigateur choisit l'épaisseur pour la ligne de décoration.

`from-font`

Si le fichier de la police indique une épaisseur préférée, c'est cette valeur qui est utilisée. Si le fichier ne contient pas cette information, cette valeur est synonyme de `auto`.

`<length>`

Specifies the thickness of text decoration line as a `<length>`, overriding the font file suggestion or the browser default.

### Syntaxe formelle
```

text-decoration-thickness =   
  auto                 |  
  from-font            |  
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemples
--------

### HTML


```html
<p class="longhand">Voici du texte avec un soulignement rouge de 2px.</p>
<p class="under-and-over">Celui est souligné et surligné.</p>
<p class="shorthand">
  Ce texte sera souligné avec une ligne bleue de 1px si la formulation
  raccourcie est prise en charge.
</p>
```

### CSS


```css
.longhand {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 2px;
}

.under-and-over {
  text-decoration-line: underline overline;
  text-decoration-style: solid;
  text-decoration-color: orange;
  text-decoration-thickness: 0.2rem;
}

.shorthand {
  text-decoration: underline solid blue 1px;
}
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # text-decoration-width-property |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `text-decoration`
* `text-underline-offset`
:blank
======

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

**Note :** Le sélecteur `:blank` est une fonctionnalité considérée risquée car en cours de modification par le CSSWG. Voir l'*issue* n°1967 à ce propos.

La pseudo-classe **`:blank`** permet de sélectionner les champs saissables par l'utilisateur et qui sont vides (par exemple des éléments `<input>` ou `<textarea>` où rien n'a encore été saisi).

Syntaxe
-------

Error: could not find syntax for this itemSpécifications
--------------

| Specification |
| --- |
| Selectors Level 4 # blank-pseudo |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `:empty`
Liste de sélecteurs
===================

**Une liste de sélecteurs** (`,`) permet de cibler tous les nœuds correspondants à l'une des conditions.


```css
/\* Cible tous les éléments correspondants \*/
span,
div {
  border: red 2px solid;
}
```


Afin de réduire la taille d'une feuille de style, on peut grouper les sélecteurs dans une liste séparée par des virgules.

Syntaxe
-------
```

element, element, element { propriétés de style }
```

Exemples
--------

### Groupement sur une seule ligne

On peut grouper les sélecteurs sur une seule ligne :


```css
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: helvetica;
}
```

### Groupement sur plusieurs lignes

On peut grouper les sélecteurs sur plusieurs lignes :


```css
#main,
.content,
article {
  font-size: 1.1em;
}
```

### Invalidation d'une liste de sélecteurs

Un inconvénient des listes de sélecteurs est la non-équivalence des deux blocs suivants :


```css
h1 {
  font-family: sans-serif;
}
h2:maybe-unsupported {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}
```



```css
h1,
h2:maybe-unsupported,
h3 {
  font-family: sans-serif;
}
```


En effet, un seul sélecteur vous manque et tout est dépeuplé. Enfin, un seul sélecteur invalide rend l'ensemble de la règle invalide.

Pour éviter cet effet indésirable, on pourra utiliser le sélecteur `:is()` qui ignore les sélecteurs invalides parmi ses arguments. Par contre, tous les sélecteurs passés en arguments auront la même spécificité.


```css
h1 {
  font-family: sans-serif;
}
h2:maybe-unsupported {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}
```



```css
:is(h1, h2:maybe-unsupported, h3) {
  font-family: sans-serif;
}
```

Spécifications
--------------

| Specification |
| --- |
| Selectors Level 4 # grouping |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Les pseudo-classes `:is()` 
Expérimental
 et `:where()` 
Expérimental
 qui n'ont pas ce problème historique d'invalidation des listes de sélecteurs.
<frequency-percentage>
======================

Le type de donnée **`<frequency-percentage>`** représente une valeur qui peut être une valeur de type `<frequency>` ou une valeur de type `<percentage>`.

Syntaxe
-------

Se référer à la documentation des types `<frequency>` et `<percentage>` pour plus de détails sur les syntaxes possibles avec chacun de ces types.

Utilisation avec `calc()`
-------------------------

Lorsqu'une valeur de type `<frequency-percentage>` peut être utilisée dans une déclaration, cela signifie que le pourcentage sera résolu comme une fréquence et qu'il peut alors être utilisé dans une expression `calc()`.

Spécifications
--------------

| Specification |
| --- |
| CSS Values and Units Module Level 4 # mixed-percentages |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
border-inline-color
===================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété **`border-inline-color`** définit la couleur de la bordure d'un élément sur les côtés de l'axe en ligne. Cette propriété correspondra à différentes propriétés physiques pour les couleurs de la bordure selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété logique peut correspondre à `border-top-color` et `border-bottom-color` ou à `border-right-color` et `border-left-color` selon les valeurs des propriétés `writing-mode`, `direction` et `text-orientation`.


```css
border-inline-color: yellow;
border-inline-color: #f5f6f7;
```


Pour définir la couleur de la bordure sur l'autre dimension, on pourra utiliser la propriété logique `border-block-color` qui définit `border-block-start-color` et `border-block-end-color`.

Syntaxe
-------

### Valeurs

`<'color'>`

La couleur de la bordure. Voir `color`.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | `currentcolor` |
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | couleur calculée |
| Type d'animation | by computed value type |

Syntaxe formelle
----------------
```

border-inline-color =   
  <'border-top-color'>{1,2}    
  
```

Exemples
--------

### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.texteExemple {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-inline-color: red;
}
```

### HTML


```html
<div>
  <p class="texteExemple">Texte d'exemple</p>
</div>
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-inline-color |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Les propriétés physiques qui peuvent correspondre à cette propriété :
    + `border-top-color`,
    + `border-right-color`,
    + `border-bottom-color`,
    + `border-left-color`.
* Les propriétés relatives aux propriétés logiques : `writing-mode`, `direction`, `text-orientation`
* bug Firefox 1297097