{"id":5343,"date":"2024-08-27T16:17:07","date_gmt":"2024-08-27T16:17:07","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/selecteurs-css-complexes-combinateurs\/"},"modified":"2024-08-27T16:17:10","modified_gmt":"2024-08-27T16:17:10","slug":"selecteurs-css-complexes-combinateurs","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/selecteurs-css-complexes-combinateurs\/","title":{"rendered":"3.4 S\u00e9lecteurs CSS Complexes et Combinateurs"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Les S\u00e9lecteurs CSS Complexes et Combinateurs<\/strong> jouent un r\u00f4le crucial dans la cr\u00e9ation de sites web modernes et dynamiques. Comprendre comment utiliser les <strong>s\u00e9lecteurs CSS complexes et combinateurs<\/strong> permet de cibler des \u00e9l\u00e9ments HTML de mani\u00e8re pr\u00e9cise et de cr\u00e9er des styles sophistiqu\u00e9s. Explorons comment les utiliser efficacement gr\u00e2ce \u00e0 des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>S\u00e9lecteurs CSS Complexes et Combinateurs<\/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\/586289701?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-spciale-\">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\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" 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\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" 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-d%C3%A9veloppeur-python\/144')\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 s\u00e9lecteurs CSS complexes permettent de cibler des \u00e9l\u00e9ments HTML sp\u00e9cifiques en utilisant diff\u00e9rentes combinaisons de s\u00e9lecteurs. Les combinateurs permettent de d\u00e9finir des relations entre les s\u00e9lecteurs. Ensemble, ils offrent une grande flexibilit\u00e9 pour appliquer des styles de mani\u00e8re tr\u00e8s pr\u00e9cise. Vous pouvez \u00e9galement explorer les <a href=\"https:\/\/wikiform.fr\/codespace\/syntaxe-css-bases-connaitre\">bases de la syntaxe CSS<\/a> pour un meilleur aper\u00e7u.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">S\u00e9lecteurs CSS Complexes<\/h3>\n\n\n\n<p>Les s\u00e9lecteurs CSS complexes sont des compositions de s\u00e9lecteurs simples qui permettent de cibler des \u00e9l\u00e9ments sp\u00e9cifiques dans le DOM (Document Object Model). Voici quelques exemples courants :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* S\u00e9lecteur d\u2019attribut *\/\ninput[type=\"text\"] {\n    border: 1px solid #ccc;\n}\n\n\/* S\u00e9lecteur de pseudo-classe *\/\na:hover {\n    color: red;\n}\n\n\/* S\u00e9lecteur de pseudo-\u00e9l\u00e9ment *\/\np::first-line {\n    font-weight: bold;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combinateurs CSS<\/h3>\n\n\n\n<p>Les combinateurs CSS d\u00e9finissent les relations entre les s\u00e9lecteurs. Il existe quatre principaux types de combinateurs : enfant direct, descendant, adjacent et g\u00e9n\u00e9ral. Voici comment chacun fonctionne :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Combinateur Enfant Direct ( > )<\/h4>\n\n\n\n<p>Le combinateur enfant direct s\u00e9lectionne les \u00e9l\u00e9ments qui sont des enfants directs d&rsquo;un autre \u00e9l\u00e9ment. Exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* S\u00e9lectionne seulement les <p> qui sont des enfants directs de <div> *\/\ndiv > p {\n    color: blue;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Combinateur Descendant (espace)<\/h4>\n\n\n\n<p>Le combinateur descendant s\u00e9lectionne les \u00e9l\u00e9ments qui sont descendants, directs ou non, d&rsquo;un autre \u00e9l\u00e9ment. Exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* S\u00e9lectionne tous les <p> qui sont descendants de <div> *\/\ndiv p {\n    color: green;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Combinateur Adjacent ( + )<\/h4>\n\n\n\n<p>Le combinateur adjacent s\u00e9lectionne le premier \u00e9l\u00e9ment qui suit imm\u00e9diatement un autre \u00e9l\u00e9ment. Exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* S\u00e9lectionne le <p> qui suit imm\u00e9diatement un <h1> *\/\nh1 + p {\n    margin-top: 0;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Combinateur G\u00e9n\u00e9ral ( ~ )<\/h4>\n\n\n\n<p>Le combinateur g\u00e9n\u00e9ral s\u00e9lectionne tous les \u00e9l\u00e9ments qui sont des fr\u00e8res d&rsquo;un autre \u00e9l\u00e9ment. Exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* S\u00e9lectionne tous les <p> qui sont fr\u00e8res de <h1> *\/\nh1 ~ p {\n    color: gray;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de S\u00e9lecteurs Combin\u00e9s<\/h3>\n\n\n\n<p>En combinant les s\u00e9lecteurs complexes et les combinateurs, vous pouvez cr\u00e9er des r\u00e8gles de style tr\u00e8s sp\u00e9cifiques. Voici quelques exemples :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">S\u00e9lecteur en Liste et Pseudo-classe<\/h4>\n\n\n\n<p>S\u00e9lectionne tous les <code>&lt;a&gt;<\/code> \u00e0 l&rsquo;int\u00e9rieur de <code>&lt;nav&gt;<\/code> qui sont hover\u00e9s :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>nav a:hover {\n    text-decoration: underline;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">S\u00e9lecteur d&rsquo;Attribut Multiples<\/h4>\n\n\n\n<p>Styles appliqu\u00e9s aux <code>&lt;input&gt;<\/code> de type texte avec une classe sp\u00e9cifique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>input[type=\"text\"].highlight {\n    border-color: red;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Combinaison de Pseudo-\u00e9l\u00e9ment et Combinaison de Classe<\/h4>\n\n\n\n<p>Appliquer des styles au premier caract\u00e8re d&rsquo;un paragraphe uniquement si le paragraphe est d&rsquo;une classe sp\u00e9cifique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>p.intro::first-letter {\n    font-size: 2em;\n    color: crimson;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Pratique dans un Projet<\/h3>\n\n\n\n<p>Pour illustrer l\u2019utilisation pratique des s\u00e9lecteurs CSS complexes et des combinateurs, imaginons un exemple concret : Vous construisez un blog avec des articles et des sections de commentaires. Vous voulez que :<\/p>\n\n<ul>\n<li>Les titres principaux des articles soient en bleu.<\/li>\n<li>Les premi\u00e8res lignes des articles aient une taille de police plus grande.<\/li>\n<li>Les liens dans les commentaires changent de couleur au passage de la souris.<\/li>\n<li>Les paragraphes suivants les titres de section dans les commentaires aient un style distinct.<\/li>\n<li>Vous pouvez en apprendre davantage sur les balises HTML essentielles dans notre <a href=\"https:\/\/wikiform.fr\/codespace\/element-titre-html-explications-guide\">guide complet sur les \u00e9l\u00e9ments titres HTML<\/a>.<\/li>\n<\/ul>\n   \n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Titre principal des articles *\/\narticle h1 {\n    color: blue;\n}\n\n\/* Premi\u00e8re ligne des articles *\/\narticle p::first-line {\n    font-size: 1.2em;\n}\n\n\/* Liens dans les commentaires *\/\n.comment a:hover {\n    color: orange;\n}\n\n\/* Paragraphes suivant un titre dans les commentaires *\/\n.comment h2 + p {\n    font-style: italic;\n    color: green;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Interactions Dynamiques avec JavaScript<\/h3>\n\n\n\n<p>Pour aller encore plus loin, vous pouvez combiner CSS et JavaScript pour cr\u00e9er des interactions dynamiques. Imaginons que vous voulez afficher un popup lorsque l&rsquo;utilisateur survole certains \u00e9l\u00e9ments. Voici comment vous pouvez proc\u00e9der :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\n  .popup {\n    display: none;\n    position: absolute;\n    background-color: white;\n    border: 1px solid black;\n    padding: 10px;\n  }\n  .hover-target:hover + .popup {\n    display: block;\n  }\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div class=\"hover-target\"&gt;Hover over me&lt;\/div&gt;\n  &lt;div class=\"popup\"&gt;This is a popup!&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>Vous pouvez \u00e9galement manipuler les styles en utilisant JavaScript pour des interactions plus complexes:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.querySelector('.hover-target').addEventListener('mouseover', function() {\n    document.querySelector('.popup').style.display = 'block';\n});\ndocument.querySelector('.hover-target').addEventListener('mouseout', function() {\n    document.querySelector('.popup').style.display = 'none';\n});\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>s\u00e9lecteurs CSS complexes et combinateurs<\/strong> offrent une grande flexibilit\u00e9 pour cibler et styliser des \u00e9l\u00e9ments HTML de mani\u00e8re tr\u00e8s pr\u00e9cise. En ma\u00eetrisant ces outils, vous pouvez cr\u00e9er des interfaces utilisateur stylis\u00e9es et interactives, offrant une meilleure exp\u00e9rience aux utilisateurs. Continuez \u00e0 explorer et \u00e0 pratiquer avec diff\u00e9rents s\u00e9lecteurs et combinateurs pour d\u00e9couvrir tout le potentiel de CSS. Pour des tutoriels suppl\u00e9mentaires, consultez notre <a href=\"https:\/\/wikiform.fr\/css-avanc\u00e9-tutoriels\">page de tutoriels avanc\u00e9s CSS<\/a>. Explorez aussi des ressources telles que <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/CSS_Selectors\" target=\"_blank\" rel=\"nofollow noopener\">MDN Web Docs sur les s\u00e9lecteurs CSS<\/a> pour une compr\u00e9hension plus approfondie.<\/p>\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-CSS-offer-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=\"Learnify Formation HTML ET CSS Offre 50%\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Les S\u00e9lecteurs CSS Complexes et Combinateurs jouent un r\u00f4le crucial dans la cr\u00e9ation de sites web modernes et dynamiques. Comprendre comment utiliser les s\u00e9lecteurs&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2774,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5343","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\/5343","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=5343"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5343\/revisions"}],"predecessor-version":[{"id":5344,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5343\/revisions\/5344"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2774"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}