---
id: bad87fee1348bd9aedf08756
title: Prioritize One Style Over Another
challengeType: 0
videoUrl: ''
localeTitle: Priorizar un estilo sobre otro
---
## Description
A veces, sus elementos HTML recibirán múltiples estilos que entren en conflicto entre sí. Por ejemplo, su elemento h1
no puede ser verde y rosa al mismo tiempo. Veamos qué sucede cuando creamos una clase que hace que el texto sea rosa, luego lo aplicamos a un elemento. ¿Nuestra clase anulará el color: green;
del elemento del body
color: green;
Propiedad CSS?
## Instructions
Crea una clase de CSS llamada pink-text
que le da a un elemento el color rosa. Dale a tu elemento h1
la clase de pink-text
.
## 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 <style>
debe tener una clase de CSS de pink-text
que cambie el color
.
testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), "Your <style>
should have a pink-text
CSS class that changes the color
.");'
- text: Tu elemento h1
debe ser rosa.
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your h1
element should be pink.");'
```
## Challenge Seed
## Solution
```js
// solution required
```