# Selecting Elements
When we target something using jQuery, it selects every element on the page that matches that selector.
***
## Selecting by class name
Class names in Webflow should not contain spaces, capital letters, or start with a number.
{% code overflow="wrap" %}
```javascript
$(".class-name")
```
{% endcode %}
### Selecting by class name & combo class
Only selects hero-card elements that have a combo class of is-featured
```javascript
$(".hero-card.is-featured")
```
### Selecting an element inside of another element
Only selects dark-card elements that are inside of the hero-grid
```javascript
$(".hero-grid .dark-card")
```
***
## Selecting by data attribute name & value
{% code overflow="wrap" %}
```javascript
$("[attribute-name='attribute-value']")
```
{% endcode %}
***
## Selecting by html tag
{% code overflow="wrap" %}
```javascript
// H2 Headings
$("h2")
// Paragraphs
$("p")
// Links
$("a")
// Images
$("img")
// Videos
$("video")
// HTML Buttons
$("button")
// Inputs
$("input")
// Text Areas
$("textarea")
// Select Fields
$("select")
```
{% endcode %}
We can target any element by its html tag. If unsure of the tag name, right click on any element & inspect on the published site to find its tag.
***
## Selecting multiple elements
### Chaining selectors
We can chain together multiple selectors by using commas to select different elements together.
{% code overflow="wrap" %}
```javascript
$(".class-name, h2, [attribute-name='attribute-value'], .another-class")
```
{% endcode %}
### .add() method
We can also use the .add() method to select multiple elements. This is more useful for selecting multiple elements once they're already saved in separate variables.
{% code overflow="wrap" %}
```javascript
$(".class-one").add(".class-two").add(".class-three")
```
{% endcode %}
{% code overflow="wrap" %}
```javascript
let elementOne = $(".class-name");
let elementTwo = $("h2");
elementOne.add(elementTwo).text("Hello");
```
{% endcode %}
