Type selector
Targets every element of that type. Example: p. Use carefully.
Platform under construction
CSS Selectors
Selectors are how CSS finds HTML. Learn to choose elements without making your stylesheet fragile or overly specific.
.pricing-card--featured {
border-color: #8cffc1;
}
CSS Basics
Selectors should target the right elements with the least drama.
A selector tells the browser which elements a rule applies to. Simple selectors include element names, classes, IDs and attributes.
Selectors can also describe relationships: a link inside a nav, a paragraph directly after a heading or a button in hover state.
The beginner mistake is making selectors too broad or too specific. Professional CSS uses selectors that are clear, reusable and easy to override when needed.
Class selector
Targets reusable styling hooks. Example: .card. This is the workhorse.
ID selector
Targets one unique id. Useful for anchors, risky for reusable styling.
Pseudo-class
Targets state or position. Example: :hover, :focus-visible, :first-child.
Visual model
Make the invisible browser work visible.
CSS becomes easier when you can see the parts: what is selected, what is declared, what the browser loads and what the final interface receives.
.feature-card > h2
Find elements with this class.
Only direct children, not every nested descendant.
Target heading elements inside that component.
Apply the style to matched headings.
Examples
Good CSS is readable, intentional and easy to change.
Clear component selectors
.pricing-card {
padding: 2rem;
border-radius: 1.5rem;
}
.pricing-card__title {
font-size: 2rem;
}
.pricing-card:hover {
transform: translateY(-2px);
}
Fragile selector chain
body main section div:nth-child(2) article h2 span {
color: red;
}
#pricing .card .content .header .title {
font-size: 2rem;
}
Rules that matter
Use these rules before memorizing more properties.
Beginners often try to learn CSS by collecting declarations. That is backwards. Learn the decisions first, then the properties become much easier to remember.
Prefer classes for styling
Classes are reusable and do not depend too much on document structure.
Keep selectors short
Long selector chains break when markup changes.
Use IDs carefully
IDs are very specific and can make overrides harder.
Avoid styling every element globally
A broad selector such as button or a can be fine in base CSS, but dangerous inside random pages.
Use state selectors intentionally
:hover and :focus-visible should make interaction clearer, not only prettier.
Name by purpose
A class such as .alert is stronger than .red-box because purpose survives redesign.
Production thinking
CSS quality shows up in trust, accessibility and speed of change.
Why does this matter?
Selectors decide how maintainable CSS feels. A good selector is easy to find, easy to understand and easy to change without starting a fight with specificity.
Accessibility
State selectors should include keyboard states. If you style :hover, often you should also style :focus-visible.
Production note
Production CSS works best with a predictable naming strategy. Classes should be meaningful and selectors should avoid unnecessary depth.
SEO note
Selectors do not directly affect SEO, but they control the readability and usability of content that visitors and search engines discover.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Change only the featured card by editing .pricing-card--featured.
- Add a :hover style and then add the same idea for :focus-within.
- Try replacing a class selector with a long descendant selector, then compare readability.
Practice assignment
Do this before moving to the next lesson.
- Write one type selector, one class selector and one pseudo-class selector.
- Create a component with at least two class names.
- Explain why your selector is not too broad or too specific.
Try it yourself
Target the right card with selectors
Self-check
Before you continue, prove that you understand CSS Selectors.
Do not only read the lesson. Answer these questions out loud or write the answers in your own notes. CSS becomes real when you can explain what the browser is doing.
- Can you explain what a selector does?
- Can you tell when a class selector is better than an ID selector?
- Can you identify a selector that is too specific?
- Can you use :hover and :focus-visible appropriately?
- Can you name classes by purpose instead of appearance?
Senior audit upgrade
Modern selectors help, but specificity still matters.
Selectors such as :is(), :where(), :not() and :has() are powerful. They should make CSS clearer, not turn selectors into puzzles.
:where()
:where() always has zero specificity. It is useful for defaults that should stay easy to override.
:is(), :not(), :has()
These take specificity from the most specific selector inside their argument list.
Pseudo-elements
Use ::before and ::after for decorative generated content, not for meaningful text users need.
:where(article, section) h2 { margin-block-start: 2rem; }
.card:is(:hover, :focus-within) { border-color: var(--accent); }
.form:has(:invalid) { --border: var(--danger); }