DEV Community: Kevin Ramirez

Smarter CSS Targeting with :nth-child(of )

Kevin Ramirez — Mon, 22 Sep 2025 10:19:00 +0000

Most developers know about the :nth-child() pseudo-class in CSS. It allows you to style elements based on their position inside a parent. For example:

li:nth-child(2) {
  color: red;
}

This rule will select the second <li> inside its parent. Pretty straightforward.

But there’s a more powerful feature that many developers overlook: the of <selector> syntax.

What is `of <selector>`?

Normally, :nth-child() counts all child elements of a parent. But with the of <selector> syntax, you can limit that count only to the elements that match a specific selector.

In other words: instead of saying “give me the third child no matter what it is,” you can say “give me the third <li> that matches a certain condition.”

Example: Targeting specific classes

Let’s imagine a list where only some items are marked as important:

<ul>
  <li class="important">First</li>
  <li>Second</li>
  <li class="important">Third</li>
  <li class="important">Fourth</li>
  <li>Fifth</li>
  <li>Sixth</li>
</ul>

If you write:

li:nth-child(-n+3 of .important) {
  color: blue;
}

This will select only the first three list items that have the class important.

Notice the difference:

Without of <selector>, CSS would look at the raw order of all <li> elements.
With of .important, CSS only counts the <li> elements that match .important.

You can also use :not() inside the of <selector> to target the opposite case. For example:

li:nth-child(-n+3 of :not(.important)) {
  color: green;
}

This will select the first three <li> elements that do not have the class important.

Notice how flexible this becomes: instead of styling everything or adding extra classes, you can precisely define the subset of elements you want.

Why is this useful?

The of <selector> syntax is great when:

You want to style only the first or last few elements of a certain type.
You’re working with lists or grids where not every child matches the same criteria.
You want more control without having to add extra classes in your HTML.

It’s a cleaner way to target elements without increasing the complexity of your markup.

Browser support

The of <selector> syntax is relatively new, but it has good support in modern browsers. If you’re working on a project that needs to support older browsers, make sure to test or provide fallbacks.

Conclusion

The :nth-child() pseudo-class is already powerful, but the of <selector> syntax takes it to the next level. By combining position-based selection with specific conditions, you can write CSS that is both expressive and flexible.

Next time you need to target only a subset of elements in a list or grid, remember that :nth-child(of <selector>) might be the perfect tool.

References

Recreating Apple's Liquid Glass Effect with Pure CSS ✨

Kevin Ramirez — Tue, 10 Jun 2025 21:07:53 +0000

Yesterday, Apple dropped something unexpectedly beautiful at WWDC 2025. While we were all waiting for the next AI breakthrough, Tim Cook surprised everyone with iOS 26, featuring the new "Liquid Glass" design language. The design refresh is inspired by Apple's VR headset, the Vision Pro, bringing translucent menus, glossy icons and rounded controls across all Apple devices.

But here's the thing about us developers – when Apple shows us something shiny and new, we can't help but think: "I bet I could build that with CSS." 🤓

So naturally, instead of waiting for iOS 26, I decided to recreate Apple's Liquid Glass effect using nothing but HTML and CSS. No JavaScript, no complex frameworks – just good old-fashioned web magic.

What Makes Liquid Glass So Special?

Apple's Liquid Glass uses real-time rendering and dynamically reacts to movement with specular highlights, creating an interface that feels alive and responsive. The features include shiny, reflective, and transparent visual interface elements that give the software a more "glassy" look and feel.

The key is combining multiple CSS techniques to achieve that perfect balance of transparency, depth, and that subtle "liquid" quality that makes everything feel premium.

Breaking Down the CSS Magic

1. The Foundation: Creating Glass

The heart of the effect lies in combining several CSS properties:

.glass {
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(2px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 2rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), 
              inset 0 4px 20px rgba(255, 255, 255, 0.3);
}

Here's what each property does:

backdrop-filter: blur() creates that frosted glass blur effect
rgba() backgrounds provide semi-transparent layers
inset box-shadow adds inner glow and depth
border: rgba() creates subtle glass-like edges

2. The Liquid Touch: Pseudo-element Magic

The real secret sauce is in the ::after pseudo-element that creates the liquid shine:

