Atributo de class global – Planeta 21 vek

El atributo de class global es una lista de registros separados por espacios de las clases dependientes del elemento. Las clases permiten la selección y el acceso a CSS y Javascript mediante selectores de clases o funciones como los métodos DOM document.getElementsByClassName. Los desarrolladores utilizan el atributo de class todo el tiempo. No sólo facilita el diseño, sino que también le ayuda a organizar mejor su código y facilitar su mantenimiento.

Ver también...

Un nuevo método para observar átomos individuales confirma una teoría mecánica cuántica centenaria

Hasta el 10% de los elementos pesados del Universo, como el oro, el platino y otros, se crearon en la explosión de un magnetar gigante

Un poco sobre los gatos: la historia de la domesticación y datos interesantes sobre el comportamiento de las mascotas

Ejemplo 1

<p class="note editorial">Above point sounds a bit obvious. Remove/rewrite?</p>
<p>Narrator: I must warn you now folks that this beginning is very exciting.</p>
<p class="note">[Lights go up and wind blows; Caspian enters stage right]</p>

Se pueden asignar una o más clases a un elemento, separadas por espacios.

Ejemplo 2

<!-- una clase -->
<div class="container">
<!-- ... -->
</div>
<!-- Varias clases -->
<div class="container special-box">
<!-- ... -->
</div>

Ejemplo 3

.highlighted-text {
background-color: yellow;
font-size: 18px;
}
<span class="highlighted-text">Este texto será resaltado.</span>

Ejemplo 4

const elements = document.querySelectorAll(&#039;.clickable&#039;);
elements.forEach(element => {
element.addEventListener(&#039;click&#039;, () => {
alert(&#039;click!&#039;);
});
});

<button class="click">Próximo</button>

Selectores complejos en CSS: en algunos casos, necesitamos aplicar una clase solo a una etiqueta HTML específica, ignorando todas las demás.

Ejemplo 5

/* Sólo para elementos <p> con clase special-text */
p.special-text {
color: blue;
}

<p class="special-text">Este texto será azul.</p>
<div class="special-text">Y este permanecerá sin cambios.</div>

class css html selectores

Related Posts