<tr><td>E[foo="bar"]</td><td>tout élément E portant l'attribut "foo" et dont la valeur de cet attribut est exactement "bar"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
<tr><td>E[foo~="bar"]</td><td>tout élément E dont l'attribut "foo" contient une liste de valeurs séparées par des espaces, l'une de ces valeurs étant exactement égale à "bar"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
<tr><td>E[foo^="bar"]</td><td>tout élément E dont la valeur de l'attribut "foo" commence exactement par la chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr>
<tr><td>E[foo$="bar"]</td><td>tout élément E dont la valeur de l'attribut "foo" finit exactement par la chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr>
<tr><td>E[foo*="bar"]</td><td>tout élément E dont la valeur de l'attribut "foo" contient la sous-chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr>
<tr><td>E[lang|="en"]</td><td>tout élément E dont l'attribut "lang" est une liste de valeurs séparées par des tirets et commençant (à gauche) par "en"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
<tr><td>E:nth-child(n)</td><td>un élément E qui est le n-ième enfant de son parent</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:nth-last-child(n)</td><td>un élément E qui est le n-ième enfant de son parent en comptant depuis le dernier enfant</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:nth-of-type(n)</td><td>un élément E qui est le n-ième enfant de son parent et de ce type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:nth-last-of-type(n)</td><td>un élément E qui est le n-ième enfant de son parent et de ce type en comptant depuis le dernier enfant</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:empty</td><td>un élément E qui n'a aucun enfant (y compris noeuds textuels purs)</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:link E:visited</td><td>un élément E qui est la source d'un hyperlien dont la cible n'a pas encore été visitée (:link) ou a déjà été visitée (:visited)</td><td>Les pseudo-classes de lien</td><td>1</td></tr>
<tr><td>E:active E:hover E:focus</td><td>un élément E pendant certaines actions de l'usager</td><td>Les pseudo-classes d'action Usager </td><td>1 and 2</td></tr>
<tr><td>E:target</td><td>un élément E qui est la cible de l'URL d'origine contenant lui-même un fragment identifiant.</td><td>La pseudo-classe :target</td><td>3</td></tr>
<tr><td>E:lang(c)</td><td>un élément E dont le langage (humain) est c (le langage du document spécifie comment le langage humain est déterminé)</td><td>La pseudo-classe :lang() </td><td>2</td></tr>
<tr><td>E:enabled E:disabled</td><td>un élément d'interface utilisateur E qui est actif ou inactif.</td><td>Les pseudo-classes d'état d'élément d'interface</td><td>3</td></tr>
<tr><td>E:checked E:indeterminate</td><td>un élément d'interface utilisateur E qui est coché ou dont l'état est indéterminé (par exemple un bouton-radio ou une case à cocher)</td><td>Les pseudo-classes d'état d'élément d'interface</td><td>3</td></tr>
<tr><td>E:contains("foo")</td><td>un élément E dont le contenu textuel concaténé contient la sous-chaîne "foo"</td><td>La pseudo-classe de contenu</td><td>3</td></tr>
<tr><td>E::first-line</td><td>la première ligne formatée d'un élément E</td><td>The :first-line pseudo-element</td><td>1</td></tr>
<tr><td>E::first-letter</td><td>le premier caractère formaté d'un élément E</td><td>Le pseudo-élément ::first-letter </td><td>1</td></tr>
<tr><td>E::selection</td><td>la partie d'un élément E qui est actuellement sélectionnée/mise en exergue par l'usager</td><td>Les pseudo-éléments fragments d'éléments d'interface</td><td>3</td></tr>
<tr><td>E::before</td><td>le contenu généré avant un élément E</td><td>Le pseudo-élément ::before </td><td>2</td></tr>
<tr><td>E::after</td><td>le contenu généré après un élément E</td><td>Le pseudo-élément ::after </td><td>2</td></tr>
<p>Dans cette page, avant l’action de FreeDatas2HTML, toutes les données sont affichées, sans proposer ni filtre, ni pagination.</p>
<p>C’est un cas d’usage possible de FreeDatas2HTML: vous listez des données dans une page via votre code backend (PHP, Python, node.js…). Vous souhaitez proposer à vos utilisateurs de <b>passer de pages en pages, d’effectuer des recherches… tout cela sans avoir à appeler de nouveau votre backend</b>. Le résultat est plus fluide et cela économise les ressources de votre serveur, <b>tout se faisant dans le navigateur</b> de l’utilisateur.</p>
<p>Il est aussi possible d’adapter le rendu à la taille de l’écran de votre utilisateur. C’est le cas dans cette page où les données ne sont pas réaffichées sous forme de tableau si l’écran est large de moins 800 px. Si vous visionnez cette page sur un grand écran, vous pouvez simuler cet affichage en faisant «Ctrl+Maj+M», puis «F5».</p>
<p>Dans l’autre sens, il pouvez aussi <b>parser des données listées autrement que dans un tableau HTML</b>, du moment qu’il reste possible de cibler séparément le nom des champs et la liste des enregistrements via des sélecteurs CSS. Dans ce but, les sélecteurs listés ci-dessous, venant du <ahref="https://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html#selectors"target="_blank"rel="noopener">site du W3C</a> pourront vous être utiles!</p>
<p>Cet exemple montre aussi que <b>les données peuvent être affichées dans un ordre différent de celui de la source de données</b>, le champ «Version CSS» y étant en dernière colonne. De même, il est tout à fait possible ne pas afficher tous les champs fournis par la source de données.</p>
<p><ahref="https://forge.chapril.org/Fab_Blab/FreeDatas2HTML/src/branch/master/src/demo/exampleWithHTML.ts"target="_blank"title="accéder au code"rel="noopener"class="paper-btn btn-secondary">Code source utilisé par cette page.</a></p>
