Sabiendo que puede definir propiedades de una identificación/clase como esta
[id^="word-"] Pero, ¿puede dar un paso más y definir el color de fondo en función de la palabra que sigue? Por ejemplo, si llamé a un montón de classes: word-black, word-red, word-green, etc. ¿Podría tener una clase CSS que encuentre la palabra después de "-", es decir. negro, rojo, verde, etc.
Algo como: [class^="word-"] {background-color = parsedClassName}
En mi opinión, eso es imposible de hacer con pur css. Pero con Javascript puedes hacerlo.
Ejemplo 1
const bgs = document.querySelectorAll('.dyn'); const r = document.querySelector(':root'); bgs.forEach(bg => { const c = bg.classList[0].split('-')[1]; bg.style.setProperty('--bg-color', c); }) :root { --bg-color: red; } div[class^="word-"] { background-color: var(--bg-color); color: white; } <div class="word-red dyn">hello</div> <div class="word-green dyn">hello</div> <div class="word-lightgreen dyn">hello</div>ejemplo 2
const bgs = document.querySelectorAll('.dyn'); const r = document.querySelector(':root'); bgs.forEach(bg => { const c = bg.classList[0].split('-')[1]; bg.style.backgroundColor = c; }) :root { --bg-color: red; /* default bg*/ } div[class^="word-"] { background-color: var(--bg-color); color: white; } <div class="word-red dyn">hello</div> <div class="word-green dyn">hello</div> <div class="word-lightgreen dyn">hello</div>La respuesta es sí y no.
Sí. Si está familiarizado con bootstrap , es fácil cambiar el color del texto usando clases css como text-primary, text-danger, text-info. Todo lo que necesita hacer es importar la hoja de estilo de arranque.
No. Cuando alguno de los colores de texto que desea no se incluye desde la hoja de estilo de color de arranque, tenemos que escribir varias clases CSS en hojas de estilo una por una, paso a paso (no debe hacerse en JavaScript ya que no es un caso interactivo).