2018-09-30 23:01:58 +01:00
---
id: bad87fee1348bd9aec908852
title: Create a Class to Target with jQuery Selectors
challengeType: 0
2020-05-21 17:31:25 +02:00
isHidden: false
2019-07-31 11:32:23 -07:00
forumTopicId: 16815
2018-09-30 23:01:58 +01:00
---
## Description
<section id='description'>
Not every class needs to have corresponding CSS. Sometimes we create classes just for the purpose of selecting these elements more easily using jQuery.
Give each of your <code>button</code> elements the class <code>target</code>.
</section>
## Instructions
<section id='instructions'>
</section>
## Tests
<section id='tests'>
```yml
2018-10-04 14:37:37 +01:00
tests:
2019-11-22 04:44:40 -08:00
- text: You should apply the <code>target</code> class to each of your <code>button</code> elements.
2019-07-24 23:53:37 -07:00
testString: assert($(".target").length > 5);
2018-09-30 23:01:58 +01:00
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
</div>
</div>
</div>
</div>
```
</div>
</section>
## Solution
<section id='solution'>
2019-05-02 05:24:38 -04:00
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
<button class="target btn btn-default"></button>
<button class="target btn btn-default"></button>
<button class="target btn btn-default"></button>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<button class="target btn btn-default"></button>
<button class="target btn btn-default"></button>
<button class="target btn btn-default"></button>
</div>
</div>
</div>
</div>
2018-09-30 23:01:58 +01:00
```
2019-07-18 08:24:12 -07:00
2018-09-30 23:01:58 +01:00
</section>