recursal/MDN huggingface dataset:
:first-child
============

La pseudo-classe **`:first-child`** permet de cibler un élément qui est le premier élément fils par rapport à son élément parent.


```css
/\* Cible n'importe quel élément <p> qui est \*/
/\* le premier fils de son élément parent \*/
p:first-child {
  color: lime;
  background-color: black;
}
```


**Note :** Tel que défini initialement, il était nécessaire que l'élément sélectionné ait un élément parent. À partir de la spécification de niveau 4 pour les sélecteurs, cela n'est plus obligatoire.

Syntaxe
-------

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

### Premier exemple

#### CSS


```css
p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
```


#### HTML


```html
<div>
  <p>
    Ce paragraphe est mis en forme car c'est un élément p ET que c'est le
    premier fils de l'élément div.
  </p>
  <p>
    En revanche, ce paragraphe n'est pas mis en forme car ce n'est pas le
    premier !
  </p>
</div>

<div>
  <h2>Ce titre h2 n'est pas mis en forme car ce n'est pas un paragraphe.</h2>
  <p>
    Et ce paragraphe n'est pas mis en forme car ce n'est pas le premier fils !
  </p>
</div>
```


#### Résultat

### Utiliser les listes non ordonnées

#### CSS


```css
li {
  color: blue;
}

li:first-child {
  color: green;
}
```


#### HTML


```html
<ul>
  <li>Élément 1 de la liste</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
</ul>
```


#### Résultat

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

| Specification |
| --- |
| Selectors Level 4 # first-child-pseudo |

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

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

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

* `:last-child`
* `:nth-child()`
* `:last-of-type`
* `:-moz-first-node` 
Non-standard
scroll-padding-left
===================

La propriété **`scroll-padding-left`** est une propriété qui permet de définir le remplissage sur le côté gauche 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-left: auto;

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

/\* Valeurs globales \*/
scroll-padding-left: inherit;
scroll-padding-left: initial;
scroll-padding-left: 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-left =   
  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.
-moz-orient
===========

**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 propriété **`-moz-orient`** définit l'orientation de l'élément sur lequel elle est appliquée.

Syntaxe
-------

La propriété `moz-orient` est définie avec un mot-clé parmi ceux de la liste ci-après.

### Valeurs

`inline`

L'élément est affiché dans la même direction que l'axe du texte : il est horizontal si le mode d'écriture est horizontal et vertical pour un mode d'écriture vertical.

`block`

L'élément est affiché dans la direction perpendiculaire à l'axe du texte : il est vertical si le mode d'écriture est horizontal et horizontal pour un mode d'écriture vertical.

`horizontal`

L'élément est affiché horizontalement.

`vertical`

L'élément est affiché verticalement.

### Syntaxe formelle

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

### HTML


```html
<p>
  La barre de progression suivante est horizontale (le comportement par défaut)
  :
</p>
<progress max="100" value="75"></progress>

<p>La barre de progression suivante est verticale :</p>
<progress class="vert" max="100" value="75"></progress>
```

### CSS


```css
.vert {
  -moz-orient: vertical;
  width: 16px;
  height: 150px;
}
```

### Résultat

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

Bien que proposée au W3C, cette propriété ne fait partie d'aucune spécification standard. C'est donc une propriété propriétaire liée à Mozilla/Gecko.

|  |  |
| --- | --- |
| Valeur initiale | `inline` |
| Applicabilité | n'importe quel élément, aura un effet sur `progress` et `meter`, mais pas sur <input type="range"> ou les autres éléments |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

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

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

* `box-orient`
tab-size
========

**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é **`tab-size`** permet d'adapter la largeur utilisée pour représenter le caractère de tabulation (`U+0009`).


```css
/\* Valeurs entières \*/
/\* Type <integer> \*/
tab-size: 4;
tab-size: 0;

/\* Valeurs de longueurs \*/
/\* Type <length> \*/
tab-size: 10px;
tab-size: 2em;

/\* Valeurs globales \*/
tab-size: inherit;
tab-size: initial;
tab-size: unset;
```


|  |  |
| --- | --- |
| Valeur initiale | `8` |
| Applicabilité | conteneurs de type bloc |
| Héritée | oui |
| Valeur calculée | l'entier spécifié ou une longueur absolue |
| Type d'animation | une longueur |

Syntaxe
-------

### Valeurs

`<integer>`

