Explique une expression régulière
Cette application pédagogique explique un sélecteur CSS 3 indiqué dans la case de texte ci-dessous en détaillant les sujets qu’il désigne.
Rappel : En CSS une règle est une écriture du type « S { D } », où « S » est un sélecteur et « D » une succession de déclarations. Le sélecteur définit la liste des sujets à qui s’applique la règle. Ces sujets sont des éléments et pseudo-éléments. Les déclarations définissent la valeur de propiétés de cet élément.
Exemples élémentaires (CSS 1) :
E,
E F,
E.classe,
E:link,
E:visited,
ul li,
form.principal .expliquer,
h1, h2, h3,
ul.diapo ol li,
.item ul, ul ul, .sous-menu.
Exemples simples (CSS 2, CSS 1) :
*,
E:hover,
p.info.retrait-1re-ligne,
E > F,
section > header.
E:lang(L),
:lang(fr) > q,
#chap42.
Exemples avancés :
E#ident,
h1#chapter1, *#z98y, button.expliquer,
E:active,
E::first-letter.
E[abc],
E[abc="def"],
E + F,
h1 + [rel=up],
E:first-child,
E:focus.
E[abc^="def"],
E[abc*="def"],
E:nth-child(odd),
E:nth-child(3n+1),
E:nth-of-type(2),
E:empty,
E:active,
E:disabled,
E::before,
E ~ F,
E:not(.abc),
[name="bascule"]:checked + label,
#s71:not(aside),
a:link, p.citation:hover::before,
.a[b = c], c[d]:e:f(3n+2), g > h[i~="j"],
#abc svg|circle,
[xml|lang].
section:dir(rtl),
h1:not(main *),
button:is(:hover, :focus),
a:where(:not(:hover)).