Mastering Advanced CSS Selectors | Htoo Aung Phyo Lwin

⚓︎Mastering Advanced CSS Selectors

CSS selectors are the foundation of styling web pages. While most developers are familiar with basic selectors, mastering advanced CSS selectors can help you write cleaner, more efficient, and more maintainable stylesheets. In this article, we'll explore some powerful selectors and how to use them effectively.

⚓︎Why Learn Advanced Selectors?

Reduce unnecessary classes and IDs
Target elements more precisely
Write DRY (Don't Repeat Yourself) CSS
Improve maintainability and scalability

⚓︎1. Attribute Selectors

Attribute selectors let you target elements based on their attributes and values.

/* Select all input elements with a type of "text" */
input[type="text"] {
  border: 1px solid #ccc;
}
 
/* Select links that open in a new tab */
a[target="_blank"] {
  color: teal;
}

⚓︎2. Pseudo-Classes

Pseudo-classes target elements based on their state or position.

/* Style the first child of a list */
li:first-child {
  font-weight: bold;
}
 
/* Style every even row in a table */
tr:nth-child(even) {
  background: #f9f9f9;
}
 
/* Style links on hover */
a:hover {
  text-decoration: underline;
}

⚓︎3. Pseudo-Elements

Pseudo-elements style specific parts of an element.

/* Add a custom bullet before list items */
li::before {
  content: "• ";
  color: orange;
}
 
/* Style the first letter of a paragraph */
p::first-letter {
  font-size: 2em;
  color: #333;
}

⚓︎4. Combinators

Combinators define relationships between selectors.

/* Descendant combinator: selects all em inside blockquotes */
blockquote em {
  color: purple;
}
 
/* Child combinator: selects direct children only */
ul > li {
  margin-bottom: 8px;
}
 
/* Adjacent sibling: selects the first p immediately after an h2 */
h2 + p {
  margin-top: 0;
}

⚓︎5. The :not() Selector

The :not() pseudo-class excludes elements from a selection.

/* Select all buttons except those with class "primary" */
button:not(.primary) {
  background: #eee;
  color: #333;
}

⚓︎6. The :is() and :where() Selectors

These selectors simplify complex selector lists.

/* Style all headings */
:is(h1, h2, h3, h4, h5, h6) {
  font-family: "Inter", sans-serif;
}
 
/* :where() works like :is() but has zero specificity */
:where(nav, aside) {
  background: #fafafa;
}

⚓︎7. Advanced Attribute Selectors

Target elements with attributes that start, end, or contain certain values.

/* Select all images with alt text containing "logo" */
img[alt*="logo"] {
  height: 40px;
}
 
/* Select links that start with https */
a[href^="https"] {
  font-weight: bold;
}
 
/* Select inputs whose name ends with "email" */
input[name$="email"] {
  border-color: green;
}

⚓︎Conclusion

Advanced CSS selectors are powerful tools for writing efficient and scalable stylesheets. By mastering them, you can create more flexible and maintainable designs with less code. Experiment with these selectors in your next project and see how they can improve your workflow!

Happy styling! 🎨