Introduction: What Are CSS Selectors?

CSS selectors are patterns used to select and style HTML elements. Without selectors, CSS would be meaningless — they’re the bridge between your styles and your markup.

Whether you’re just starting out or brushing up on advanced concepts, this guide will walk you through all the major types of CSS selectors, including examples and practical tips.

Basic CSS Selectors

These are the most commonly used selectors that every web developer should know.

1. Universal Selector (*)

Targets every element on the page.

* {
  margin: 0;
  padding: 0;
}

2. Type Selector

Selects HTML elements by tag name.

p {
  font-size: 16px;
}

3. Class Selector (.class)

Selects all elements with a specific class.

.button {
  background-color: blue;
}

4. ID Selector (#id)

Selects an element by its ID (must be unique).

#header {
  background-color: black;
}

5. Group Selector (A, B)

Apply the same style to multiple selectors.

h1, h2, h3 {
  font-family: 'Arial', sans-serif;
}

Combinator Selectors

Use combinators to create relationships between elements.

6. Descendant Selector (A B)

Selects B inside of A, at any depth.

nav a {
  color: white;
}

7. Child Selector (A > B)

Only selects direct children.

ul > li {
  list-style: none;
}

8. Adjacent Sibling (A + B)

Selects an element directly after another.

h1 + p {
  margin-top: 0;
}

9. General Sibling (A ~ B)

Selects all siblings that follow.

h2 ~ p {
  color: gray;
}

Attribute Selectors

These let you style elements based on attribute values.

10. Basic Attribute Selector

input[type="text"] {
  border: 1px solid #ccc;
}

11. Partial Match Attribute Selectors

• [attr^="val"] — Starts with
• [attr$="val"] — Ends with
• [attr*="val"] — Contains

a[href^="https"] {
  color: green;
}

Pseudo-classes

Pseudo-classes let you target elements based on state or position.

12. User Interaction States

a:hover {
  color: red;
}
input:focus {
  border-color: blue;
}

13. Structural Pseudo-classes

li:first-child {
  font-weight: bold;
}
li:nth-child(2n) {
  background-color: #f9f9f9;
}

Pseudo-elements

These target parts of elements, like the first line of text.

14. Common Pseudo-elements

p::first-line {
  font-weight: bold;
}
a::after {
  content: ' →';
}

Advanced & Modern Selectors

15. :not()

Negates a selector.

button:not(.primary) {
  opacity: 0.6;
}

16. :is() and :where()

Shorthand for multiple selectors.

:is(h1, h2, h3) {
  margin-bottom: 1rem;
}

17. :has() – The Parent Selector (⚠️ limited browser support)

div:has(img) {
  border: 1px solid #ccc;
}

CSS Selector Best Practices (SEO & Performance Tips)

• Use class selectors instead of IDs for better reusability.
• Minimize deep nesting — it can impact CSS performance and maintainability.
• Avoid overly specific selectors to maintain responsive design flexibility.
• Keep your selectors clean and readable — avoid long, chained selectors like div > ul > li > a.

Real-World Examples

Highlight external links:

a[href^="http"]::after {
  content: "🔗";
}

Style active navigation link:

nav a.active {
  border-bottom: 2px solid currentColor;
}

Conclusion: Master CSS Selectors for Better Styling

CSS selectors are the foundation of modern web design. By mastering both basic and advanced selectors, you gain full control over your UI — whether it’s styling buttons, building responsive layouts, or enhancing user interactivity.