{"id":56,"date":"2024-08-27T12:14:35","date_gmt":"2024-08-27T09:14:35","guid":{"rendered":"https:\/\/planeta21vek.ru\/elina732\/isp\/?p=56"},"modified":"2025-11-20T21:31:22","modified_gmt":"2025-11-20T18:31:22","slug":"atribut-class","status":"publish","type":"post","link":"https:\/\/planeta21vek.ru\/elina732\/isp\/2024\/08\/27\/atribut-class\/","title":{"rendered":"Atributo de class global"},"content":{"rendered":"

El atributo de class global es una lista de registros separados por espacios de las clases dependientes del elemento. Las clases permiten la selecci\u00f3n y el acceso a CSS y Javascript mediante selectores de clases o funciones como los m\u00e9todos DOM document.getElementsByClassName. Los desarrolladores utilizan el atributo de class todo el tiempo. No s\u00f3lo facilita el dise\u00f1o, sino que tambi\u00e9n le ayuda a organizar mejor su c\u00f3digo y facilitar su mantenimiento.<\/p>\n

<\/p>\n

\"\"
\n\nEjemplo 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
Se pueden asignar una o m\u00e1s clases a un elemento, separadas por espacios.<\/p>\n
Ejemplo 2<\/strong><\/span><\/p>\n
\r\n<!-- una clase -->\r\n<div class="container">\r\n<!-- ... -->\r\n<\/div>\r\n<!-- Varias clases -->\r\n<div class="container special-box">\r\n<!-- ... -->\r\n<\/div>\r\n<\/pre>\n
Ejemplo 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">Este texto ser\u00e1 resaltado.<\/span>\r\n\r\n<\/pre>\n
Ejemplo 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;click!&#039;);\r\n});\r\n});\r\n\r\n<button class="click">Pr\u00f3ximo<\/button>\r\n<\/pre>\n
Selectores complejos en CSS: en algunos casos, necesitamos aplicar una clase solo a una etiqueta HTML espec\u00edfica, ignorando todas las dem\u00e1s.<\/p>\n
Ejemplo 5<\/strong><\/span><\/p>\n
\r\n\/* S\u00f3lo para elementos <p> con clase special-text *\/\r\np.special-text {\r\ncolor: blue;\r\n}\r\n\r\n<p class="special-text">Este texto ser\u00e1 azul.<\/p>\r\n<div class="special-text">Y este permanecer\u00e1 sin cambios.<\/div>\r\n<\/pre>\n\n","protected":false},"excerpt":{"rendered":"
El atributo de class global es una lista de registros separados por espacios de las clases dependientes del elemento. Las clases permiten la selecci\u00f3n y el acceso a CSS y Javascript mediante selectores de clases o funciones como los m\u00e9todos DOM document.getElementsByClassName. Los desarrolladores utilizan el atributo de class todo el tiempo. No s\u00f3lo facilita el dise\u00f1o, sino que tambi\u00e9n le ayuda a organizar mejor su c\u00f3digo y facilitar su mantenimiento.<\/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-selectores"},"_links":{"self":[{"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/posts\/56","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/comments?post=56"}],"version-history":[{"count":5,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/posts\/56\/revisions"}],"predecessor-version":[{"id":300,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/posts\/56\/revisions\/300"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/media\/57"}],"wp:attachment":[{"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/media?parent=56"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/categories?post=56"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/tags?post=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}