{"id":5381,"date":"2024-08-27T17:33:07","date_gmt":"2024-08-27T17:33:07","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/utiliser-pseudo-classes-css-guide\/"},"modified":"2024-11-13T16:00:42","modified_gmt":"2024-11-13T16:00:42","slug":"utiliser-pseudo-classes-css-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/utiliser-pseudo-classes-css-guide\/","title":{"rendered":"6.2 Utiliser les Pseudo-classes en CSS : Guide Pratique"},"content":{"rendered":"\n\n\n<p><strong>Utiliser les Pseudo-classes en CSS<\/strong> peut transformer vos conceptions web et rendre vos interfaces utilisateur beaucoup plus interactives. Les pseudo-classes vous permettent de s\u00e9lectionner des \u00e9l\u00e9ments en fonction de leur \u00e9tat ou de leur position dans le document. Cet article vise \u00e0 vous fournir un guide pratique pour comprendre et utiliser efficacement les <strong>pseudo-classes en CSS<\/strong> \u00e0 travers des explications concr\u00e8tes et des exemples de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Pseudo-classes en CSS<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586640478?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-speciale\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/maitriser-css3-de-debutant-a-expert\/142\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/maitriser-css3-de-debutant-a-expert\/142\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-developpeur-css\/142')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Les pseudo-classes en CSS sont des s\u00e9lecteurs qui permettent de sp\u00e9cifier un \u00e9tat particulier d&rsquo;un \u00e9l\u00e9ment. Elles ajoutent une couche de sp\u00e9cificit\u00e9 qui peut se r\u00e9v\u00e9ler tr\u00e8s utile pour styliser vos pages en tenant compte des \u00e9tats d&rsquo;interaction utilisateur et des structures HTML red\u00e9finies.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les Pseudo-classes de Base<\/h3>\n\n\n\n<p>Les pseudo-classes de base incluent des s\u00e9lecteurs comme <code>:hover<\/code>, <code>:active<\/code>, et <code>:focus<\/code>, qui sont probablement les plus utilis\u00e9s. Voici un aper\u00e7u de leur fonctionnement :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* :hover *\/\nbutton:hover {\n    background-color: #f0f0f0;\n}\n\n\/* :active *\/\nbutton:active {\n    background-color: #ccc;\n}\n\n\/* :focus *\/\ninput:focus {\n    border-color: #4A90E2;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Les Pseudo-classes de Structuration<\/h3>\n\n\n\n<p>Les pseudo-classes de structuration comme <code>:nth-child()<\/code> et <code>:nth-of-type()<\/code> vous permettent de s\u00e9lectionner des \u00e9l\u00e9ments en fonction de leur position dans le DOM.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* S\u00e9lectionner le deuxi\u00e8me enfant de son parent *\/\nli:nth-child(2) {\n    color: red;\n}\n\n\/* S\u00e9lectionner le deuxi\u00e8me \u00e9l\u00e9ment de type p *\/\np:nth-of-type(2) {\n    font-weight: bold;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Pseudo-Classes d&rsquo;\u00c9tat<\/h3>\n\n\n\n<p>Les pseudo-classes d&rsquo;\u00e9tat comme <code>:checked<\/code> et <code>:disabled<\/code> sont utiles pour cibler des \u00e9l\u00e9ments d&rsquo;une forme en fonction de leur \u00e9tat.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Styliser les cases \u00e0 cocher et les boutons radio coch\u00e9s *\/\ninput:checked {\n    outline: 2px solid #4CAF50;\n}\n\n\/* Styliser les champs de formulaire d\u00e9sactiv\u00e9s *\/\ninput:disabled {\n    background-color: #e0e0e0;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Pseudo-Classes pour Inverser la S\u00e9lection<\/h3>\n\n\n\n<p>La pseudo-classe <code>:not()<\/code> permet d&rsquo;exclure certains \u00e9l\u00e9ments de la s\u00e9lection, ce qui simplifie la cr\u00e9ation de r\u00e8gles CSS.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Styliser tous les \u00e9l\u00e9ments sauf ceux avec la classe \"exception\" *\/\np:not(.exception) {\n    color: blue;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Pseudo-Classes Utilis\u00e9es pour Styliser les Formulaires<\/h3>\n\n\n\n<p>Les pseudo-classes CSS peuvent \u00eatre particuli\u00e8rement utiles pour am\u00e9liorer l&rsquo;interaction des utilisateurs avec les formulaires. Vous pouvez styliser les champs en fonction de leur \u00e9tat : valid\u00e9, invalide, requis, etc.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Styliser les champs valides *\/\ninput:valid {\n    border-color: #28a745;\n}\n\n\/* Styliser les champs invalides *\/\ninput:invalid {\n    border-color: #dc3545;\n}\n\n\/* Styliser les champs requis *\/\ninput:required {\n    border-color: #ffc107;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Pseudo-classes en CSS<\/h3>\n\n\n\n<p>Approfondissons nos connaissances sur les pseudo-classes en CSS avec des exemples plus avanc\u00e9s montrant comment les utiliser pour des \u00e9l\u00e9ments dynamiques et des interfaces complexes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation Combin\u00e9e de Pseudo-classes<\/h4>\n\n\n\n<p>Combiner plusieurs pseudo-classes permet de cr\u00e9er des s\u00e9lections tr\u00e8s sp\u00e9cifiques. Par exemple, vous pouvez styliser un lien qui est \u00e0 la fois actif et focus\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Lien qui est actif et focus\u00e9 *\/\na:active:focus {\n    color: #ff00ff;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Stylisation de Listes Hi\u00e9rarchiques<\/h4>\n\n\n\n<p>Les pseudo-classes peuvent \u00e9galement \u00eatre utilis\u00e9es pour styliser les listes hi\u00e9rarchiques, comme les menus d\u00e9roulants. Voici un exemple de structure de menu stylis\u00e9e :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Styliser les \u00e9l\u00e9ments de menu de premier niveau *\/\nnav ul li {\n    list-style: none;\n    padding: 10px;\n}\n\n\/* Styliser les sous-menus *\/\nnav ul li ul li {\n    padding: 5px;\n    background-color: #f7f7f7;\n}\n\n\/* Styliser les liens de sous-menus au survol *\/\nnav ul li ul li a:hover {\n    background-color: #eee;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Validation Avanc\u00e9e des Formulaires<\/h4>\n\n\n\n<p>Pour des cas d\u2019utilisation plus complexes, les pseudo-classes de validation peuvent \u00eatre combin\u00e9es avec des r\u00e8gles CSS personnalis\u00e9es pour offrir des retours visuels clairs en fonction de l\u2019\u00e9tat du champ :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Champ valide avec contenu pr\u00e9cis\u00e9 *\/\ninput:valid&#91;value] {\n    border: 2px solid #28a745;\n}\n\n\/* Champ invalide sans valeur *\/\ninput:invalid:not(&#91;value]) {\n    border: 2px solid #dc3545;\n}\n<\/code><\/pre>\n\n\n\n<p>Explorer davantage chaque pseudo-classe vous permettra de ma\u00eetriser leur utilisation et d&rsquo;optimiser vos interfaces utilisateur de mani\u00e8re significative. Plusieurs ressources en ligne comme <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/p\/pseudo-class\/\" target=\"_blank\" rel=\"noopener\">CSS Tricks<\/a> et <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/Pseudo-classes\" target=\"_blank\" rel=\"noopener\">MDN Web Docs<\/a> offrent des articles d\u00e9taill\u00e9s pour vous aider \u00e0 approfondir vos connaissances.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur l&rsquo;utilisation des Pseudo-classes<\/h2>\n\n\n\n<p>L&rsquo;utilisation des <strong>pseudo-classes en CSS<\/strong> est essentielle pour tout d\u00e9veloppeur web cherchant \u00e0 am\u00e9liorer l&rsquo;interactivit\u00e9 et la r\u00e9activit\u00e9 des interfaces utilisateur. Ma\u00eetriser ces s\u00e9lecteurs peut vous aider \u00e0 cr\u00e9er des interfaces plus dynamiques et intuitives. Continuez \u00e0 explorer et exp\u00e9rimenter avec les pseudo-classes pour voir comment elles peuvent enrichir vos projets de d\u00e9veloppement web. Pour plus de tutoriels CSS, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/maitriser-css3-de-debutant-a-expert\/143\" target=\"_blank\" rel=\"noopener\">CSS avanc\u00e9<\/a>. Pour une introduction aux s\u00e9lecteurs CSS, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/les-selecteurs-css-complets\" target=\"_blank\" rel=\"noopener\">guide complet sur les s\u00e9lecteurs CSS<\/a>. D\u00e9couvrez \u00e9galement notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\" target=\"_blank\" rel=\"noopener\">le fonctionnement des navigateurs web en HTML<\/a>, ainsi que notre tutoriel sur <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" target=\"_blank\" rel=\"noopener\">la cr\u00e9ation de votre premi\u00e8re page HTML<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-developpeur-css\/142\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation CSS Offre 50%\" title=\"\"><\/a>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Formation HTML et CSS - 50% de r\u00e9duction sur Learnify\" title=\"\"><\/a>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Utiliser les Pseudo-classes en CSS peut transformer vos conceptions web et rendre vos interfaces utilisateur beaucoup plus interactives. Les pseudo-classes vous permettent de s\u00e9lectionner des&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2790,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5381","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5381"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5381\/revisions"}],"predecessor-version":[{"id":6042,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5381\/revisions\/6042"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2790"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}