How to Use CSS Selectors

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

Example Code

<h2 class="img-heading">Best Heading</h2>

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

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

(Images load using placeholder URLs)

Explanation

• ::before and ::after can display image URLs.

• You cannot put <img> inside them, but you can use:

  content: url("your-image-url");
  

• “via.placeholder.com” is used as a sample image generator.

::first-letter

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

::selection

::selection {
  background: yellow;
}

Product Card Example Using Multiple Selectors

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

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

Output

• Title becomes steelblue

• First line of paragraph is bold

• Button turns green on hover

Complete Selector Comparison Table

Selector Type	Example	Use Case
Universal	*	Reset styling
Element	p	Style all tags
Class	.box	Reusable styles
ID	#header	Unique element
Descendant	div p	All nested elements
Child	div > p	Direct children
Adjacent	h1 + p	First sibling
General sibling	h1 ~ p	All siblings
Attribute	input[type=text]	Form styling
Pseudo-class	a:hover	State changes
Pseudo-element	p::after	Decorative 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.