--- id: bad87fee1348bd9aedf08845 title: Use a span to Target Inline Elements challengeType: 0 forumTopicId: 18370 dashedName: use-a-span-to-target-inline-elements --- # --description-- You can use spans to create inline elements. Remember when we used the `btn-block` class to make the button fill the entire row? That illustrates the difference between an "inline" element and a "block" element. By using the inline `span` element, you can put several elements on the same line, and even style different parts of the same line differently. Using a `span` element, nest the word `love` inside the `p` element that currently has the text `Things cats love`. Then give the `span` the class `text-danger` to make the text red. Here's how you would do this for the `p` element that has the text `Top 3 things cats hate`: `
Top 3 things cats hate:
` # --hints-- Your `span` element should be inside your `p` element. ```js assert($('p span') && $('p span').length > 0); ``` Your `span` element should have just the text `love`. ```js assert( $('p span') && $('p span').text().match(/love/i) && !$('p span') .text() .match(/Things cats/i) ); ``` Your `span` element should have class `text-danger`. ```js assert($('span').hasClass('text-danger')); ``` Your `span` element should have a closing tag. ```js assert( code.match(/<\/span>/g) && code.match(//g).length === code.match(/ ``` # --solutions-- ```html ```