Le nombre d'espaces qu'occupe une tabulation. La valeur doit être positive.

`<length>`

La largeur de la tabulation. La valeur doit être positive.

### Syntaxe formelle
```

tab-size =   
  <number [0,∞]>  |  
  <length [0,∞]>    
  
```

Exemples
--------

### HTML


```html
<pre class="exemple">
    print "tabulation avant"
    print "4 espaces avant"
  print "2 espaces avant"
</pre>
```

### CSS


```css
.exemple {
  tab-size: 5;
}
```

### Résultat

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

| Specification |
| --- |
| CSS Text Module Level 3 # tab-size-property |

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

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

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

* Contrôler la taille du caractère de tabulation (U+0009), un e-mail d'Anne van Kesteren pour le CSSWG afin de proposer la standardisation de cette propriété (en anglais).
margin-bottom
=============

La propriété **`margin-bottom`** définit la marge basse appliquée à un élément. On peut définir une marge négative qui rapprochera l'élément de ses voisins ou une marge positive qui l'en écartera..

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

Cette propriété n'a aucun effet sur les éléments en ligne (*inline*) qui ne sont pas remplacés comme `<tt>` ou `<span>`.

Syntaxe
-------


```css
/\* Valeurs de longueur \*/
/\* Type <length> \*/
margin-bottom: 10px; /\* Une longueur absolue \*/
margin-bottom: 1em; /\* Une longueur relative à la taille du texte \*/
margin-bottom: 5%; /\* Une longueur relative à la
 largeur du bloc englobant \*/

/\* Valeurs avec un mot-clé \*/
margin-bottom: auto;

/\* Valeurs globales\*/
margin-bottom: inherit;
margin-bottom: initial;
margin-bottom: unset;
```


La valeur de cette propriété peut être le mot-clé `auto`, une longueur (`<length>`) ou un pourcentage (`<percentage>`). Cette valeur peut être nulle, positive ou négative.

### Valeurs

`<length>`

Cette valeur définit une largeur fixée. Pour les valeurs qui peuvent être utilisées, voir la page sur le type `<length>`.

`<percentage>`

