---
id: bad87fee1348bd8aedf06756
title: Override Class Declarations by Styling ID Attributes
challengeType: 0
videoUrl: ''
localeTitle: Substituir Declarações de Classe por Atributos de ID de Estilo
---
## Description
Acabamos de provar que os navegadores lêem CSS de cima para baixo. Isso significa que, no caso de um conflito, o navegador usará a última declaração CSS. Mas ainda não terminamos. Existem outras maneiras de substituir o CSS. Você se lembra de atributos id? Vamos substituir suas classes de blue-text
pink-text
blue-text
e tornar seu elemento h1
laranja, dando um id ao elemento h1
e, em seguida, estilizando esse id.
## Instructions
Dê ao seu elemento h1
o atributo id
do orange-text
. Lembre-se, os estilos de id são assim: <h1 id="orange-text">
Deixe as classes de pink-text
blue-text
pink-text
em seu elemento h1
. Crie uma declaração CSS para o seu ID de orange-text
em seu elemento de style
. Aqui está um exemplo do que isso parece: # brown-text {
cor marrom;
}
Nota: Não importa se você declara este CSS acima ou abaixo da classe pink-text, já que o atributo id sempre terá precedência.
## Tests
```yml
tests:
- text: Seu elemento h1
deve ter a classe pink-text
.
testString: 'assert($("h1").hasClass("pink-text"), "Your h1
element should have the class pink-text
.");'
- text: Seu elemento h1
deve ter a classe blue-text
.
testString: 'assert($("h1").hasClass("blue-text"), "Your h1
element should have the class blue-text
.");'
- text: Dê ao seu elemento h1
o id do orange-text
.
testString: 'assert($("h1").attr("id") === "orange-text", "Give your h1
element the id of orange-text
.");'
- text: Deve haver apenas um elemento h1
.
testString: 'assert(($("h1").length === 1), "There should be only one h1
element.");'
- text: Crie uma declaração CSS para o seu ID de orange-text
testString: 'assert(code.match(/#orange-text\s*{/gi), "Create a CSS declaration for your orange-text
id");'
- text: Não dê ao seu h1
nenhum atributo de style
.
testString: 'assert(!code.match(//gi), "Do not give your h1
any style
attributes.");'
- text: Seu elemento h1
deve ser laranja.
testString: 'assert($("h1").css("color") === "rgb(255, 165, 0)", "Your h1
element should be orange.");'
```
## Challenge Seed
## Solution
```js
// solution required
```