Below is a clean, SEO-friendly, professional blog article on “How to Use CSS Selectors (with Everyday Examples)” with real UI examples, explanations, visuals, and code output.
CSS selectors are the foundation of styling. They tell the browser which HTML elements to style.
If you master selectors, you master CSS.
This blog explains:
1. Basic selectors
2. Class & ID selectors
3. Attribute selectors
4. Pseudo-classes
5. Pseudo-elements
6.Real-time UI examples
7. Before/after outputs
8. Everyday use cases
1. Universal Selector (*)
Selects every element on the page.
Example
* {
margin: 0;
padding: 0;
}
Output
All default browser spacing is removed.
2. Element Selector (tag)
Selects elements by HTML tag name.
Example
h1 {
color: blue;
}
Output
All <h1> headings become blue.
3. Class Selector (.classname)
Classes are reusable styles.
Example
.title {
color: green;
font-size: 24px;
}
HTML
<h2 class="title">Welcome!</h2>
Output
Welcome! (Green, 24px)
4. ID Selector (#idname)
Used for unique elements — only once per page.
Example
#header {
background: black;
color: white;
}
HTML
<div id="header">My Website</div>
Output
[ My Website ] (Black background, white text)
5. Descendant Selector (parent child)
Selects elements inside another element.
Example
nav a {
color: red;
}
HTML
<nav>
<a>Home</a>
<a>About</a>
</nav>
Output
All links inside <nav> turn red.
6. Child Selector (parent > child)
Selects direct children only.
Example
ul > li {
color: purple;
}
HTML
<ul>
<li>Direct Child</li>
<li>Direct Child</li>
</ul>
Only direct <li> items are styled.
7. Adjacent Sibling (A + B)
Selects the next element after a specific element.
Example
h2 + p {
color: orange;
}
HTML
<h2>Title</h2>
<p>Paragraph right after the title</p>
<p>Another paragraph</p>
Output
Only the first paragraph after the <h2> turns orange.
8. General Sibling (A ~ B)
Selects all siblings after an element.
Example
h2 ~ p {
color: brown;
}
All paragraphs after <h2> turn brown.
9. Attribute Selectors
Example — Select elements with type="email"
input[type="email"] {
border: 2px solid blue;
}
Example — Select links opening in new tab
a[target="_blank"] {
color: red;
}
Output
Email fields and new-tab links get special styling.
10. Pseudo-Class Selectors
These apply styles based on state (hover, focus, active, checked).
:hover — When mouse is over element
button:hover {
background: black;
color: white;
}
:focus — Active input
input:focus {
outline: 2px solid green;
}
:nth-child(n) — Select specific child
ul li:nth-child(2) {
color: red;
}
:checked — Radio/checkbox
input:checked + label {
color: green;
}
11. Pseudo-Element Selectors
Used to style parts of elements.
CSS ::before and ::after Using Image URLs
You can insert an image using content: url("image-url").
Join the conversation! Your thoughts help the community grow.