{"id":5345,"date":"2024-08-27T16:21:03","date_gmt":"2024-08-27T16:21:03","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/attributs-class-id-selecteurs-css\/"},"modified":"2024-08-27T16:21:06","modified_gmt":"2024-08-27T16:21:06","slug":"attributs-class-id-selecteurs-css","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/attributs-class-id-selecteurs-css\/","title":{"rendered":"3.5 Attributs class, id et S\u00e9lecteurs Associ\u00e9s en CSS"},"content":{"rendered":"Bien s\u00fbr, je vais appliquer les optimisations SEO et le contenu suppl\u00e9mentaire n\u00e9cessaires pour votre article. Voici votre article optimis\u00e9 :\n\n\u00ab\u00a0`html\n\n<p><strong>Les Attributs class, id et S\u00e9lecteurs Associ\u00e9s en CSS<\/strong> sont fondamentaux pour cibler et styliser des \u00e9l\u00e9ments HTML de mani\u00e8re pr\u00e9cise et efficace. Ma\u00eetriser l&rsquo;utilisation de ces attributs et les s\u00e9lecteurs associ\u00e9s peut consid\u00e9rablement am\u00e9liorer la conception et la maintenabilit\u00e9 de vos feuilles de style CSS. D\u00e9couvrons comment vous pouvez les utiliser gr\u00e2ce \u00e0 des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Attributs class, id et S\u00e9lecteurs Associ\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\/586293639?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>En CSS, les <strong>attributs class et id<\/strong> sont utilis\u00e9s pour affecter des styles sp\u00e9cifiques aux \u00e9l\u00e9ments HTML. L&rsquo;attribut <code>class<\/code> permet de cibler plusieurs \u00e9l\u00e9ments avec le m\u00eame style, tandis que l&rsquo;attribut <code>id<\/code> est utilis\u00e9 pour cibler un \u00e9l\u00e9ment unique. Les s\u00e9lecteurs CSS permettent de d\u00e9finir des r\u00e8gles de style bas\u00e9es sur ces attributs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de l&rsquo;Attribut <code>class<\/code><\/h3>\n\n\n\n<p>L&rsquo;attribut <code>class<\/code> est id\u00e9al pour appliquer des styles \u00e0 plusieurs \u00e9l\u00e9ments qui partagent des caract\u00e9ristiques similaires. Voici un exemple o\u00f9 nous utilisons une classe <code>.highlight<\/code> pour mettre en surbrillance plusieurs paragraphes.<\/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      .highlight {\n        background-color: yellow;\n        font-weight: bold;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;p class=\"highlight\"&gt;Ceci est un paragraphe important.&lt;\/p&gt;\n    &lt;p class=\"highlight\"&gt;Un autre paragraphe important.&lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de l&rsquo;Attribut <code>id<\/code><\/h3>\n\n\n\n<p>L&rsquo;attribut <code>id<\/code> est utilis\u00e9 pour cibler un seul \u00e9l\u00e9ment de mani\u00e8re unique. Assurez-vous que chaque <code>id<\/code> dans un document HTML est unique pour \u00e9viter les conflits de style. Voici un exemple utilisant l&rsquo;ID <code>#uniqueTitle<\/code> pour styliser un titre sp\u00e9cifique.<\/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      #uniqueTitle {\n        color: blue;\n        font-size: 24px;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1 id=\"uniqueTitle\"&gt;Titre Unique&lt;\/h1&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">S\u00e9lecteurs de Classes et d&rsquo;ID en CSS<\/h3>\n\n\n\n<p>En CSS, les s\u00e9lecteurs de classe et d&rsquo;ID sont utilis\u00e9s pour appliquer des styles sp\u00e9cifiques aux \u00e9l\u00e9ments HTML. Un s\u00e9lecteur de classe est pr\u00e9c\u00e9d\u00e9 d&rsquo;un point (<code>.<\/code>), tandis qu&rsquo;un s\u00e9lecteur d&rsquo;ID est pr\u00e9c\u00e9d\u00e9 d&rsquo;un di\u00e8se (<code>#<\/code>).<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* S\u00e9lecteur de classe *\/\n.highlight {\n    background-color: yellow;\n    font-weight: bold;\n}\n\n\/* S\u00e9lecteur d'ID *\/\n#uniqueTitle {\n    color: blue;\n    font-size: 24px;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner \u00c9troitement Les Classes et les ID<\/h3>\n\n\n\n<p>Pour cibler des \u00e9l\u00e9ments encore plus pr\u00e9cis\u00e9ment, vous pouvez \u00e9galement combiner les s\u00e9lecteurs de classes et d&rsquo;ID. Voici un exemple o\u00f9 nous appliquons des styles sp\u00e9cifiques \u00e0 un \u00e9l\u00e9ment qui a \u00e0 la fois une classe et un ID.<\/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      .highlight {\n        background-color: yellow;\n        font-weight: bold;\n      }\n      \n      #uniqueHighlight.highlight {\n        background-color: orange;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;p class=\"highlight\"&gt;Ceci est un paragraphe important.&lt;\/p&gt;\n    &lt;p id=\"uniqueHighlight\" class=\"highlight\"&gt;Un paragraphe encore plus important.&lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>En combinant les classes et les IDs, vous pouvez donner priorit\u00e9 au style de l&rsquo;\u00e9l\u00e9ment avec l&rsquo;ID tout en conservant les styles de la classe.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">S\u00e9lecteurs Combin\u00e9s pour des Styles Pr\u00e9cis<\/h3>\n\n\n\n<p>Les s\u00e9lecteurs combin\u00e9s permettent de cibler des \u00e9l\u00e9ments en fonction de leur position ou de leur relation avec d&rsquo;autres \u00e9l\u00e9ments. Voici un exemple utilisant des s\u00e9lecteurs de descendant et de groupe :<\/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      \/* S\u00e9lecteur de descendant *\/\n      .container p {\n        color: green;\n      }\n      \n      \/* S\u00e9lecteur de groupe *\/\n      .highlight, #uniqueTitle {\n        font-weight: bold;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div class=\"container\"&gt;\n      &lt;p&gt;Paragraphe dans un conteneur.&lt;\/p&gt;\n      &lt;p class=\"highlight\"&gt;Autre paragraphe dans un conteneur.&lt;\/p&gt;\n    &lt;\/div&gt;\n    &lt;h1 id=\"uniqueTitle\"&gt;Titre Unique&lt;\/h1&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s des S\u00e9lecteurs CSS<\/h3>\n\n\n\n<p>Pour approfondir votre ma\u00eetrise des s\u00e9lecteurs, voici quelques exemples avanc\u00e9s qui d\u00e9montrent la puissance des s\u00e9lecteurs CSS pour cr\u00e9er des styles sophistiqu\u00e9s :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">S\u00e9lecteur d&rsquo;Attribut<\/h4>\n\n\n\n<p>Les s\u00e9lecteurs d&rsquo;attribut permettent de cibler les \u00e9l\u00e9ments en fonction de la pr\u00e9sence ou de la valeur d&rsquo;un attribut sp\u00e9cifique. Voici un exemple ciblant les liens avec un attribut <code>title<\/code> sp\u00e9cifique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Cible les liens avec l'attribut title *\/\na[title] {\n    color: red;\n}\n\n\/* Cible les liens avec un title contenant \"special\" *\/\na[title*=\"special\"] {\n    color: blue;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Pseudo-Classes CSS<\/h4>\n\n\n\n<p>Les pseudo-classes permettent de cibler les \u00e9l\u00e9ments en fonction de leur \u00e9tat. Par exemple, voici comment styliser un lien lorsqu&rsquo;il est survol\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Change la couleur du lien lors du survol *\/\na:hover {\n    color: green;\n}\n<\/code><\/pre>\n\n\n\n<p>En continuant \u00e0 explorer les s\u00e9lecteurs avanc\u00e9s, vous pouvez cr\u00e9er des designs attrayants et interactifs avec CSS. Pour en apprendre davantage sur CSS et les s\u00e9lecteurs, vous pouvez consulter des ressources comme <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/CSS_Selectors\" target=\"_blank\" rel=\"noopener\">Mozilla Developer Network<\/a> et suivre des cours sp\u00e9cifiques sur des plateformes \u00e9ducatives telles que <a href=\"https:\/\/www.pluralsight.com\/\" target=\"_blank\" rel=\"noopener\">Pluralsight<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur les Attributs class, id et S\u00e9lecteurs Associ\u00e9s en CSS<\/h2>\n\n\n\n<p>Les <strong>attributs class, id et s\u00e9lecteurs associ\u00e9s en CSS<\/strong> sont des outils essentiels pour styliser vos pages web. Ma\u00eetriser ces concepts vous permettra de cr\u00e9er des feuilles de style maintenables, r\u00e9utilisables et pr\u00e9cises. Continuez \u00e0 explorer les s\u00e9lecteurs CSS pour d\u00e9couvrir de nouvelles fa\u00e7ons d&rsquo;am\u00e9liorer vos designs et la r\u00e9activit\u00e9 de vos interfaces utilisateur. Pour plus d&rsquo;articles sur le CSS, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\">formation HTML5 et CSS3 de d\u00e9butant \u00e0 expert<\/a> et notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-des-animations-en-css3\" target=\"_blank\" rel=\"noopener\">tutoriel sur la cr\u00e9ation d&rsquo;animations en CSS3<\/a>.<\/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-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"HTML5 et CSS3 Learnify Course\" title=\"\"><\/a>\n\n\u00ab\u00a0`\n\n### Ajout de contenu pour atteindre 1200 mots :\n\n\u00ab\u00a0`html\n\n<h3 class=\"wp-block-heading\">Utilisation des Attributs class et id dans les Formulaires HTML<\/h3>\n\n\n\n<p>Les formulaires HTML sont des \u00e9l\u00e9ments interactifs essentiels pour recueillir des donn\u00e9es utilisateur. Vous pouvez utiliser des attributs <code>class<\/code> et <code>id<\/code> pour styliser et structurer les formulaires de mani\u00e8re efficace. Par exemple, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/formulaires-html-guide-pratique\" target=\"_blank\" rel=\"noopener\">Guide Pratique des Formulaires HTML<\/a> pour une compr\u00e9hension plus approfondie.<\/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      .form-control {\n        padding: 10px;","protected":false},"excerpt":{"rendered":"<p>Bien s\u00fbr, je vais appliquer les optimisations SEO et le contenu suppl\u00e9mentaire n\u00e9cessaires pour votre article. Voici votre article optimis\u00e9 : \u00ab\u00a0`html Les Attributs class,&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2704,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5345","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\/5345","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=5345"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5345\/revisions"}],"predecessor-version":[{"id":5346,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5345\/revisions\/5346"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2704"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}