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.

$(".class-name")

Selecting by class name & combo class

Only selects hero-card elements that have a combo class of is-featured

$(".hero-card.is-featured")

Selecting an element inside of another element

Only selects dark-card elements that are inside of the hero-grid

$(".hero-grid .dark-card")

---

Selecting by data attribute name & value

$("[attribute-name='attribute-value']")

---

Selecting by html tag

// H2 Headings
$("h2")
// Paragraphs
$("p")
// Links
$("a")
// Images
$("img")
// Videos
$("video")
// HTML Buttons
$("button")
// Inputs
$("input")
// Text Areas
$("textarea")
// Select Fields
$("select")

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.

$(".class-name, h2, [attribute-name='attribute-value'], .another-class")

.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.

$(".class-one").add(".class-two").add(".class-three")

let elementOne = $(".class-name");
let elementTwo = $("h2");

elementOne.add(elementTwo).text("Hello");