{"id":1742,"date":"2011-12-20T08:59:47","date_gmt":"2011-12-20T07:59:47","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=1742"},"modified":"2015-01-18T16:19:18","modified_gmt":"2015-01-18T15:19:18","slug":"difference-entre-pseudo-element-et-pseudo-classe","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/difference-entre-pseudo-element-et-pseudo-classe","title":{"rendered":"Diff\u00e9rence entre pseudo-\u00e9l\u00e9ment et pseudo-classe"},"content":{"rendered":"<p>Petit sujet de vocabulaire aujourd&rsquo;hui pour soulever un probl\u00e8me de diff\u00e9renciation entre la pseudo-classe et le pseudo-\u00e9l\u00e9ment en CSS.<br \/>\nOn a souvent tendance \u00e0 confondre les deux en se disant que dans les deux cas on place un <strong><code>:<\/code><\/strong> (deux-points) devant.<br \/>\nConfusion justifi\u00e9e, voyons donc comment les distinguer.<!--more--><\/p>\n<p>Nous allons voir comment les distinguer sur la forme et sur le fond, pour cela essayons d\u00e9j\u00e0 de regrouper sur cette pages les pseudo-classes et pseudo-\u00e9l\u00e9ments existant (\u00e7a \u00e9volue, ils ne seront peut-\u00eatre pas tous), vous verrez peut-\u00eatre automatiquement comment les diff\u00e9rencier.<\/p>\n<h2>Les pseudo-classes en CSS2.1<\/h2>\n<p>Il en existe des tr\u00e8s connues, et des un peu moins, voici celles que j&rsquo;ai pu relever :<\/p>\n<ul>\n<li><strong><code>:link<\/code><\/strong>&nbsp;: cible les liens non visit\u00e9s&nbsp;;<\/li>\n<li><strong><code>:hover<\/code><\/strong>&nbsp;: cible un \u00e9l\u00e9ment point\u00e9 visuellement (survol\u00e9) gr\u00e2ce \u00e0 une souris par exemple&nbsp;;<\/li>\n<li><strong><code>:active<\/code><\/strong>&nbsp;: cible un \u00e9l\u00e9ment activ\u00e9 par l&rsquo;utilisateur, par exemple au moment du clic sur le bouton gauche de la souris. Intervient entre la pression sur le bouton et son relachement&nbsp;;<\/li>\n<li><strong><code>:focus<\/code><\/strong> : cible un \u00e9l\u00e9ment point\u00e9 physiquement, gr\u00e2ce \u00e0 la touche <kbd>tab<\/kbd> du clavier par exemple, ou apr\u00e8s le rel\u00e2chement du bouton gauche de la souris sur un \u00e9l\u00e9ment pouvant \u00eatre cibl\u00e9 de la sorte&nbsp;;<\/li>\n<li><strong><code>:visited<\/code><\/strong>&nbsp;: cible un lien d\u00e9j\u00e0 visit\u00e9 par l&rsquo;utilisateur&nbsp;;<\/li>\n<li><strong><code>:lang()<\/code><\/strong>&nbsp;: cible un \u00e9l\u00e9ment en fonction de sa langue (sp\u00e9cifi\u00e9 par l&rsquo;attribut <code>lang<\/code>)&nbsp;;<\/li>\n<li><strong><code>:first-child<\/code><\/strong>&nbsp;: cible le premier \u00e9l\u00e9ment enfant.<\/li>\n<\/ul>\n<p>Je ne parle ici que de s\u00e9lecteur CSS2.1.<\/p>\n<h2>Les pseudo-\u00e9l\u00e9ments en CSS2.1<\/h2>\n<p>Les pseudo-\u00e9l\u00e9ments sont assez peu connus finalement, et voici ce que nous propose CSS2.1.<\/p>\n<ul>\n<li><strong><code>:before<\/code><\/strong>&nbsp;: permet d&rsquo;ins\u00e9rer un contenu avant un \u00e9l\u00e9ment et de le styler \u00ab\u00a0\u00e0 la vol\u00e9e\u00a0\u00bb&nbsp;;<\/li>\n<li><strong><code>:after<\/code><\/strong>&nbsp;: permet d&rsquo;ins\u00e9rer un contenu apr\u00e8s un \u00e9l\u00e9ment et de le styler \u00ab\u00a0\u00e0 la vol\u00e9e\u00a0\u00bb&nbsp;;<\/li>\n<li><strong><code>:first-letter<\/code><\/strong>&nbsp;: permet de styler la premi\u00e8re lettre d&rsquo;un \u00e9l\u00e9ment&nbsp;;<\/li>\n<li><strong><code>:first-line<\/code><\/strong>&nbsp;: permet de styler la premi\u00e8re ligne d&rsquo;un bloc.<\/li>\n<\/ul>\n<h2>Comment les diff\u00e9rencier ?<\/h2>\n<p>Au d\u00e9but j&rsquo;avais un peu de mal, pour moi c&rsquo;\u00e9tait juste un \u00ab\u00a0pseudo-truc\u00a0\u00bb (pseudo toi-m\u00eame !), mais au final c&rsquo;est relativement simple \u00e0 distinguer \u00e0 force d&rsquo;utilisation.<\/p>\n<p>Une pseudo-classe est une mani\u00e8re de cibler un \u00e9l\u00e9ment sans ajouter une classe (manuellement ou par l&rsquo;interm\u00e9diaire de JavaScript).<br \/>\n<em>Exemple : \u00e0 la place de <code>:first-child<\/code>, on aurait simplement pu ajouter la classe <code>first<\/code> sur le premier \u00e9l\u00e9ment que l&rsquo;on souhaitait cibler.<\/em><\/p>\n<p>Un pseudo-\u00e9l\u00e9ment est une chose que l&rsquo;on n&rsquo;aurait pas pu cibler autrement qu&rsquo;en rajoutant un \u00e9l\u00e9ment.<br \/>\n<em>Exemple : \u00e0 la place de <code>:first-letter<\/code>, on aurait d\u00fb ajouter un \u00e9l\u00e9ment <code>span<\/code> sur la premi\u00e8re lettre de l&rsquo;\u00e9l\u00e9ment cibl\u00e9.<\/em><\/p>\n<h2>CSS3 \u00e0 la rescousse !<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2011\/12\/super-css3.png\" alt=\"\" title=\"\" width=\"174\" height=\"156\" class=\"alignright size-full wp-image-1753\" \/> CSS3 propose une nouvelle syntaxe pour les pseudo-\u00e9l\u00e9ments.<br \/>\nEn lieu est place du \u00ab\u00a0:\u00a0\u00bb il faudra \u00e9crire \u00ab\u00a0::\u00a0\u00bb (deux fois deux-points). La syntaxe d&rsquo;une pseudo-classe reste inchang\u00e9e.<br \/>\nPendant que je suis, pour ceux qui veulent aller plus loin sur CSS3, voici les nouveaut\u00e9s apport\u00e9es par cette mouture :<\/p>\n<h3>Pseudo-classes<\/h3>\n<p>Les nouvelles pseudo-classes en CSS3 :<\/p>\n<ul>\n<li><strong><code>:nth-child(N)<\/code><\/strong>&nbsp;: cible le N<sup>i\u00e8me<\/sup> \u00e9l\u00e9ment enfant&nbsp;;<\/li>\n<li><strong><code>:nth-last-child(N)<\/code><\/strong>&nbsp;: cible le N<sup>i\u00e8me<\/sup> dernier \u00e9l\u00e9ment enfant&nbsp;;<\/li>\n<li><strong><code>:nth-of-type(N)<\/code><\/strong>&nbsp;: cible le N<sup>i\u00e8me<\/sup> \u00e9l\u00e9ment d&rsquo;un type donn\u00e9&nbsp;;<\/li>\n<li><strong><code>:nth-last-of-type(N)<\/code><\/strong>&nbsp;: cible le N<sup>i\u00e8me<\/sup> dernier \u00e9l\u00e9ment d&rsquo;un type donn\u00e9&nbsp;;<\/li>\n<li><strong><code>:last-child<\/code><\/strong>&nbsp;: cible le dernier \u00e9l\u00e9ment enfant&nbsp;;<\/li>\n<li><strong><code>:first-of-type<\/code><\/strong>&nbsp;: cible le premier element d&rsquo;un type donn\u00e9 (\u00e9quivaut \u00e0 <code>nth-of-type(1)<\/code>)&nbsp;;<\/li>\n<li><strong><code>:last-of-type<\/code><\/strong>&nbsp;: cible le dernier element d&rsquo;un type donn\u00e9e (\u00e9quivaut \u00e0 <code>nth-last-of-type(1)<\/code>&nbsp;;<\/li>\n<li><strong><code>&#58;only-child<\/code><\/strong>&nbsp;: cible un \u00e9l\u00e9ment s&rsquo;il est l&rsquo;unique enfant&nbsp;;<\/li>\n<li><strong><code>&#58;only-of-type<\/code><\/strong>&nbsp;: cible un \u00e9l\u00e9ment s&rsquo;il est l&rsquo;unique enfant ce de type&nbsp;;<\/li>\n<li><strong><code>:root<\/code><\/strong>&nbsp;: cible l&rsquo;\u00e9l\u00e9ment racine du document&nbsp;;<\/li>\n<li><strong><code>:empty<\/code><\/strong>&nbsp;: cible un \u00e9l\u00e9ment sans enfant&nbsp;;<\/li>\n<li><strong><code>:target<\/code><\/strong>&nbsp;: cible un \u00e9l\u00e9ment point\u00e9 par son identifiant dans l&rsquo;URL (ancre)&nbsp;;<\/li>\n<li><strong><code>:enabled<\/code><\/strong>&nbsp;: cible les \u00e9l\u00e9ments de l&rsquo;interface qui sont activ\u00e9s&nbsp;;<\/li>\n<li><strong><code>:disabled<\/code><\/strong> : cible les \u00e9l\u00e9ments de l&rsquo;interface qui sont d\u00e9sactiv\u00e9s&nbsp;;<\/li>\n<li><strong><code>:checked<\/code><\/strong> : cible les \u00e9l\u00e9ments coch\u00e9s (bouton radio ou case \u00e0 cocher)&nbsp;;<\/li>\n<li><strong><code>:required<\/code><\/strong> : cible les \u00e9l\u00e9ments de formulaire d\u00e9finis comme requis (attribut <code>required<\/code>)&nbsp;;<\/li>\n<li><strong><code>:valid<\/code><\/strong> : cible les \u00e9l\u00e9ments de formulaire respectant la valeur attendue&nbsp;;<\/li>\n<li><strong><code>:invalid<\/code><\/strong> : cible les \u00e9l\u00e9ments ne respectant pas la valeur attendue&nbsp;;<\/li>\n<li><strong><code>:not(selector)<\/code><\/strong> : cible les \u00e9l\u00e9ments qui ne correspondent pas au s\u00e9lecteur entre parenth\u00e8ses.<\/li>\n<\/ul>\n<h3>Pseudo-\u00e9l\u00e9ments<\/h3>\n<p>Et les nouveaux pseudo-\u00e9l\u00e9ments de CSS3 :<\/p>\n<ul>\n<li>Utiliser les m\u00eames que CSS2 avec un \u00ab\u00a0::\u00a0\u00bb devant&nbsp;;<\/li>\n<li><strong><code>::selection<\/code><\/strong>&nbsp;: permet de styler du texte s\u00e9lectionn\u00e9 (couleur de fond, couleur de texte).<\/li>\n<\/ul>\n<p>C&rsquo;est tout pour le nouveau pseudo-\u00e9l\u00e9ment.<\/p>\n<p>N&rsquo;h\u00e9sitez pas \u00e0 utiliser l&rsquo;espace de commentaire si vous avez des questions.<br \/>\n\u00c0 bient\u00f4t !<\/p>\n<div class=\"sources\">\n<h2>Liens utiles<\/h2>\n<ul>\n<li><a href=\"http:\/\/reference.sitepoint.com\/css\/pseudoclasses\" lang=\"en\" hreflang=\"en\" title=\"Some details about Pseudo Classes (english)\">Pseudo Classes &#8211; SitePoint Reference<\/a><\/li>\n<li><a href=\"http:\/\/reference.sitepoint.com\/css\/pseudoelements\" lang=\"en\" hreflang=\"en\" title=\"Some details about Pseudo Elements (english)\">Pseudo Elements &#8211; SitePoint Reference<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Petit sujet de vocabulaire aujourd&rsquo;hui pour soulever un probl\u00e8me de diff\u00e9renciation entre la pseudo-classe et le pseudo-\u00e9l\u00e9ment en CSS. On a souvent tendance \u00e0 confondre les deux en se disant que dans les deux cas on place un : (deux-points) devant. Confusion justifi\u00e9e, voyons donc comment les distinguer.<\/p>\n","protected":false},"author":4,"featured_media":1746,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[17,50],"tags":[228,288,428,422,423],"coauthors":[597],"class_list":["post-1742","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-css3","category-ressources-telechargements","tag-astuce","tag-css2-1","tag-css3","tag-pseudo-classe","tag-pseudo-element"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/1742","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=1742"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/1742\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/1746"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=1742"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=1742"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=1742"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=1742"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}