To select every element whose class attribute contains notice, put a period before the class name: .notice. The selector matches <p class='notice'> and <div class='notice urgent'>; a class selector does not require the class to be the element’s only class.
The basic class-selector syntax
A CSS class selector is a full stop (.) immediately followed by a class-name identifier. The HTML class value has no period; the period belongs in the selector.
<p class='notice'>A notice</p>
<div class='notice urgent'>An urgent notice</div>.notice {
color: navy;
}This rule applies to both elements because each has notice among the whitespace-separated tokens in its class attribute. It also applies to any other matching element, so a class selector should not be treated as an automatic unique identifier.
Ways to narrow or broaden a class match
Add an element type
Put the type selector directly before the class selector, with no space. p.notice matches only paragraphs that have the notice class.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
p.notice {
font-weight: bold;
}div.notice would restrict the match to div elements, while .notice remains type-independent.
Require two classes on one element
Chain class selectors without whitespace when both classes must belong to the same element. .notice.urgent matches an element whose class list contains both tokens, regardless of their order in the HTML.
.notice.urgent {
border: 2px solid crimson;
}<div class='urgent notice'>Matches</div>
<div class='notice'>Does not match</div>Select a class inside another class
A space creates a descendant combinator. .notice .urgent finds an element with class urgent anywhere inside an element with class notice; the two classes do not have to be on the same element.
.notice .urgent {
color: red;
}<section class='notice'>
<span class='urgent'>Matches</span>
</section>
<span class='notice urgent'>Does not match this descendant selector</span>Use .notice.urgent for “both classes on this element” and .notice .urgent for “an urgent descendant somewhere inside a notice.”
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Match either class
Separate alternatives with a comma. .notice, .urgent matches elements having either class (or both). Each selector in the list is evaluated independently.
.notice, .urgent {
padding: 0.75rem;
}Pattern comparison
| Selector | What must match | Where the classes are |
|---|---|---|
.notice |
The element has the notice class |
One class on the element |
p.notice |
The element is a paragraph and has notice |
One class on the element |
.notice.urgent |
The element has both classes | Both on the same element |
.notice .urgent |
An urgent element is inside a notice element |
Different elements, in a descendant relationship |
.notice, .urgent |
The element has notice or urgent |
Either alternative; both also qualify |
Complete example
The following page demonstrates all four common forms. The class values in HTML are plain names; the periods appear only in CSS.
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Class selector example</title>
<style>
.notice { background: #eef; }
p.notice { font-weight: bold; }
.notice.urgent { border-left: 4px solid crimson; }
.notice .urgent { color: crimson; }
.notice, .urgent { padding: 0.75rem; }
</style>
</head>
<body>
<p class='notice'>A bold notice.</p>
<div class='notice urgent'>A notice with both classes.</div>
<section class='notice'>
<span class='urgent'>An urgent descendant.</span>
</section>
</body>
</html>Class names that need escaping
The identifier after . must be valid CSS identifier syntax. If a class value contains characters that are not valid in an unescaped identifier, escape those characters in the selector. For example, a class beginning with a digit cannot be used as a bare selector token; it needs CSS escaping.
<div class='2-column'>Content</div>.32-column {
display: grid;
}In JavaScript strings, backslashes themselves must be escaped, so a selector passed to querySelector may require an additional backslash. Prefer conventional class names made from letters, digits, hyphens and underscores when you control the HTML; it avoids unnecessary escaping in stylesheets and scripts.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsRank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Case sensitivity and class-token matching
In ordinary standards mode, class matching is case-sensitive: .Notice and .notice are different selectors. Quirks mode uses ASCII case-insensitive matching for this comparison, so do not rely on that legacy behavior for a standards-mode page.
<div class='Notice'>Not matched by .notice in standards mode</div>The class attribute is a whitespace-separated list of tokens. A selector checks whether the requested token is present; it does not compare the entire attribute as one string. Thus .notice matches class='notice urgent' but does not match a class token such as notices.
Why a matching rule may appear not to work
The selector contains HTML attribute syntax
For <div class='notice'>, write .notice, not class='notice'. The latter is not the class-selector syntax.
There is an unintended space
.card.active requires both classes on one element. .card .active requires an active descendant. Inspect the DOM and choose the form that reflects the intended relationship.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The class spelling or capitalization differs
Check spelling, hyphens, underscores and capitalization in both the HTML and stylesheet. A class named notice-box is not selected by .notice_box or .Notice-box in ordinary standards mode.
Another declaration wins in the cascade
Finding the element is only the first step. When declarations compete, specificity participates in the cascade along with source order and other cascade rules. A later class rule does not automatically override a competing declaration with stronger specificity.
/* This may lose to a more specific rule such as .panel .notice */
.notice { color: navy; }
/* Narrow the context only when that relationship is intentional */
.panel .notice { color: black; }Use browser developer tools to inspect the matched rules and the crossed-out declaration. Prefer the smallest selector that expresses the component’s structure rather than adding arbitrary IDs or repeated classes.
The element is not in the document you are viewing
Check that the stylesheet is loaded, that the element has been rendered, and that the class is on the element you intended. A selector cannot style an element that is absent from the current document.
Best Value
Using class selectors from JavaScript
The same CSS selector syntax can be passed to DOM methods such as querySelector and querySelectorAll. These methods are useful when a script needs to read or update matching elements; they do not change CSS cascade behavior.
const firstNotice = document.querySelector('.notice');
const allNotices = document.querySelectorAll('.notice');
const urgentNotices = document.querySelectorAll('.notice.urgent');
const urgentInsideNotice = document.querySelectorAll('.notice .urgent');querySelector returns the first match, while querySelectorAll returns all matches. If the class name is not a valid unescaped CSS identifier, use the appropriate CSS escape sequence (and account for JavaScript string escaping) before passing it to either method.
Inspect and test a selector in the browser
- Open the page and launch developer tools.
- In the Elements or Inspector panel, locate the element and read its exact
classattribute. - Try a narrow selector such as
p.noticein the Styles pane, then broaden it to.noticeif the element type was too restrictive. - For a relationship problem, compare
.notice.urgentwith.notice .urgent; the first requires one element with two classes, while the second requires a descendant. - If the rule is listed but crossed out, inspect specificity and competing declarations instead of changing the class name.
Or skip the browser setup
If your goal is to obtain a clean visual of a page or a component while documenting selector work, ScreenshotNeo can capture the URL through one request. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each cleanup step can be turned off. Only clean shots are billed, while bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and the response reports the page verdict and billing result in X-Page-Verdict and X-Billed headers.
Use the API documentation at https://screenshotneo.com/docs/ for all options, including full-page capture, element selection by CSS selector, custom CSS and JavaScript, waits, hidden selectors, device presets, retina scale, PDF output, blocking rules, cookies and headers, caching, signed links, asynchronous jobs, bulk capture and webhooks.
Free tools Windows power users keep installed
One-click scans. No signup required.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots, and every feature is available on every plan. Create a free ScreenshotNeo account to try it.
Practical selector checklist
- Start with a period:
.name. - Put an element type directly before it when needed:
button.name. - Chain classes with no space for one element:
.name.active. - Use a space for a descendant relationship:
.parent .child. - Use commas for alternatives:
.name, .active. - Keep class spelling and capitalization consistent.
- Escape class values that are not valid CSS identifiers.
- When a match exists but styles do not apply, inspect competing declarations and specificity.
Frequently Asked Questions
Can one element have several class selectors at the same time?
Yes. An element can contain multiple whitespace-separated class tokens, and a chained selector such as .card.featured.sale requires all three tokens on that same element.
Does a class selector select only one element?
No. It matches every element containing that class token. Use an element type, a parent relationship or another class when the match needs to be narrower.
What does the period in .notice represent?
It is CSS selector syntax indicating a class selector; it is not part of the HTML class value itself.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
