5 CSS Selectors You Didn’t Know You Needed

---

Ever feel like your CSS could be sharper, more efficient, and downright smarter? What if I told you there are five underused CSS selectors that can completely transform the way you style your web pages?

1. The Attribute Contains Word Selector [attr~="value"]

This selector finds elements whose attribute value contains a specific word, making it perfect for when your class names or attributes have multiple words.

input[type~="email"] {
  border: 2px solid #43a047;
}

Value: Save time by avoiding complex class juggling and targeting exactly what you need.

2. The Attribute Begins With Selector [attr|="value"]

Often overlooked, this selector is useful when attributes follow a structured pattern (like language codes).

[lang|="en"] {
  font-family: sans-serif;
}

Value: Quickly style elements that share a common prefix in their attribute values.

3. The Negation Pseudo-Class :not()

When you want to style everything except one element, :not() becomes your best friend.

.button:not(.disabled) {
  background-color: #1e88e5;
}

Streamline your CSS by excluding unwanted elements without extra markup.

4. The General Sibling Combinator E ~ F

Target all sibling elements that follow a given element. This selector is especially useful for dynamic lists or styling groups of elements.

h2 ~ p {
  margin-top: 0;
}

Enhance your layouts without cluttering your HTML structure.

5. The Advanced Pseudo-Class Combo: :nth-child()

While :nth-child() might sound familiar, combining it with other pseudo-classes lets you create truly dynamic effects.

li:nth-child(odd):hover {
  background-color: #f5f5f5;
}

Bring a layer of interactivity to your lists and grids with minimal code.

---

These five selectors are just the tip of the iceberg when it comes to writing smarter CSS. If you’re ready to take your web styling to the next level, check out the Teki Solves Advanced CSS Selector Cheat Sheet. It’s packed with in-depth explanations, real-world examples, and best practices to help you write cleaner, more maintainable CSS code.

Grab your copy here: https://tekisolve.gumroad.com/l/grjet