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

CSS
* {
  margin: 0;
  padding: 0;
}

Output

All default browser spacing is removed.

2. Element Selector (tag)

Selects elements by HTML tag name.

Example

CSS
h1 {
  color: blue;
}

Output

All <h1> headings become blue.

3. Class Selector (.classname)

Classes are reusable styles.

Example

CSS
.title {
  color: green;
  font-size: 24px;
}

HTML

HTML / XML
<h2 class="title">Welcome!</h2>

Output

Code
Welcome! (Green, 24px)

4. ID Selector (#idname)

Used for unique elements — only once per page.

Example

CSS
#header {
  background: black;
  color: white;
}

HTML

HTML / XML
<div id="header">My Website</div>

Output

Code
[ My Website ]  (Black background, white text)

5. Descendant Selector (parent child)

Selects elements inside another element.

Example

CSS
nav a {
  color: red;
}

HTML

HTML / XML
<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

CSS
ul > li {
  color: purple;
}

HTML

HTML / XML
<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

CSS
h2 + p {
  color: orange;
}

HTML

HTML / XML
<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

CSS
h2 ~ p {
  color: brown;
}

All paragraphs after <h2> turn brown.

9. Attribute Selectors

Example — Select elements with type="email"

CSS
input[type="email"] {
  border: 2px solid blue;
}

Example — Select links opening in new tab

CSS
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

CSS
button:hover {
  background: black;
  color: white;
}

:focus — Active input

CSS
input:focus {
  outline: 2px solid green;
}

:nth-child(n) — Select specific child

CSS
ul li:nth-child(2) {
  color: red;
}

:checked — Radio/checkbox

CSS
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").

Example Code

HTML / XML
<h2 class="img-heading">Best Heading</h2>
CSS
.img-heading::before {
  content: url("https://via.placeholder.com/20x20/ff0000/ffffff?text=B");
  margin-right: 8px;
}

.img-heading::after {
  content: url("https://via.placeholder.com/20x20/0000ff/ffffff?text=A");
  margin-left: 8px;
}

Output (Representation)

Code
[Red Box Image]  Best Heading  [Blue Box Image]

(Images load using placeholder URLs)

Explanation

::first-letter

CSS
p::first-letter {
  font-size: 40px;
  color: red;
}

::selection

CSS
::selection {
  background: yellow;
}

Product Card Example Using Multiple Selectors

CSS

CSS
.card {
  border: 1px solid #ddd;
  padding: 20px;
  width: 250px;
}

.card h3 {
  color: steelblue;
}

.card button:hover {
  background: green;
  color: white;
}

.card p::first-line {
  font-weight: bold;
}

HTML

HTML / XML
<div class="card">
  <h3>Smartphone</h3>
  <p>A great phone with amazing features.</p>
  <button>Buy Now</button>
</div>

Output

Complete Selector Comparison Table

Selector TypeExampleUse Case
Universal*Reset styling
ElementpStyle all tags
Class.boxReusable styles
ID#headerUnique element
Descendantdiv pAll nested elements
Childdiv > pDirect children
Adjacenth1 + pFirst sibling
General siblingh1 ~ pAll siblings
Attributeinput[type=text]Form styling
Pseudo-classa:hoverState changes
Pseudo-elementp::afterDecorative text

Conclusion

CSS selectors allow you to target any element or state on your webpage.
By understanding selectors, you gain full control over:

1. Layout

2. UI behavior

3. Interactions

4. Component styling

Mastering CSS starts with mastering selectors.