2.4 KiB
2.4 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
bad87fee1348bd9aedf06756 | Override Class Declarations with Inline Styles | 0 | Anular declaraciones de clase con estilos en línea |
Description
style
CSS. Hay otras formas en que puedes anular CSS. ¿Recuerdas los estilos en línea? Instructions
inline style
para tratar de hacer que nuestro elemento h1
blanco. Recuerde, los estilos de línea se ven así: <h1 style="color: green;">
Deje las clases de pink-text
blue-text
y pink-text
en su elemento h1
. Tests
tests:
- text: Su elemento <code>h1</code> debe tener la clase <code>pink-text</code> .
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
- text: Su elemento <code>h1</code> debe tener la clase <code>blue-text</code> .
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
- text: Su elemento <code>h1</code> debe tener el ID de <code>orange-text</code> .
testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");'
- text: Dale a tu elemento <code>h1</code> un estilo en línea.
testString: 'assert(document.querySelector("h1[style]"), "Give your <code>h1</code> element an inline style.");'
- text: Su elemento <code>h1</code> debe ser blanco.
testString: 'assert($("h1").css("color") === "rgb(255, 255, 255)", "Your <code>h1</code> element should be white.");'
Challenge Seed
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
Solution
// solution required