What a selector does
A CSS rule has two main parts: a selector that identifies elements and a declaration block that describes their appearance. In the rule .notice { color: navy; }, .notice is the selector. The browser looks for elements whose class attribute includes notice, then applies the color declaration to those elements. Selectors let you style a page without adding presentation instructions to every HTML tag.
To follow along, you need a text editor and a browser with developer tools. No library or build tool is required, and the examples use ordinary HTML and CSS rather than a framework-specific version. Make a small HTML page with a heading, two paragraphs, and a list. You can put CSS inside a style element in the document’s head while practicing, then move it to a separate stylesheet later.
Select by element, class, or ID
An element selector uses a tag name. For example, p { line-height: 1.5; } targets every p element in the document. It is useful for a broad default, but it may be too broad when one paragraph needs a different treatment. A class adds a reusable label: write class="notice" on an element in HTML and select it with .notice in CSS. The dot belongs in the CSS selector, not in the HTML attribute.
An element can have several classes separated by spaces, such as class="notice important". The selector .important matches it, and .notice.important matches elements that have both classes. By contrast, .notice .important, with a space, looks for an element with class important inside an ancestor with class notice. That small difference changes what the rule can reach.
An ID identifies a particular element within a page. Write id="page-title" in HTML and select it with #page-title in CSS. Keep each ID value unique within the document. Classes are usually a better fit for styles you expect to reuse, such as buttons or cards; IDs can be useful for a unique page region or an in-page link target. Avoid choosing an ID solely because you want a stronger CSS rule.
Use relationships to narrow the target
Selectors can describe where an element sits in the HTML structure. A space means “descendant”: .card p matches any p nested anywhere inside an element with class card. The greater-than sign means “direct child”: .card > p matches a p only when card is its immediate parent. If a card contains a div that contains a p, the descendant selector matches that paragraph, but the child selector does not.
Sibling selectors work between elements that share a parent. The plus sign targets the next sibling: h2 + p matches a p immediately after an h2. The tilde targets later siblings, even if other siblings come between them: h2 ~ p matches later p elements under the same parent. Neither selector searches inside the heading or inside a separate container. These rules can be handy for styling an introductory paragraph after a heading without giving every such paragraph a class.
Choose the simplest relationship that expresses your intent. A selector such as .article .note can remain useful if a note may move within an article. A long chain of tag names and child selectors is more fragile: wrapping content in one extra div can stop it matching. If the element has a clear role that should keep its style wherever it moves, a class may be easier to maintain.
Understand matching and competing rules
A selector must match the HTML as written. For example, .menu > a matches links that are direct children of an element with class menu; it does not match links nested inside list items. If a rule seems to do nothing, first check the class or ID spelling, then inspect the element’s actual parents and siblings. Spaces and punctuation in CSS selectors matter.
More than one rule can match the same element. CSS resolves competing declarations through the cascade, which considers factors including rule origin, importance, specificity, and source order. For ordinary rules in the same stylesheet, an ID selector is more specific than a class selector, and a class selector is more specific than an element selector. When competing selectors have equal specificity, the later rule usually wins. This is a reason to prefer clear classes over escalating to IDs or adding unnecessary selector parts.
Try a small targeting exercise
Create a section with class="card" containing an h2, a p with class="summary", and a div containing another p. Start with .card p { color: navy; } and observe that both paragraphs change color. Replace it with .card > p { color: navy; } and the nested paragraph should no longer match. Then try .card h2 + p { font-weight: bold; } to target the summary because it immediately follows the heading.
Open your browser’s developer tools and inspect each paragraph. The Styles panel can show which rules match and which declarations are overridden. If the result surprises you, compare the selector with the HTML tree one relationship at a time. That habit is more reliable than adding a more specific rule until the page happens to look right.
