Mastering CSS `:nth-child` Selectors! 🎨

3 min readJun 24, 2024

Hi everyone! 👋 I’m Md Taqui Imam, and today i want to share you about the cool world of CSS :nth-child selectors.

These selectors are super handy for making our websites look amazing by styling specific elements in a list.

Let's break it down together!

What are `:nth-child` Selectors?

In CSS, `:nth-child` selectors allow us to select elements based on their position in a list. This means we can target specific items and give them unique styles. Sounds fun, right? Let’s see how it works!

The Basics

// 1. First Child

 ul li:first-child {
 background-color: #f97e72;
 }

// This selects the very first item in the list.

// 2. Last Child
 
 ul li:last-child {
 background-color: #f97e72;
 }
 
// This selects the very last item in the list.

// 3.Specific Position
 
 ul li:nth-child(6) {
 background-color: #f97e72;
 }
 
 // This selects the 6th item in the list.

Even and Odd

// 1. Even Items
 
 ul li:nth-child(even) {
 background-color: #f97e72;
 }
 
 // This selects all the even-numbered items in the list.

// 2. Odd Items
 
 ul li:nth-child(odd) {
 background-color: #f97e72;
 }
 
 // This selects all the odd-numbered items in the list.

Advanced Patterns

// 1. Every Third Item
 
 ul li:nth-child(3n) {
 background-color: #f97e72;
 }
 
//This selects every third item (3rd, 6th, 9th, etc.).

// 2. Pattern with Offset
 
 ul li:nth-child(n+5) {
 background-color: #f97e72;
 }
 
// This selects every item starting from the 5th one.

// 3. Reverse Counting
 
 ul li:nth-child(-n+4) {
 background-color: #f97e72;
 }
 
// This selects the first 4 items.

Last Child Variations

// 1.Last 4th Item
 
 ul li:nth-last-child(4) {
 background-color: #f97e72;
 }
 
// This selects the 4th last item in the list.

// 2.Every 4th Item from Last
 
 ul li:nth-last-child(4n) {
 background-color: #f97e72;
 }
 
// This selects every 4th item from the end.

Exclusions

// 1. Not First Child
 
 ul li:not(:first-child) {
 background-color: #f97e72;
 }
 
 // This selects every item except the first one.

// 2. Not Last Child
 
 ul li:not(:last-child) {
 background-color: #f97e72;
 }
 
// This selects every item except the last one.

Conclusion

With these `:nth-child` selectors, we can make our CSS much more powerful and flexible.

Now, you can easily target and style specific elements in your lists, making your websites look fantastic!

Happy coding! 💻

— -

I hope you enjoyed learning about `:nth-child` selectors with me! If you have any questions or want to share your cool CSS tricks, feel free to reach out.

Your friend in coding,
Md Taqui Imam

Mastering CSS :nth-child Selectors! 🎨