🎯 CSS Selectors: The Ultimate Guide

CSS selectors are the foundation of styling in web development. They allow you to target HTML elements and apply styles to them. Let’s explore the major types of selectors and how to use them effectively.

🧱 1. Basic Selectors

These are the most commonly used selectors in CSS.

🔹 Element Selector

Targets all elements of a specific type.

p {
  color: blue;
  font-size: 16px;
}

✅ All <p> tags will be styled with blue text.

🔹 Class Selector (.class)

.box {
  background-color: lightgray;
  padding: 20px;
}

✅ Any element with class="box" will get the styles.

🔹 ID Selector (#id)

#header {
  font-size: 24px;
  text-align: center;
}

✅ Only the element with id="header" will be affected.

🧩 2. Group & Universal Selectors

🔹 Universal Selector (*)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

✅ Useful for resetting default browser styles.

🔹 Group Selector (element1, element2)

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

✅ All headings will share the same style.

🔗 3. Combinators

Combinators define relationships between elements.

🔹 Descendant Selector (space)

nav a {
  color: navy;
}

✅ All <a> tags inside <nav> will be styled.

🔹 Child Selector (>)

ul > li {
  list-style-type: square;
}

✅ Only direct <li> children of <ul> will be affected.

🔹 Adjacent Sibling (+)

h2 + p {
  font-style: italic;
}

✅ Only the first <p> after an <h2> will be styled.

🔹 General Sibling (~)

h2 ~ p {
  color: gray;
}

✅ All <p> elements after an <h2> will be affected.

🧪 4. Attribute Selectors

These selectors target elements based on their attributes.

🔹 Exact Match

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

✅ Only <input> elements with type="text" will be styled.

🔹 Starts With (^=)

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

✅ All links that start with https will be green.

🔹 Ends With ($=)

img[src$=".jpg"] {
  border-radius: 10px;
}

✅ All .jpg images will have rounded corners.

🔹 Contains (*=)

div[class*="card"] {
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

✅ Any class that contains "card" will get a shadow.

💻 Using These in VS Code

🧾 HTML Example

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 id="main-title">Welcome</h1>
  <div class="box card">
    <p>This is a styled box.</p>
  </div>
  <nav>
    <a href="https://example.com">Home</a>
    <a href="http://example.com">About</a>
  </nav>
  <input type="text" placeholder="Enter name">
</body>
</html>

🎨 CSS Example (style.css)

/* Basic Selectors */
h1 {
  color: crimson;
}
.box {
  background-color: lightblue;
}
#main-title {
  font-size: 32px;
}

/* Group & Universal */
* {
  margin: 0;
  padding: 0;
}
h1, p {
  font-family: sans-serif;
}

/* Combinators */
nav a {
  text-decoration: none;
}
nav > a {
  font-weight: bold;
}
h1 + div {
  border: 2px solid black;
}

/* Attribute Selectors */
input[type="text"] {
  padding: 10px;
}
a[href^="https"] {
  color: green;
}