1.5 KiB
1.5 KiB
id | title | challengeType | videoUrl | forumTopicId | dashedName |
---|---|---|---|---|---|
bad87fee1348bd9aedf08756 | Prioriza un estilo por sobre otro | 0 | https://scrimba.com/c/cZ8wnHv | 18258 | prioritize-one-style-over-another |
--description--
A veces los elementos HTML reciben múltiples estilos que entran en conflicto entre sí.
Por ejemplo, tu elemento h1
no puede ser verde y rosado al mismo tiempo.
Veamos qué ocurre cuando creamos una clase que hace que el texto sea rosado ("pink"), y luego se la aplicamos a un elemento. ¿Sobreescribirá nuestra clase la prioridad CSS color: green;
del elemento body
?
--instructions--
Crea una clase CSS adicional llamada pink-text
que asigne a un elemento el color rosado ("pink").
Asigna a tu elemento h1
la clase pink-text
.
--hints--
Tu elemento h1
debe incluir la clase pink-text
.
assert($('h1').hasClass('pink-text'));
Tu <style>
debería tener una clase CSS pink-text
que cambie su color
.
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));
Tu elemento h1
debe ser de color rosado ("pink").
assert($('h1').css('color') === 'rgb(255, 192, 203)');
--seed--
--seed-contents--
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
</style>
<h1>Hello World!</h1>
--solutions--
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.pink-text {
color: pink;
}
</style>
<h1 class="pink-text">Hello World!</h1>