CSS Selectors
CSSSelectors tell CSS which HTML elements to style. There are many types:
- Element —
p { }styles all paragraphs - Class —
.box { }styles elements with class="box" - ID —
#header { }styles the element with id="header" - Universal —
* { }styles everything
Classes are the most commonly used selector in real projects.
/* Element selector */
h1 { color: red; }
/* Class selector (most used!) */
.highlight {
background: yellow;
padding: 4px 8px;
}
/* ID selector */
#main-title {
font-size: 2.5rem;
font-weight: bold;
}
/* Multiple selectors */
h1, h2, h3 {
font-family: Arial, sans-serif;
}Red Heading (element)
Highlighted text (class)
Big Title (ID)
Interview Questions — CSS Selectors
5 questions commonly asked in interviews
CSS selectors are patterns used to select HTML elements for styling.
An element selector targets HTML tags directly, such as p, h1, or div.
A class selector targets elements using a class name and starts with a dot, like .box.
An ID selector targets a unique element using #, such as #header.
Specificity decides which CSS rule has higher priority when multiple rules target the same element.
Frequently Asked Questions
Common doubts about CSS Selectors
Yes, one HTML element can have multiple classes separated by spaces.
Classes are better for reusable styling. IDs should be used for unique elements.
The * selector selects all elements on the page.
Yes, descendant selectors can target elements inside other elements.
In HTML, class and ID names are generally case-sensitive in CSS matching.
Test Your Knowledge
5 questions · Earn 50 XP
More on CSS Selectors
Cheatsheet, tips, resources & what to learn next
Quick Cheatsheet
p { color: red; }.box { padding: 20px; }#header { background: blue; }* { box-sizing: border-box; }.card p { font-size: 16px; }Pro Tips
Use classes for reusable design.
Avoid using too many ID selectors for styling.
Keep selector names meaningful.
Avoid very long nested selectors.
Use universal selector carefully because it affects all elements.