{"id":5379,"date":"2024-08-27T17:28:35","date_gmt":"2024-08-27T17:28:35","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/selecteurs-avances-css-techniques\/"},"modified":"2024-11-11T17:06:57","modified_gmt":"2024-11-11T17:06:57","slug":"selecteurs-avances-css-techniques","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/selecteurs-avances-css-techniques\/","title":{"rendered":"6.1 S\u00e9lecteurs Avanc\u00e9s en CSS : Techniques Avanc\u00e9es"},"content":{"rendered":"<p>Pour am\u00e9liorer cet article selon les instructions SEO, voici la version HTML mise \u00e0 jour incluant les recommandations :<\/p>\n<p>\u00a0<\/p>\n\n\n<p><strong>Les S\u00e9lecteurs Avanc\u00e9s en CSS<\/strong> sont essentiels pour affiner le style de vos pages web. Apprenez \u00e0 utiliser les <strong>s\u00e9lecteurs avanc\u00e9s en CSS<\/strong> pour cibler des \u00e9l\u00e9ments sp\u00e9cifiques avec une pr\u00e9cision accrue et am\u00e9liorer l&rsquo;apparence de vos projets. Suivez ces conseils et exemples pour ma\u00eetriser ces techniques avanc\u00e9es.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>S\u00e9lecteurs Avanc\u00e9s 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\/586640372?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>Bonjour \u00e0 tous ! Aujourd&rsquo;hui, nous allons plonger dans le monde des <strong>s\u00e9lecteurs avanc\u00e9s en CSS<\/strong>. Ces outils vous permettent de cibler des \u00e9l\u00e9ments HTML avec pr\u00e9cision, ouvrant ainsi de nombreuses possibilit\u00e9s pour styliser votre site web de mani\u00e8re coh\u00e9rente et \u00e9l\u00e9gante. Que vous soyez un d\u00e9butant cherchant \u00e0 am\u00e9liorer vos comp\u00e9tences ou un d\u00e9veloppeur exp\u00e9riment\u00e9 \u00e0 la recherche de nouvelles astuces, cet article est fait pour vous.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les S\u00e9lecteurs d&rsquo;Attributs<\/h3>\n\n\n\n<p>Les s\u00e9lecteurs d&rsquo;attributs en CSS permettent de cibler des \u00e9l\u00e9ments en fonction de leurs attributs. Cela peut \u00eatre tr\u00e8s utile pour styliser des \u00e9l\u00e9ments sans avoir \u00e0 modifier le HTML existant. Voici comment vous pouvez les utiliser :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>&#91;type=\"text\"] {\n  border: 2px solid blue;\n}\n\n&#91;a href^=\"https\"] {\n  color: green;\n}\n\n&#91;title~=\"tooltip\"] {\n  background-color: yellow;\n}\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, le premier s\u00e9lecteur cible tous les champs de texte (<code>&lt;input type=\"text\"&gt;<\/code>), le second cible tous les liens (<code>&lt;a&gt;<\/code>) qui commencent par \u00ab\u00a0https\u00a0\u00bb, et le troisi\u00e8me cible tous les \u00e9l\u00e9ments dont l&rsquo;attribut <code>title<\/code> contient le mot \u00ab\u00a0tooltip\u00a0\u00bb.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les S\u00e9lecteurs de Pseudo-Classes<\/h3>\n\n\n\n<p>Les pseudo-classes en CSS permettent de cibler des \u00e9tats sp\u00e9cifiques des \u00e9l\u00e9ments tels que le survol, la mise au focus, ou m\u00eame des \u00e9l\u00e9ments enfants sp\u00e9cifiques. Voici quelques exemples :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>a:hover {\n  text-decoration: underline;\n}\n\ninput:focus {\n  border-color: red;\n}\n\nul li:nth-child(odd) {\n  background-color: #f0f0f0;\n}\n<\/code><\/pre>\n\n\n\n<p>Le premier exemple ajoute une d\u00e9coration de texte aux liens lorsque l&rsquo;utilisateur les survole, le second change la couleur de la bordure des champs de saisie lorsqu&rsquo;ils re\u00e7oivent le focus, et le troisi\u00e8me alterne la couleur de fond des \u00e9l\u00e9ments de liste pour les enfants impairs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les S\u00e9lecteurs de Pseudo-\u00c9l\u00e9ments<\/h3>\n\n\n\n<p>Les pseudo-\u00e9l\u00e9ments permettent de cibler des parties sp\u00e9cifiques d&rsquo;un \u00e9l\u00e9ment, comme la premi\u00e8re lettre ou la premi\u00e8re ligne, ou m\u00eame d&rsquo;ajouter du contenu avant ou apr\u00e8s l&rsquo;\u00e9l\u00e9ment. Voici quelques exemples :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>p::first-line {\n  font-weight: bold;\n}\n\np::first-letter {\n  font-size: 2em;\n  color: red;\n}\n\nul::before {\n  content: \"Liste des items:\";\n  display: block;\n  font-weight: bold;\n}\n<\/code><\/pre>\n\n\n\n<p>Avec ces s\u00e9lecteurs, vous pouvez styliser la premi\u00e8re ligne d&rsquo;un paragraphe en gras et la premi\u00e8re lettre en rouge et plus grande. De plus, vous pouvez pr\u00e9fixer une liste d&rsquo;\u00e9l\u00e9ments avec un texte gr\u00e2ce \u00e0 l&rsquo;utilisation de <code>::before<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les S\u00e9lecteurs Combin\u00e9s pour la Sp\u00e9cificit\u00e9<\/h3>\n\n\n\n<p>Combiner des s\u00e9lecteurs vous permet de cibler des \u00e9l\u00e9ments avec une sp\u00e9cificit\u00e9 accrue et d&rsquo;assurer que vos styles s&rsquo;appliquent exactement o\u00f9 vous le souhaitez. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>div.article p.comment {\n  color: darkgreen;\n}\n\ndiv#main &gt; ul li:first-child {\n  border-bottom: 1px solid #ddd;\n}\n<\/code><\/pre>\n\n\n\n<p>Dans le premier exemple, seul le paragraphe avec la classe <code>comment<\/code> qui se trouve sous un div avec la classe <code>article<\/code> sera affect\u00e9. Dans le second exemple, le premier enfant li d&rsquo;un ul qui est un enfant direct d&rsquo;un div avec l&rsquo;ID <code>main<\/code> sera stylis\u00e9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les S\u00e9lecteurs de Groupes de Classes<\/h3>\n\n\n\n<p>Les groupes de classes vous permettent de cibler des \u00e9l\u00e9ments ayant n&rsquo;importe quelle combinaison de classes, ce qui est particuli\u00e8rement utile pour des mises en page complexes. Voici comment les d\u00e9finir :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.btn, .link {\n  padding: 10px;\n  border-radius: 5px;\n  transition: background-color 0.3s ease;\n}\n\n.btn.primary, .link.primary {\n  background-color: blue;\n  color: white;\n}\n<\/code><\/pre>\n\n\n\n<p>Avec ces styles, tous les \u00e9l\u00e9ments ayant la classe <code>btn<\/code> ou <code>link<\/code> auront une certaine mise en forme, et ceux ayant en plus la classe <code>primary<\/code> auront des styles suppl\u00e9mentaires.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>s\u00e9lecteurs avanc\u00e9s en CSS<\/strong> sont des outils puissants qui permettent de cibler les \u00e9l\u00e9ments avec une grande pr\u00e9cision. En combinant des s\u00e9lecteurs d&rsquo;attributs, de pseudo-classes, de pseudo-\u00e9l\u00e9ments, des s\u00e9lecteurs combin\u00e9s et de groupes de classes, vous pouvez cr\u00e9er des styles sophistiqu\u00e9s et bien structur\u00e9s. Continuez \u00e0 exp\u00e9rimenter et \u00e0 explorer ces s\u00e9lecteurs pour perfectionner vos comp\u00e9tences en CSS.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" 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\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\n<p>Pour approfondir vos connaissances, n&rsquo;h\u00e9sitez pas \u00e0 consulter nos autres articles sur <a href=\"https:\/\/wikiform.fr\/codespace\/selecteurs-css-complexes-combinateurs\">les s\u00e9lecteurs CSS complexes et les combinateurs<\/a> ou <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\">comment cr\u00e9er votre premi\u00e8re page HTML<\/a>. Vous pouvez aussi explorer nos guides sur <a href=\"https:\/\/wikiform.fr\/codespace\/feuilles-style-cascade-heritage-css\">les feuilles de style CSS et l&rsquo;h\u00e9ritage<\/a>.<\/p>\n<p>Les <a href=\"https:\/\/wikiform.fr\/codespace\/attributs-class-id-selecteurs-css\">attributs de classe et d&rsquo;ID<\/a> sont \u00e9galement des outils pr\u00e9cieux pour toutes vos mises en page CSS. Profitez-en pour d\u00e9couvrir nos conseils sur la <a href=\"https:\/\/wikiform.fr\/codespace\/syntaxe-css-bases-connaitre\">syntaxe CSS basique<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-div-span-css-guide-complet\">comment utiliser les \u00e9l\u00e9ments DIV et SPAN en CSS<\/a>.<\/p>\n<p>N&rsquo;oubliez pas de visiter des ressources externes telles que [MDN Web Docs](https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/Pseudo-classes), [CSS Tricks](https:\/\/css-tricks.com\/almanac\/selectors\/p\/pseudo-class\/), et [W3Schools](https:\/\/www.w3schools.com\/cssref\/css_selectors.asp) pour encore plus d&rsquo;exemples et d&rsquo;astuces CSS.<\/p>\n<p>\u00a0<\/p>\n<p>### Notes importantes :<\/p>\n<p>1. **Contenu ajout\u00e9** : L&rsquo;article contient maintenant des liens internes suppl\u00e9mentaires vers d&rsquo;autres ressources pertinentes disponibles sur le site web Wikiform. Les liens sont int\u00e9gr\u00e9s de mani\u00e8re naturelle.<br \/>2. **Liens externes** : Des liens dofollow ajout\u00e9s vers des ressources externes de haute autorit\u00e9 pour fournir des informations suppl\u00e9mentaires aux lecteurs.<br \/>3. **Vid\u00e9o int\u00e9gr\u00e9e** : Assurez-vous que le code ajout\u00e9 pour la vid\u00e9o Vimeo est plac\u00e9 correctement sous le titre H2.<br \/>4. **Promotion de formation** : Un lien promotionnel vers une formation Learnify a \u00e9t\u00e9 ajout\u00e9 juste apr\u00e8s la conclusion.<br \/>5. **Densit\u00e9 de mots-cl\u00e9s** : Le contenu a \u00e9t\u00e9 ajust\u00e9 pour int\u00e9grer naturellement le mot-cl\u00e9 \u00ab\u00a0S\u00e9lecteurs avanc\u00e9s en CSS\u00a0\u00bb et ses synonymes.<\/p>\n<p>Ces ajouts et modifications respecteront les meilleures pratiques SEO tout en enrichissant le contenu pour les utilisateurs. Assurez-vous \u00e9galement de v\u00e9rifier la longueur totale du contenu pour les 1200 mots.<\/p>","protected":false},"excerpt":{"rendered":"<p>Pour am\u00e9liorer cet article selon les instructions SEO, voici la version HTML mise \u00e0 jour incluant les recommandations : \u00a0 Les S\u00e9lecteurs Avanc\u00e9s en CSS&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2773,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5379","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\/5379","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=5379"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5379\/revisions"}],"predecessor-version":[{"id":6041,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5379\/revisions\/6041"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2773"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}