Supongamos que le damos algunas propiedades a todas las etiquetas h1 usando css externo y tenemos que dar una propiedad más (no presente en css) solo a una de las etiquetas h1 con las mismas propiedades restantes en css. Entonces, ¿tengo que escribir un código separado por ¿Dando esa etiqueta una identificación o hay una forma más corta?
dos clases suena como el camino correcto a seguir, incluso mejor que la etiqueta h1 genérica directamente, por ejemplo:
index.html
<div> <h1 class="generic-class">generic</h1> <h1 class="generic-class">generic</h1> <h1 class="generic-class specific-class">specific</h1> </div> style.css
generic-class { color: red } .specific-class { font-weight: 800 }De esta manera, todos ellos son rojos, y el último también es rojo y en negrita.
Otra solución es agregar código css en línea directamente en el atributo de estilo del elemento. En el fragmento a continuación, muestro varias formas de seleccionar qué elemento desea editar con varios selectores y funciones js.
Aunque debe tener en cuenta que es mejor tener solo 1 <h1> en una página web, principalmente para fines de SEO.
// Select h1 by query, for example query below selects the first h1 let h1 = document.querySelector('h1:first-of-type'); h1.style.color = "black"; // Select h1 by id let h1_2 = document.getElementById('h1_to_select'); h1_2.style.color = "blue"; // Select h1 by index let h1_3 = document.getElementsByTagName('h1')[1]; h1_3.style.color = "green"; h1{ font-size:16px; font-family:sans-serif; color:red } <h1>This is a h1 title</h1> <h1>This is a h1 title</h1> <h1>This is a h1 title</h1> <h1 id="h1_to_select">This is a h1 title</h1> <h1>This is a h1 title</h1> <h1>This is a h1 title</h1>