---
title: "Day 108: the of S syntax in :nth-child()"
url: https://daily.dev/posts/day-108-the-of-s-syntax-in-nth-child--5uhsw7h0u
source_url: https://www.matuzo.at/blog/2024/100daysof-day108
type: article
source: "Manuel Matuzović"
published: 2026-06-22T14:42:03.781Z
updated: 2026-06-22T14:43:18.848Z
tags: ["css"]
reading_time: 2
upvotes: 0
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Day 108: the of S syntax in :nth-child()

**[Manuel Matuzović](https://daily.dev/sources/matuzo)** · 2 min read · 0 upvotes · 0 comments

## Summary

The `of S` syntax in CSS `:nth-child()` allows you to prefilter elements before the nth-child counting logic applies. For example, `li:nth-child(even of :not([hidden]))` counts only visible list items when applying the even selector, ignoring hidden elements. This syntax also works with `:nth-last-child()`.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://www.matuzo.at/blog/2024/100daysof-day108>

## Similar posts on daily.dev

- [CSS \`n of\` Selectors for Conditional Validation – Frontend Masters Blog](https://daily.dev/posts/css-n-of-selectors-for-conditional-validation-frontend-masters-blog-wsa8a9f2p) · Frontend Masters · 17 upvotes · 1 comments
- [Selecting a Date Range in CSS](https://daily.dev/posts/selecting-a-date-range-in-css-9vwb1x4se) · CSS-Tricks · 155 upvotes · 10 comments

---

Tags: [#css](https://daily.dev/tags/css)

[View this post on daily.dev](https://daily.dev/posts/day-108-the-of-s-syntax-in-nth-child--5uhsw7h0u)