Categories

Mastering Special CSS Selectors: Advanced Tricks Even Pros May Not Know!

Donate with

82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

Copy Monero Donation Address

Donate with

Donate BAT now

Verified BAT publisher

Introduction

CSS is a powerful tool for styling web pages, but beyond the commonly known selectors like class, id, and :nth-child, there are advanced selectors and features that can greatly enhance your workflow. Whether you're a junior developer looking to level up or a seasoned professional exploring new tricks, this guide covers some of the most useful and lesser-known CSS selectors.

1. The :has() Selector - The Parent Selector We Always Wanted

The :has() pseudo-class allows you to style a parent element based on the presence of a specific child element. This was previously difficult to achieve with CSS alone.

Example:

article:has(img) {
  border: 2px solid blue;
}

This will apply a border to any <article> element that contains an <img> inside.

2. The :is() Selector - Cleaner Code for Multiple Elements

The :is() selector lets you group selectors efficiently, reducing redundancy.

Example:

:is(h1, h2, h3) {
  color: darkblue;
}

This applies the same style to all headers without repeating the rule for each one.

3. The :where() Selector - Similar to :is() but with Lower Specificity

The :where() selector works like :is() but does not increase specificity, making it easier to override.

Example:

:where(h1, h2, h3) {
  margin-bottom: 10px;
}

Since :where() has zero specificity, other styles can override it easily.

4. The :nth-of-type() Selector - More Precise Than :nth-child()

Unlike :nth-child(), which counts all child elements, :nth-of-type() targets a specific element type.

Example:

p:nth-of-type(2) {
  color: red;
}

This targets the second <p> within its parent, regardless of other elements present.

5. The :not() Selector - Exclude Specific Elements

The :not() selector lets you exclude elements from styling.

Example:

button:not(.primary) {
  background: gray;
}

All buttons except those with the .primary class will get a gray background.

6. The Attribute Selectors - Target Elements Based on Attributes

CSS provides powerful attribute selectors that go beyond class and ID targeting.

Examples:

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

This applies styles only to text inputs.

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

This targets links starting with "https".

7. The ::marker Pseudo-Element - Style List Markers

You can style list bullets or numbers directly using ::marker.

Example:

li::marker {
  color: red;
  font-size: 20px;
}

This makes list markers red and larger.

8. Container Queries

Container queries enable the application of styles based on the size of a container (parent element) rather than the viewport size. This helps in creating responsive layouts within a specific container.

Example:

.container {
    width: 100%;
    container-type: inline-size;
}

@container (min-width: 400px) {
    .item {
        background-color: lightgreen;
    }
}

@container (min-width: 600px) {
    .item {
        background-color: lightblue;
    }
}

In the example above, .item changes its background color depending on the size of the .container. The @container query lets us apply styles based on the container's width, not the viewport width.

Conclusion

By mastering these special CSS selectors, you can write cleaner, more efficient, and more powerful styles. These techniques improve maintainability and provide better control over web page styling. Start experimenting with these selectors today and elevate your front-end development skills!