---
id: bad87fee1348bd9aedf08845
title: Use a span to Target Inline Elements
challengeType: 0
videoUrl: ''
localeTitle: Use um intervalo para segmentar elementos in-line
---
## Description
Você pode usar extensões para criar elementos in-line. Lembra quando usamos a classe btn-block para fazer o botão preencher a linha inteira? Isso ilustra a diferença entre um elemento "inline" e um elemento "block". Usando o elemento de span linha, você pode colocar vários elementos na mesma linha e até mesmo estilizar diferentes partes da mesma linha de maneira diferente. Aninhe a palavra "amor" em seu elemento "Coisas que os gatos adoram" abaixo em um elemento de span . Em seguida, span a classe text-danger para tornar o texto vermelho. Veja como você faria isso com o elemento "As 3 principais coisas que os gatos odeiam": <p>Top 3 things cats <span class="text-danger">hate:</span></p>
## Instructions
## Tests
```yml
tests:
- text: Seu elemento span deve estar dentro do seu elemento p .
testString: 'assert($("p span") && $("p span").length > 0, "Your span element should be inside your p element.");'
- text: Seu elemento de span deve ter apenas o texto love .
testString: 'assert($("p span") && $("p span").text().match(/love/i) && !$("p span").text().match(/Things cats/i), "Your span element should have just the text love.");'
- text: Seu elemento span deve ter classe text-danger .
testString: 'assert($("span").hasClass("text-danger"), "Your span element should have class text-danger.");'
- text: Certifique-se de que seu elemento de span tenha uma tag de fechamento.
testString: 'assert(code.match(/<\/span>/g) && code.match(//g).length === code.match(/span element has a closing tag.");'
```
## Challenge Seed