{"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":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.9 - aioseo.com -->\n\t<meta name=\"description\" content=\"Petit sujet de vocabulaire aujourd&#039;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. Nous allons voir comment les distinguer sur\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Geoffrey Crofte\"\/>\n\t<meta name=\"keywords\" content=\"astuce,css2.1,css3,pseudo-classe,pseudo-element,css \/ css3,ressources &amp; outils\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/difference-entre-pseudo-element-et-pseudo-classe\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.9\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/difference-entre-pseudo-element-et-pseudo-classe#article\",\"name\":\"Diff\\u00e9rence entre pseudo-\\u00e9l\\u00e9ment et pseudo-classe\",\"headline\":\"Diff\\u00e9rence entre pseudo-\\u00e9l\\u00e9ment et pseudo-classe\",\"author\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/wp-content\\\/uploads\\\/2011\\\/12\\\/pseudo-toi-meme.png\",\"width\":100,\"height\":100},\"datePublished\":\"2011-12-20T08:59:47+01:00\",\"dateModified\":\"2015-01-18T16:19:18+01:00\",\"inLanguage\":\"fr-FR\",\"commentCount\":12,\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/difference-entre-pseudo-element-et-pseudo-classe#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/difference-entre-pseudo-element-et-pseudo-classe#webpage\"},\"articleSection\":\"CSS \\\/ CSS3, Ressources &amp; Outils, astuce, CSS2.1, CSS3, pseudo-classe, pseudo-element, CreativeJuiz\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/difference-entre-pseudo-element-et-pseudo-classe#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog#listItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/css-css3#listItem\",\"name\":\"CSS \\\/ CSS3\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/css-css3#listItem\",\"position\":2,\"name\":\"CSS \\\/ CSS3\",\"item\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/css-css3\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/difference-entre-pseudo-element-et-pseudo-classe#listItem\",\"name\":\"Diff\\u00e9rence entre pseudo-\\u00e9l\\u00e9ment et pseudo-classe\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog#listItem\",\"name\":\"Accueil\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/difference-entre-pseudo-element-et-pseudo-classe#listItem\",\"position\":3,\"name\":\"Diff\\u00e9rence entre pseudo-\\u00e9l\\u00e9ment et pseudo-classe\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/css-css3#listItem\",\"name\":\"CSS \\\/ CSS3\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#person\",\"name\":\"Geoffrey Crofte\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/difference-entre-pseudo-element-et-pseudo-classe#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g\",\"width\":96,\"height\":96,\"caption\":\"Geoffrey Crofte\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey\",\"name\":\"Geoffrey Crofte\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/difference-entre-pseudo-element-et-pseudo-classe#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g\",\"width\":96,\"height\":96,\"caption\":\"Geoffrey Crofte\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/difference-entre-pseudo-element-et-pseudo-classe#webpage\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/difference-entre-pseudo-element-et-pseudo-classe\",\"name\":\"Diff\\u00e9rence entre pseudo-\\u00e9l\\u00e9ment et pseudo-classe\",\"description\":\"Petit sujet de vocabulaire aujourd'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. Nous allons voir comment les distinguer sur\",\"inLanguage\":\"fr-FR\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/difference-entre-pseudo-element-et-pseudo-classe#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/wp-content\\\/uploads\\\/2011\\\/12\\\/pseudo-toi-meme.png\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/difference-entre-pseudo-element-et-pseudo-classe\\\/#mainImage\",\"width\":100,\"height\":100},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/difference-entre-pseudo-element-et-pseudo-classe#mainImage\"},\"datePublished\":\"2011-12-20T08:59:47+01:00\",\"dateModified\":\"2015-01-18T16:19:18+01:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/\",\"name\":\"Creative Juiz\",\"description\":\"HTML5, CSS3, JavaScript, WordPress Tutorials\",\"inLanguage\":\"fr-FR\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Diff\u00e9rence entre pseudo-\u00e9l\u00e9ment et pseudo-classe","description":"Petit sujet de vocabulaire aujourd'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. Nous allons voir comment les distinguer sur","canonical_url":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/difference-entre-pseudo-element-et-pseudo-classe","robots":"max-image-preview:large","keywords":"astuce,css2.1,css3,pseudo-classe,pseudo-element,css \/ css3,ressources &amp; outils","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/difference-entre-pseudo-element-et-pseudo-classe#article","name":"Diff\u00e9rence entre pseudo-\u00e9l\u00e9ment et pseudo-classe","headline":"Diff\u00e9rence entre pseudo-\u00e9l\u00e9ment et pseudo-classe","author":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author"},"publisher":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2011\/12\/pseudo-toi-meme.png","width":100,"height":100},"datePublished":"2011-12-20T08:59:47+01:00","dateModified":"2015-01-18T16:19:18+01:00","inLanguage":"fr-FR","commentCount":12,"mainEntityOfPage":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/difference-entre-pseudo-element-et-pseudo-classe#webpage"},"isPartOf":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/difference-entre-pseudo-element-et-pseudo-classe#webpage"},"articleSection":"CSS \/ CSS3, Ressources &amp; Outils, astuce, CSS2.1, CSS3, pseudo-classe, pseudo-element, CreativeJuiz"},{"@type":"BreadcrumbList","@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/difference-entre-pseudo-element-et-pseudo-classe#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog#listItem","position":1,"name":"Accueil","item":"https:\/\/www.creativejuiz.fr\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/theme\/css-css3#listItem","name":"CSS \/ CSS3"}},{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/theme\/css-css3#listItem","position":2,"name":"CSS \/ CSS3","item":"https:\/\/www.creativejuiz.fr\/blog\/theme\/css-css3","nextItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/difference-entre-pseudo-element-et-pseudo-classe#listItem","name":"Diff\u00e9rence entre pseudo-\u00e9l\u00e9ment et pseudo-classe"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog#listItem","name":"Accueil"}},{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/difference-entre-pseudo-element-et-pseudo-classe#listItem","position":3,"name":"Diff\u00e9rence entre pseudo-\u00e9l\u00e9ment et pseudo-classe","previousItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/theme\/css-css3#listItem","name":"CSS \/ CSS3"}}]},{"@type":"Person","@id":"https:\/\/www.creativejuiz.fr\/blog\/#person","name":"Geoffrey Crofte","image":{"@type":"ImageObject","@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/difference-entre-pseudo-element-et-pseudo-classe#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g","width":96,"height":96,"caption":"Geoffrey Crofte"}},{"@type":"Person","@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author","url":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey","name":"Geoffrey Crofte","image":{"@type":"ImageObject","@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/difference-entre-pseudo-element-et-pseudo-classe#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g","width":96,"height":96,"caption":"Geoffrey Crofte"}},{"@type":"WebPage","@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/difference-entre-pseudo-element-et-pseudo-classe#webpage","url":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/difference-entre-pseudo-element-et-pseudo-classe","name":"Diff\u00e9rence entre pseudo-\u00e9l\u00e9ment et pseudo-classe","description":"Petit sujet de vocabulaire aujourd'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. Nous allons voir comment les distinguer sur","inLanguage":"fr-FR","isPartOf":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/difference-entre-pseudo-element-et-pseudo-classe#breadcrumblist"},"author":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author"},"creator":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author"},"image":{"@type":"ImageObject","url":"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2011\/12\/pseudo-toi-meme.png","@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/difference-entre-pseudo-element-et-pseudo-classe\/#mainImage","width":100,"height":100},"primaryImageOfPage":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/difference-entre-pseudo-element-et-pseudo-classe#mainImage"},"datePublished":"2011-12-20T08:59:47+01:00","dateModified":"2015-01-18T16:19:18+01:00"},{"@type":"WebSite","@id":"https:\/\/www.creativejuiz.fr\/blog\/#website","url":"https:\/\/www.creativejuiz.fr\/blog\/","name":"Creative Juiz","description":"HTML5, CSS3, JavaScript, WordPress Tutorials","inLanguage":"fr-FR","publisher":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/#person"}}]}},"aioseo_meta_data":{"post_id":"1742","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[],"defaultGraph":"","defaultPostTypeGraph":""},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2020-12-21 17:17:59","updated":"2025-07-09 23:22:58","seo_analyzer_scan_date":null},"_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}]}}