Une valeur en pourcentage (type `<percentage>` qui est relative à la **largeur** du bloc englobant.

`auto`

Voir `margin`.

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

|  |  |
| --- | --- |
| Valeur initiale | `0` |
| Applicabilité | tous les éléments exceptés ceux dont les types `display` pour les tableaux ne sont pas `table-caption`, `table` et `inline-table`. S'applique aussi à `::first-letter`. |
| Héritée | non |
| Pourcentages | se rapporte à la largeur du bloc contenant |
| Valeur calculée | le pourcentage tel que spécifié ou une longueur absolue |
| Type d'animation | une longueur |

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

margin-bottom =   
  <length-percentage>  |  
  auto                   
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemples
--------

### CSS

Grâce à la feuille de style on définit la marge basse et la hauteur des différentes `div` :


```css
.box0 {
  margin-bottom: 1em;
  height: 3em;
}
.box1 {
  margin-bottom: -1.5em;
  height: 4em;
}
.box2 {
  border: 1px dashed black;
  border-width: 1px 0;
  margin-bottom: 2em;
}
```


On ajoute quelques règles afin de mieux visualiser les effets obtenus :


```css
.container {
  background-color: orange;
  width: 320px;
  border: 1px solid black;
}
div {
  width: 320px;
  background-color: gold;
}
```

### HTML


```html
<div class="container">
  <div class="box0">Boîte 0</div>
  <div class="box1">Boîte 1</div>
  <div class="box2">La marge négative de 1 m'attire vers le haut</div>
</div>
```

### Résultat

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

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin-physical |

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

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

**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 propriété non-standard **`zoom`** permet de manipuler l'effet d'agrandissement d'un élément. Plutôt que cette propriété non-standard, mieux vaudra utiliser les transformations CSS, si possible. Cependant, contrairement aux transformations CSS, `zoom` affecte la taille de l'élément.

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
zoom: normal;
zoom: reset;

/\* VAleurs exprimées en pourcents \*/
/\* Type <percentage> \*/
zoom: 50%;
zoom: 200%;

/\* Valeurs numériques \*/
/\* Type <number> \*/
zoom: 1.1;
zoom: 0.7;

/\* Valeurs globales \*/
zoom: inherit;
zoom: initial;
zoom: unset;
```

### Valeurs

`normal`

L'élément est affiché avec sa taille normale.

`reset` 
Non-standard

Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing

`Ctrl`

-

`-`

ou

`Ctrl`

+

`+`

) to the document. Only supported by WebKit (and possibly Blink).

`<percentage>`

Le facteur de zoom à appliquer. `100%` est équivalent au mot-clé `normal`. Les valeurs supérieures à `100%` agrandissent l'élément et les valeurs inférieures le réduisent.

`<number>`

Le facteur de zoom à appliquer. La valeur fonctionne de la même façon que les pourcentages : `1.0` correspond à `normal` (ou `100%`) , les valeurs supérieures à `1.0` agrandissent l'élément et les valeurs inférieures le réduisent.

### Syntaxe formelle

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

### CSS


```css
p.petit {
  zoom: 75%;
}
p.normal {
  zoom: normal;
}
p.gros {
  zoom: 2.5;
}
p {
  display: inline-block;
}
p:hover {
  zoom: reset;
}
```

### HTML


```html
<p class="petit">Petit</p>
<p class="normal">Normal</p>
<p class="gros">Gros</p>
```

### Résultat

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

Cette propriété n'est pas standard et est née avec Internet Explorer. Apple la décrit dans la référence CSS pour Safari. Rossen Atanassov, de Microsoft, a dressé un brouillon de spécification sur GitHub

|  |  |
| --- | --- |
| Valeur initiale | `normal` |
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | un entier |

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

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

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

* L'article de CSS-Tricks sur `zoom`
* bug Firefox 390936 à propos de l'implémentation de la propriété dans Firefox
background-clip
===============

La propriété **`background-clip`** définit la façon dont l'arrière-plan d'un élément (que ce soit l'image ou la couleur) s'étend sous la boîte de bordure, la boîte de remplissage (*padding*) ou la boîte de contenu.

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

Si aucune image (`background-image`) ni couleur (`background-color`) d'arrière-plan n'est définie, cette propriété aura uniquement un effet visuel lorsque la bordure possède des régions transparentes (via `border-style` ou `border-image`). Dans les autres cas, la bordure recouvrira la zone où se situera la différence .

Syntaxe
-------


```css
/\* Valeurs utilisant un mot-clé \*/
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/\* Valeurs globales \*/
background-clip: inherit;
background-clip: initial;
background-clip: unset;
```

### Valeurs

`border-box`

L'arrière-plan s'étend jusqu'à la limite externe de la bordure. L'arrière-plan sera situé sous la bordure en termes d'ordre z.

`padding-box`

Aucun arrière-plan n'est dessiné dans la boîte de bordure. L'arrière-plan s'étend jusqu'à la limite de la boîte de remplissage (*padding*).

`content-box`

L'arrière-plan est limité (rogné) à la boîte de contenu.

`text` 
Expérimental

L'arrière-plan est limité (rogné) au texte en premier plan.

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

|  |  |
| --- | --- |
| Valeur initiale | `border-box` |
| Applicabilité | tous les éléments. S'applique aussi à `::first-letter` et `::first-line`. |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | une liste répétable |

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

background-clip =   
  <visual-box>#    
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
```

Exemples
--------

### CSS


```css
p {
  border: 10px navy;
  border-style: dotted double;
  margin: 1em;
  padding: 2em;
  background: #f8d575;
  font: 900 1.2em sans-serif;
  text-decoration: underline;
}

.border-box {
  background-clip: border-box;
}

.padding-box {
  background-clip: padding-box;
}

.content-box {
  background-clip: content-box;
}

.text {
  background-clip: text;
  color: rgba(0, 0, 0, 0.2);
}
```

### HTML


```html
<p class="border-box">L'arrière-plan s'étend sous la bordure.</p>
<p class="padding-box">L'arrière-plan s'étend jusqu'avant la bordure.</p>
<p class="content-box">L'arrière-plan s'arrête à la boîte de contenu.</p>
<p class="text">L'arrière-plan se limite au texte au premier-plan.</p>
```

### Résultat

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # background-clip |

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

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

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

* `clip-path`
* Les propriétés relatives à l'arrière-plan :
    + `background`
    + `background-color`
    + `background-image`
    + `background-origin`
* Le modèle de boîtes CSS
min-inline-size
===============

**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é **`min-inline-size`** définit la taille minimale horizontale ou verticale d'un élément en ligne (*inline*) selon le mode d'écriture utilisé. Cette propriété « logique » correspond à la propriété `min-width` ou `min-height` selon la valeur utilisée pour `writing-mode`.

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

Si le mode d'écriture est orienté verticalement, `min-inline-size` fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément. to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété `min-block-size` peut être utilisée pour les blocs.

Syntaxe
-------


```css
/\* Valeurs de longueur \*/
/\* Type <length> \*/
min-inline-size: 100px;
min-inline-size: 5em;

/\* Valeurs proportionnelles à la \*/
/\* largeur du bloc englobant \*/
/\* Type <percentage> \*/
min-inline-size: 10%;

/\* Valeurs avec un mot-clé \*/
min-inline-size: max-content;
min-inline-size: min-content;
min-inline-size: fit-content;
min-inline-size: fill-available;

/\* Valeurs globales \*/
min-inline-size: inherit;
min-inline-size: initial;
min-inline-size: unset;
```

### Valeurs

La propriété `min-inline-size` peut prendre les mêmes valeurs que les propriétés `min-width` ou `min-height`.

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

|  |  |
| --- | --- |
| Valeur initiale | `0` |
| Applicabilité | identique à `width` et à `height` |
| Héritée | non |
| Pourcentages | la taille en ligne du bloc englobant |
| Valeur calculée | identique à `min-width` et à `min-height` |
| Type d'animation | une longueur, pourcentage ou calc() ; |

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

min-inline-size =   
  <'min-width'>    
  
```

Exemples
--------

### CSS


```css
.exemple {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 5%;
  min-inline-size: 200px;
}
```

### HTML


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

### Résultat

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-min-inline-size |
| CSS Box Sizing Module Level 4 # sizing-values |

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 correspondantes
    + `min-width`
    + `min-height`
* `writing-mode`
:active
=======

La pseudo-classe **`:active`** permet de cibler un élément lorsque celui-ci est activé par l'utilisateur. Elle permet de fournir un *feedback* indiquant que l'activation a bien été détectée par le navigateur. Lorsqu'on a une interaction avec un pointeur, il s'agit généralement du moment entre l'appui sur le pointeur et le relâchement de celui-ci.


```css
/\* ne cible <a> que lorsqu'il est activé \*/
/\* par exemple quand on clique dessus \*/
a:active {
  color: red;
}
```


La pseudo-classe `:active` est également activée lorsque l'utilisateur emploie la touche de tabulation. Elle est souvent utilisée sur les éléments HTML `<a>` et `<button>` mais n'est pas restreinte à ceux-ci. Les éléments ciblés par cette pseudo-classe incluent les éléments qui contiennent l'élément activé et les éléments de formulaires activés via leur élément `<label>` associé.

La mise en forme associée peut être surchargée par les autres pseudo-classes pour les liens : `:link`, `:hover` et `:visited` lorsqu'elles sont utilisées dans des règles qui suivent. Afin de mettre en forme les liens de façon correcte, la règle avec `:active` doit être écrite après les autres : `:link` — `:visited` — `:hover` — `:active`.

**Note :** Pour les systèmes qui utilisent une souris avec plusieurs boutons, CSS 3 spécifie que la pseudo-classe `:active` ne doit s'appliquer qu'au bouton principal. Pour les souris de droitiers, c'est généralement le bouton le plus à gauche.

Syntaxe
-------

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

### Liens actifs

#### CSS


```css
a:link {
  color: blue;
} /\* Liens non visités \*/
a:visited {
  color: purple;
} /\* Liens visités \*/
a:hover {
  background: yellow;
} /\* Liens survolés \*/
a:active {
  color: red;
} /\* Liens actifs \*/

p:active {
  background: #eee;
} /\* Paragraphes actifs \*/
```


#### HTML


```html
<p>
  Ce paragraphe contient un lien :
  <a href="#">Ce lien devient rouge quand vous cliquez dessus.</a>
  Le paragraphe sera sur un fond gris quand vous cliquerez dessus ou sur le
  lien.
</p>
```


#### Résultat

### Éléments de formulaire actifs

#### CSS


```css
form :active {
  color: red;
}

form button {
  background: white;
}
```


#### HTML


```html
<form>
  <label for="mon-button">Un bouton :</label>
  <button id="mon-button" type="button">
    Cliquez sur moi ou sur mon libellé !
  </button>
</form>
```


#### Résultat

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

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

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

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

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

* `:link`
* `:visited`
* `:hover`