{"id":56,"date":"2024-08-27T12:14:35","date_gmt":"2024-08-27T09:14:35","guid":{"rendered":"https:\/\/planeta21vek.ru\/elina732\/eng\/?p=56"},"modified":"2025-11-20T20:53:39","modified_gmt":"2025-11-20T17:53:39","slug":"atribut-class","status":"publish","type":"post","link":"https:\/\/planeta21vek.ru\/elina732\/eng\/2024\/08\/27\/atribut-class\/","title":{"rendered":"Global class attribute"},"content":{"rendered":"

The global class attribute is a space-separated list of case-dependent classes of an element. Classes allow CSS and Javascript to select and access them using class selectors or functions such as the DOM document.getElementsByClassName methods. Developers use the class attribute all the time. Not only does it make styling easier, but it also helps keep your code organized and maintainable.<\/p>\n

<\/p>\n

\"\"
\n\n

Example 1<\/strong><\/span><\/p>\n

\r\n<p class="note editorial">Above point sounds a bit obvious. Remove\/rewrite?<\/p>\r\n<p>Narrator: I must warn you now folks that this beginning is very exciting.<\/p>\r\n<p class="note">[Lights go up and wind blows; Caspian enters stage right]<\/p>\r\n<\/pre>\n
One element can be assigned one or more classes, separated by spaces.<\/p>\n
Example 2<\/strong><\/span><\/p>\n
\r\n<!-- One class -->\r\n<div class="container">\r\n<!-- ... -->\r\n<\/div>\r\n<!-- Multiple classes -->\r\n<div class="container special-box">\r\n<!-- ... -->\r\n<\/div>\r\n<\/pre>\n
Example 3<\/strong><\/span><\/p>\n
\r\n.highlighted-text {\r\nbackground-color: yellow;\r\nfont-size: 18px;\r\n}\r\n<span class="highlighted-text">This text will be highlighted.<\/span>\r\n\r\n<\/pre>\n
Example 4<\/strong><\/span><\/p>\n
\r\nconst elements = document.querySelectorAll(&#039;.clickable&#039;);\r\nelements.forEach(element => {\r\nelement.addEventListener(&#039;click&#039;, () => {\r\nalert(&#039;\u041a\u043b\u0438\u043a!&#039;);\r\n});\r\n});\r\n\r\n<button class="click">Next<\/button>\r\n<\/pre>\n
Complex Selectors in CSS: In some cases, we need to apply a class only to a specific HTML tag, ignoring all others.<\/p>\n
Example 5<\/strong><\/span><\/p>\n
\r\n\/* Only for <p> elements with class special-text *\/\r\np.special-text {\r\ncolor: blue;\r\n}\r\n\r\n<p class="special-text">This text will be blue.<\/p>\r\n<div class="special-text">And this one will remain unchanged.<\/div>\r\n<\/pre>\n\n","protected":false},"excerpt":{"rendered":"
The global class attribute is a space-separated list of case-dependent classes of an element. Classes allow CSS and Javascript to select and access them using class selectors or functions such as the DOM document.getElementsByClassName methods. Developers use the class attribute all the time. Not only does it make styling easier, but it also helps keep your code organized and maintainable.<\/p>\n","protected":false},"author":1,"featured_media":57,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,7],"tags":[15,16,13,43],"class_list":{"0":"post-56","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-htmlverstka","8":"category-programmirovanie","9":"tag-class","10":"tag-css","11":"tag-html","12":"tag-selectors"},"_links":{"self":[{"href":"https:\/\/planeta21vek.ru\/elina732\/eng\/wp-json\/wp\/v2\/posts\/56","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planeta21vek.ru\/elina732\/eng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planeta21vek.ru\/elina732\/eng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/eng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/eng\/wp-json\/wp\/v2\/comments?post=56"}],"version-history":[{"count":6,"href":"https:\/\/planeta21vek.ru\/elina732\/eng\/wp-json\/wp\/v2\/posts\/56\/revisions"}],"predecessor-version":[{"id":310,"href":"https:\/\/planeta21vek.ru\/elina732\/eng\/wp-json\/wp\/v2\/posts\/56\/revisions\/310"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/eng\/wp-json\/wp\/v2\/media\/57"}],"wp:attachment":[{"href":"https:\/\/planeta21vek.ru\/elina732\/eng\/wp-json\/wp\/v2\/media?parent=56"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/eng\/wp-json\/wp\/v2\/categories?post=56"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/eng\/wp-json\/wp\/v2\/tags?post=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}