.glass::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2rem;
  backdrop-filter: blur(1px);
  box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
              inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
  opacity: 0.6;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
}

This creates those subtle highlights and reflections that make the glass appear "liquid" – as if light is flowing across the surface.

Cross-Browser Compatibility

The effect works great on modern browsers that support backdrop-filter:

✅ Chrome, Firefox, Safari, Edge
❌ Internet Explorer (but honestly, when was the last time you worried about IE?)

For older browsers, you can provide fallback styles or use a polyfill.

Try It Yourself

Want to see it in action? I've put together a live demo that you can experiment with:

What's Next?

This is just the beginning! The liquid glass effect opens up so many possibilities for modern web design. You could easily adapt this technique for:

Navigation menus
Modal dialogs
Dashboard widgets
Mobile app interfaces
Landing page sections

The key is finding the right balance between visual appeal and usability – just like Apple did.

Wrapping Up

While we wait for iOS 26 to hit our devices, we can already start bringing some of that Apple magic to the web. Sometimes the best way to understand a new design trend is to roll up your sleeves and build it yourself.

The beauty of CSS is that it gives us the power to recreate even the most sophisticated design systems. Who knows? Maybe your next project will be the one that makes users do a double-take and wonder, "Wait, is this a native app or a website?"

🔗 Resources & References

Made with ❤️ and CSS magic

What do you think about Apple's new design direction? Are you planning to experiment with liquid glass effects in your projects? Let me know in the comments below! 👇

Waving Lines of Code: Creating Hypnotic Canvas Animations with JavaScript 🌊

Kevin Ramirez — Tue, 28 Jan 2025 17:14:18 +0000

