A CSS selector is a pattern used to target and select HTML elements so you can apply specific styles to them using CSS (Cascading Style Sheets).
Definition:
A CSS selector tells the browser which HTML element(s) the CSS rule should apply to.
1. Universal Selector
*→ Selects all elements
* {
margin: 0;
padding: 0;
}
2. Type Selector (Element Selector)tagname → Selects all elements of the given tag
p {
color: blue;
}
3. Class Selector
.classname→ Selects all elements with a specific class
.box {
border: 1px solid black;
}
4. ID Selector
#idname → Selects an element with a specific ID
header {
background: gray;
}
6. Group Selectorselector1, selector2 → Applies styles to multiple selector
h1, h2, p {
font-family: sans-serif;
}
7. Descendant Selectorparent descendant → Selects all descendants inside the parent
div p {
color: red;
}
8. Child Selectorparent > child → Selects direct children only
ul > li {
list-style: none;
}
9. Pseudo-classes
button:hover {
background: yellow;
}
/* First letter */
p::first-letter {
font-size: 2em;
}
/* Before */
h2::before {
content: “★ “;
}
/* After */
h2::after {
content: ” ✦”;
}
10. Attribute Selectors
/* Has attribute */
input[required] {
border: 2px solid red;
}
/* Exact match */
a[href=”https://example.com”] {
color: green;
}
/* Contains word */
input[placeholder~=”Name”] {
color: blue;
}
/* Starts with */
a[href^=”https”] {
text-decoration: underline;
}
/* Ends with */
img[src$=”.jpg”] {
border-radius: 10px;
}
/* Contains substring / div[class=”box”] {
padding: 10px;
}
1. Power of Targeting
CSS selectors help you control exactly which elements should receive which styles—whether you’re styling a single element, a group, or elements based on their position, state, or attributes.
2. Organized and Scalable Styling
By using selectors wisely (like classes, IDs, and pseudo-classes), you can write clean, reusable, and scalable CSS, especially for large projects.
3. Types of Selectors
They range from basic (element, class, ID) to advanced (attribute, combinators, pseudo-classes/elements), enabling both broad and highly specific styling.
4. Specificity Matters
Understanding selector specificity is crucial—some selectors (like IDs) are more powerful than others (like classes), which affects which style is applied when multiple rules target the same element.
Final Thought:
Mastering CSS selectors is key to mastering CSS itself. The better you are at selecting elements smartly, the more elegant and effective your styling will be.
Summary of CSS Selectors
CSS selectors are patterns used to select and style HTML elements. They form the core of how styles are applied in a web page. Common types of selectors include:
- Basic Selectors: Target elements by name (
h1), class (.menu), or ID (#header). - Group Selectors: Style multiple elements at once (
h1, h2, p). - Combinator Selectors: Select elements based on relationships (descendant, child, sibling).
- Attribute Selectors: Target elements with specific attributes (
input[type="text"]). - Pseudo-classes: Select elements in a specific state (
:hover,:first-child). - Pseudo-elements: Style parts of elements (
::before,::after).
Using selectors properly helps maintain clean, efficient, and scalable CSS code.
Conclusion of CSS Selectors
CSS selectors are essential for targeting HTML elements and applying styles effectively. By mastering different types of selectors, developers can write precise and flexible stylesheets. They not only make the code easier to read and manage but also enhance performance and maintainability. Whether you’re building a simple web page or a complex application, understanding and using CSS selectors is a foundational skill every front-end developer should develop.