SyntaxShelf

Css selector

2 snippets across 2 stacks - HTML & CSS, JavaScript

Also written as CSS selector

HCHTML & CSS

Element, Class & ID Selectors

HC · CSS Selectors
Syntax
element { }
.class { }
#id { }
Example
p {
  line-height: 1.6;
}

.alert {
  padding: 12px 16px;
  border-radius: 6px;
}

#main-header {
  position: sticky;
  top: 0;
}

Note Prefer classes over IDs for styling since IDs have much higher specificity and cannot be reused. IDs are fine for JavaScript hooks and anchor targets.

JSJavaScript

Selecting Elements

JS · DOM Manipulation
Syntax
document.querySelector(selector)
document.querySelectorAll(selector)
document.getElementById(id)
Example
const header = document.querySelector("h1");
const buttons = document.querySelectorAll(".btn");
const main = document.getElementById("main-content");

// querySelectorAll returns a static NodeList
buttons.forEach(btn => {
  console.log(btn.textContent);
});

Note querySelector returns the first match or null. querySelectorAll returns a static NodeList (does not auto-update). Use Array.from() if you need full array methods.

Frequently asked questions

How does HTML & CSS handle css selector?
This task is covered in 2 stacks on this page: HTML & CSS, JavaScript. The "Element, Class & ID Selectors" snippet in HTML & CSS uses `element { }`.
Which code does the HTML & CSS example use?
The "Element, Class & ID Selectors" snippet uses `element { }`, from the CSS Selectors section of the HTML & CSS cheat sheet.
Which stacks cover "css selector" on this page?
HTML & CSS, JavaScript. Together they hold 2 copy-ready snippets for this task.
Is there anything to watch out for?
Yes. For "Element, Class & ID Selectors": Prefer classes over IDs for styling since IDs have much higher specificity and cannot be reused. IDs are fine for JavaScript hooks and anchor targets.

Browse all tasks by intent