(A little preview of what we're creating - but way more hypnotic!)

Have you ever wanted to make your website background say "ooooh, fancy!" without actually saying it? Let's create some smooth, undulating line waves using JavaScript's Canvas API. It's easier than you think, and the result looks like digital seaweed dancing in the virtual ocean!

The Magic Ingredients 🧙

We'll need just three basic components:

A <canvas> element as our digital sketchpad
Some wave configuration magic
An animation loop to make it all move

// Let's start by creating our canvas
const canvas = document.createElement('canvas');
canvas.classList = 'wave';
const c = canvas.getContext('2d');
document.body.append(canvas);

// Set dimensions to match viewport
canvas.width = 130;
canvas.height = innerHeight * 2;

("Wait, why 130px width?" - Because we want vertical waves!)

Wave Configuration 🌊

Here's where the fun begins. We create multiple waves with random properties:

const waves = Array.from({ length: 4 }, () => ({
  x: 65, 
  length: Math.random() * 0.002 + 0.005,
  amplitude: Math.random() * 15 + 20,
  frequency: Math.random() * 0.02 + 0.005,
}));

Let's break down these wave properties:

x: center position (65 = middle of 130px canvas)
length: how squiggly the wave is
amplitude: wave height
frequency: how fast it undulates

The Animation Loop 🔄

This is where we bring our waves to life:

function animate() {
  requestAnimationFrame(animate);
  c.clearRect(0, 0, canvas.width, canvas.height);

  waves.forEach((wave, index) => {
    // Drawing magic happens here
    c.beginPath();
    c.moveTo(wave.x, 0);

    // Create wave path
    for (let y = 0; y < canvas.height; y++) {
      c.lineTo(
        wave.x + Math.sin(y * wave.length + increments[index]) * wave.amplitude,
        y
      );
    }

    c.stroke();
    increments[index] += wave.frequency;
  });
}

(Our code making waves (literally))

See It in Action 🎬

Check out this CodePen demo to see the final result. Feel free to play with the values!

Level Up! 🚀

Want to make it even cooler? Try:

Adding mouse interaction
Changing colors dynamically
Creating horizontal waves
Adding gradient effects

(You after customizing these waves)

Remember: The best way to learn is to break things! Try changing values randomly and see what happens.

Happy coding! 🌊💻

CSS Animations with display: none 🤯🤔

Kevin Ramirez — Wed, 21 Aug 2024 10:49:15 +0000

CSS animations are fundamental to modern web development. But one of the biggest problems in CSS has been animating the property display: none.

So far, it has not been possible to animate this property because it is a sort of switch, either on or off. So far...

Yes, because there are currently some tricks to be able to create animations with display: none and you can use them from now.

A new way to animate `display: none`

At first glance it looks like a normal transition effect with opacity. But if you look closely at the code there are some features to consider.

This is the code we are going to inspect:

.block {
  display: none;
  max-width: 500px;
  margin: 50px auto 0;
  width: 100%;
  background-color: #29C38A;
  color: #fff;
  opacity: 0;
  padding: 20px;
  box-sized: border-box;
  transition: opacity .3s ease,
    display .3s ease allow-discrete; /* <-- check this line */

  &.open {
    opacity: 1;
    display: block;
  }
}

@starting-style { /* <-- and this line */
  .block.open {
    opacity: 0;
  }
}

transition-behavior: allow-discrete

The transition-behavior: allow-discrete property manages how discrete properties like display and content-visibility animate. Normally, these properties flip values at the 50% mark of an animation. However, when transitioning to or from display: none or content-visibility: hidden, the content remains visible throughout, flipping to the visible state at 0% or to none at 100%.

@starting-style

The @starting-style CSS rule is used to enable transitions on an element's first appearance or when its display changes from none to another value. Normally, CSS transitions don't trigger on initial style updates, so @starting-style defines the starting values for properties to transition from.

This rule is especially useful for creating smooth entry and exit animations for elements like popovers, modals, or anything added or removed from the DOM. It can be used as a standalone block or nested within an existing ruleset. The @starting-style ensures that the element transitions from the specified starting values when it first appears.

Conclusion

Using transition-behavior: allow-discrete and @starting-style opens up new possibilities for animating elements that were previously challenging, like those with display: none. These tools make it easier to create smooth and visually appealing transitions, improving the user experience without needing complicated workarounds. By allowing seamless animations when elements first appear or disappear, they bring more flexibility and control to web design, making your interfaces more dynamic and engaging.

References

Coding the Perfect Documentation: Deciding Between 🚀 Vitepress and ✨ Astro Starlight

Kevin Ramirez — Thu, 22 Feb 2024 14:58:44 +0000

Vitepress and Astro Starlight are two static site generators that offer high performance, support for markdown, and the ability to use components within pages. In this article, I want to compare the two tools and see what their strengths and weaknesses are, and which one is better to use depending on the use case.

Vitepress
Astro Starlight
Which one choose?
Conclusion
References

Vitepress 🚀

VitePress is a modern static site generator (SSG) that offers simplicity, speed, and seamless integration with Vue-based applications. Here are the key points:

Powered by Vite and Vue.js: VitePress leverages the lightning-fast build tool Vite and the popular JavaScript framework Vue.js. This combination ensures rapid development and optimal performance.
Minimalistic Approach: VitePress follows a minimalistic philosophy. It aims to keep things simple, making it an excellent choice for straightforward documentation sites, blogs, or personal projects.
Customization Flexibility: While VitePress provides a default theme, it encourages customization through Vue (using custom themes) or Vite (leveraging Vite’s configuration options and plugins). For users who stick with the default theme, it’s almost a drop-in replacement with minor adjustments. However, if you’re building a fully custom site, VitePress remains flexible.

Pros:

Better Developer Experience (DX): VitePress offers an improved development experience compared to traditional SSGs. The fast build times and hot module replacement (HMR) during development enhance productivity.
Performance Boost: Thanks to Vite’s asynchronous loading of chunks and automatic CSS extraction, VitePress achieves impressive performance. It extracts CSS used by modules into separate files, reducing page load times.
Standardization with Vite: VitePress aligns seamlessly with standard Vite-based Vue applications. This consistency simplifies development workflows and ensures compatibility.

Cons

Short-Term Confusion: Since VitePress is a newer player in the SSG landscape, users accustomed to tutorials and integrations targeting VuePress 1 might experience initial confusion. However, with the recent switch to Vue 3, major upgrades shouldn’t catch users off guard.

Astro Starlight ✨

Astro Starlight is a full-featured, eco-friendly documentation theme built on the Astro framework. It caters to developers and content creators who want to build stellar documentation websites. Here are the key points:

Powered by Astro: Starlight leverages the full power and performance of Astro, a modern static site generator. Astro’s asynchronous loading of chunks and seamless integration with Vue.js contribute to its impressive speed.
Feature-Rich and Accessible: Starlight offers comprehensive features for enhanced accessibility and functionality. Easy navigation and robust search ensure quick access to content. Multilingual support promotes inclusivity. Clear typography and code highlighting improve readability. Dark and light modes accommodate user preferences, enhancing the overall experience.
Customization Flexibility: Starlight offers versatile customization options with built-in frontmatter validation, ensuring TypeScript type-safety for frontmatter. As a framework-agnostic solution, it provides flexibility for integration with various UI libraries, including but not limited to React, Vue, Svelte, Solid, and more, allowing users to tailor the platform to their preferences and needs.

Pros:

Markdown Components: Starlight supports components in Markdown (similar to MDX but without JSX), making it easy to create dynamic content.
Vite-Powered: Powered by Vite, Starlight benefits from fast development builds and hot module replacement (HMR).

Cons:

Learning Curve: As a newer player in the static site generator landscape, Astro might have a learning curve for those accustomed to other tools. However, its benefits outweigh the initial challenges.

Which one choose?

The comparison between Vitepress and Astro Starlight largely depends on the type of website you want to build. If you want to create a simple website with a lot of markdown content and few interactive components, Vitepress might be a good choice as it offers a fast and efficient solution based on Vue.js. If you want to create a more complex website with different UI frameworks and dynamic components, Astro Starlight might be more suitable as it offers greater flexibility and control over page rendering.

In terms of performance, both tools offer advantages. Vitepress leverages the speed of Vite to provide instant server startup and fast builds. Astro Starlight, on the other hand, optimizes pages to minimize the JavaScript code sent to the browser and load only necessary components. Both tools generate static HTML pages that can be easily indexed by search engines and offer a great user experience.

Conclusion

Vitepress and Astro Starlight are two valid and modern static site generators. The choice between the two depends on the type of website you want to create and your personal preferences. Both tools offer interesting features and high performance but also significant differences in terms of approach and flexibility.

References

Mastering the Art of Nesting in CSS: Before and Now

Kevin Ramirez — Mon, 22 Jan 2024 10:29:33 +0000

In the ever-evolving realm of web development, the way we structure and organize our stylesheets plays a pivotal role in creating clean and maintainable code. One sought-after feature that has been a game-changer, especially for preprocessors like Sass and Less, is nesting. In this post, we'll dive into the world of nesting, exploring its benefits and examining how it has evolved up to 2024.

Before: Nesting in Preprocessors (Sass)

// Before: Nesting in Sass

// Define styles for a container
.container {
  width: 100%;
  padding: 20px;

  // Nest styles for the header inside the container
  header {
    background-color: #333;
    color: #fff;
    font-size: 1.5em;

    // Nest styles for links inside the header
    a {
      text-decoration: none;
      color: #ff7e5f;
    }
  }

  // Nest styles for the main content
  .main-content {
    margin-top: 20px;
    font-size: 1.2em;
  }
}

Nesting in preprocessors like Sass allows us to encapsulate styles, providing a clearer, more organized structure. However, the landscape is changing, and it's time to explore what the native CSS has to offer.

Now: Native CSS

/* Now: Native CSS */

/* Define styles for a container */
.container {
  width: 100%;
  padding: 20px;

  /* Styles for the header inside the container */
  header {
    background-color: #333;
    color: #fff;
    font-size: 1.5em;

    /* Styles for links inside the header */
    a {
      text-decoration: none;
      color: #ff7e5f;
    }
  }

  /* Styles for the main content inside the container */
  .main-content {
    margin-top: 20px;
    font-size: 1.2em;
  }
}

Let's reflect on the advantages of nesting and how it can shape the future of our stylesheets. This is a very simple example of what css can do. To learn more about all the features of nesting in css there is an article in Chrome for Developers.

Benefits of Nesting: Why It Matters

Readability: Nesting enhances code readability by mirroring the HTML structure, making it easier to understand the relationship between elements and their styles.
Maintainability: Updates and changes become more straightforward as nested styles reflect the hierarchy of your HTML, reducing the likelihood of errors.
Code Organization: Nesting allows for a more organized and modular approach to styling, facilitating a cleaner and scalable codebase.

Looking Ahead: The Future of CSS Nesting

As of now, native CSS is yet to embrace nesting fully, but the web development landscape is dynamic. Keep an eye on emerging updates, as the demand for a more concise and expressive CSS syntax continues to grow.

In conclusion, whether you're harnessing the power of nesting in preprocessors or eagerly anticipating native support in CSS, the benefits are undeniable. Let's celebrate the progress made and look forward to an even more streamlined and efficient future in web development. Happy coding!

Unleashing the Power of :has() in CSS: A Selective Journey✨

Kevin Ramirez — Fri, 19 Jan 2024 11:50:04 +0000

🚀 Hey Dev Community! Have you ever found yourself wishing CSS had a more robust way to select elements based on their content or structure? Well, your developer dreams are about to come true with the lesser-known :has() pseudo-class! 🎉

Understanding the Magic of :has()

The :has() pseudo-class introduces a new level of selectivity to CSS, enabling you to target elements based on their descendants. This opens the door to more precise styling, reducing the need for complex class names or additional HTML structure.

Let's dive into some examples:

<body>
  <div>
    <a href="#">I'm a link inside a div!</a>
  </div>

  <ul>
    <li class="special">Special List Item</li>
    <li>Ordinary List Item</li>
  </ul>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus purus vitae tellus sodales.</p>

  <p>This paragraph is empty.</p>
</body>

/* Selecting a div containing an anchor tag */
div:has(a) {
  border: 2px solid #3498db;
  padding: 10px;
}

/* Styling a list item with a specific class */
li:has(.special) {
  background-color: #ffcc00;
  font-weight: bold;
}

/* Applying styles to paragraphs with more than 100 words */
p:has(:not(:empty):after) {
  color: #2ecc71;
  font-style: italic;
}

Breaking Down the Examples

Selecting a div containing an anchor tag: The div:has(a) rule adds a border and padding to any div that contains an anchor (a) tag.
Styling a list item with a specific class: The li:has(.special) rule applies styles to list items with the class special, making them stand out.
Applying styles to paragraphs with more than 100 words: The p:has(:not(:empty):after) rule targets paragraphs with content (not empty) and more than 100 words, applying a unique style.

Conclusion

The :has() pseudo-class is a powerful tool in the CSS arsenal, offering a more expressive way to style elements based on their internal structure. As you experiment with this feature, share your thoughts, creative use cases, and any cool discoveries below! 👇

DEV Community: Kevin Ramirez

Smarter CSS Targeting with :nth-child(of )

What is of <selector>?

Example: Targeting specific classes

Why is this useful?

Browser support

Conclusion

References

Recreating Apple's Liquid Glass Effect with Pure CSS ✨

What Makes Liquid Glass So Special?

Breaking Down the CSS Magic

1. The Foundation: Creating Glass

2. The Liquid Touch: Pseudo-element Magic

Cross-Browser Compatibility

Try It Yourself

What's Next?

Wrapping Up

🔗 Resources & References

Waving Lines of Code: Creating Hypnotic Canvas Animations with JavaScript 🌊

The Magic Ingredients 🧙

Wave Configuration 🌊

The Animation Loop 🔄

See It in Action 🎬

Level Up! 🚀

CSS Animations with display: none 🤯🤔

A new way to animate display: none

transition-behavior: allow-discrete

@starting-style

Conclusion

References

Coding the Perfect Documentation: Deciding Between 🚀 Vitepress and ✨ Astro Starlight

Table of contents

Vitepress 🚀

Pros:

Cons

Astro Starlight ✨

Pros:

Cons:

Which one choose?

Conclusion

References

Mastering the Art of Nesting in CSS: Before and Now

Before: Nesting in Preprocessors (Sass)

Now: Native CSS

Benefits of Nesting: Why It Matters

Looking Ahead: The Future of CSS Nesting

Unleashing the Power of :has() in CSS: A Selective Journey✨

Understanding the Magic of :has()

Breaking Down the Examples

Conclusion

What is `of <selector>`?

A new way to animate `display: none`