---
id: bad87fee1348bd8aedf06756
title: Override Class Declarations by Styling ID Attributes
localeTitle: Anular declaraciones de clase por atributos de ID de estilo
challengeType: 0
videoUrl: ''
---
## Description
Acabamos de demostrar que los navegadores leen CSS de arriba a abajo. Eso significa que, en caso de conflicto, el navegador utilizará la declaración de CSS que haya sido la última.
Pero aún no hemos terminado. Hay otras formas en que puedes anular CSS. ¿Recuerdas los atributos de identificación?
Anulemos sus clases de blue-text
pink-text
blue-text
, y hagamos que su elemento h1
naranja, asignando una identificación al elemento h1
y luego diseñando un estilo.
## Instructions
Dale a tu elemento h1
el atributo id
del orange-text
. Recuerde, los estilos de identificación se ven así:
<h1 id="orange-text">
Deje las clases de pink-text
blue-text
pink-text
en su elemento h1
.
Cree una declaración CSS para su ID de orange-text
en su elemento de style
. Aquí hay un ejemplo de cómo se ve esto:
#brown-text {
color: brown;
}
Nota: No importa si declara este CSS por encima o por debajo de la clase de texto rosado, ya que el atributo id siempre tendrá prioridad.
## Tests
```yml
tests:
- text: Su elemento h1
debe tener la clase pink-text
.
testString: 'assert($("h1").hasClass("pink-text"), "Your h1
element should have the class pink-text
.");'
- text: Su elemento h1
debe tener la clase blue-text
.
testString: 'assert($("h1").hasClass("blue-text"), "Your h1
element should have the class blue-text
.");'
- text: Dale a tu elemento h1
el id del orange-text
.
testString: 'assert($("h1").attr("id") === "orange-text", "Give your h1
element the id of orange-text
.");'
- text: Debería haber un solo elemento h1
.
testString: 'assert(($("h1").length === 1), "There should be only one h1
element.");'
- text: Crea una declaración CSS para tu ID de orange-text
testString: 'assert(code.match(/#orange-text\s*{/gi), "Create a CSS declaration for your orange-text
id");'
- text: No le des a su h1
ningún style
atributos.
testString: 'assert(!code.match(//gi), "Do not give your h1
any style
attributes.");'
- text: Su elemento h1
debe ser naranja.
testString: 'assert($("h1").css("color") === "rgb(255, 165, 0)", "Your h1
element should be orange.");'
```
## Challenge Seed
## Solution
```js
// solution required
```