Zebra-Striped List (HTML & CSS)
Learn how to create a Zebra-Striped List, using the :nth-child() CSS pseudo-class selector, which allows us to target elements based on their index/position in a group of siblings.
Creating striped lists, with alternating background colors, helps us differentiate list items, making them more distinguishable, and the :nth-child() CSS selector makes this task very simple!
In this video, we discuss in detail how to use the :nth-child() selector and we then use it to create striped lists!
Enjoy 😊
Don’t forget to share, like, subscribe and I would love to hear your thoughts in the comments section below!
Support the Channel 💙☕🙏
PayPal: https://paypal.me/CodingJourney
Suggested Videos:
Animated Intro (HTML & CSS): https://www.youtube.com/watch?v=STUogvl25GU
Slide-In Overlay Hover Effect (HTML & CSS): https://www.youtube.com/watch?v=l0jLhFEzvJo
Card Flip Effect (HTML & CSS): https://www.youtube.com/watch?v=Lc6wyl1KdOc
Colorful Background with linear-gradient: https://www.youtube.com/watch?v=1q6papqTEqI
How to Change Text Selection Styling with CSS: https://www.youtube.com/watch?v=NOgZ_LzPiCk
Keeping Footer at the Bottom of the Page (HTML & CSS): https://www.youtube.com/watch?v=US_3XvufMLU
Codepen: https://codepen.io/Coding_Journey/
Twitter: https://twitter.com/CodingJrney
Email: codingjourney123@gmail.com
Subscribe 💖
https://www.youtube.com/channel/UCwpH4liYtBSiVXSfL8x2TyQ?sub_confirmation=1
Видео Zebra-Striped List (HTML & CSS) канала Coding Journey
Creating striped lists, with alternating background colors, helps us differentiate list items, making them more distinguishable, and the :nth-child() CSS selector makes this task very simple!
In this video, we discuss in detail how to use the :nth-child() selector and we then use it to create striped lists!
Enjoy 😊
Don’t forget to share, like, subscribe and I would love to hear your thoughts in the comments section below!
Support the Channel 💙☕🙏
PayPal: https://paypal.me/CodingJourney
Suggested Videos:
Animated Intro (HTML & CSS): https://www.youtube.com/watch?v=STUogvl25GU
Slide-In Overlay Hover Effect (HTML & CSS): https://www.youtube.com/watch?v=l0jLhFEzvJo
Card Flip Effect (HTML & CSS): https://www.youtube.com/watch?v=Lc6wyl1KdOc
Colorful Background with linear-gradient: https://www.youtube.com/watch?v=1q6papqTEqI
How to Change Text Selection Styling with CSS: https://www.youtube.com/watch?v=NOgZ_LzPiCk
Keeping Footer at the Bottom of the Page (HTML & CSS): https://www.youtube.com/watch?v=US_3XvufMLU
Codepen: https://codepen.io/Coding_Journey/
Twitter: https://twitter.com/CodingJrney
Email: codingjourney123@gmail.com
Subscribe 💖
https://www.youtube.com/channel/UCwpH4liYtBSiVXSfL8x2TyQ?sub_confirmation=1
Видео Zebra-Striped List (HTML & CSS) канала Coding Journey
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![Related Words with Datamuse API](https://i.ytimg.com/vi/lvvBpPIzalI/default.jpg)
![Arrow Swipe Game with HTML, CSS and JavaScript (Part 2 - Animations)](https://i.ytimg.com/vi/dq_Waw3Vl-Y/default.jpg)
![How to Change Text Selection Styling with CSS](https://i.ytimg.com/vi/NOgZ_LzPiCk/default.jpg)
![Decide - Create - Publish - Repeat](https://i.ytimg.com/vi/5Uq_m_CbzEI/default.jpg)
![CSS box-shadow Editor](https://i.ytimg.com/vi/EBbgImXJeqY/default.jpg)
![Arrow Swipe Game with HTML, CSS and JavaScript (Part 4 - Restart Game)](https://i.ytimg.com/vi/1Au5rgP_V7E/default.jpg)
![Giving myself a pat on the back (you should too)](https://i.ytimg.com/vi/AsuMzAFlVHM/default.jpg)
![Animations with Animate.css](https://i.ytimg.com/vi/FYtCTt7sKwY/default.jpg)
![Share Selected Text with JavaScript](https://i.ytimg.com/vi/HOrViIclSjw/default.jpg)
![Modal with HTML, CSS and JavaScript](https://i.ytimg.com/vi/YARYSKySwhg/default.jpg)
![Animated Intro (HTML & CSS)](https://i.ytimg.com/vi/STUogvl25GU/default.jpg)
![Animated Underline Hover Effect (HTML & CSS)](https://i.ytimg.com/vi/Kz96odltLQI/default.jpg)
![Card Flip Effect (HTML & CSS)](https://i.ytimg.com/vi/Lc6wyl1KdOc/default.jpg)
![Voice Search with JavaScript (Web Speech API)](https://i.ytimg.com/vi/kagZyM0wzJk/default.jpg)
![HTML Drag and Drop API](https://i.ytimg.com/vi/7HUCAYMylCQ/default.jpg)
![Image Comparison Slider (HTML, CSS and JavaScript)](https://i.ytimg.com/vi/2KMJxHW21cU/default.jpg)
![Currency Converter with HTML, CSS and JavaScript (Part 2)](https://i.ytimg.com/vi/F4TfBopAmaY/default.jpg)
![Accordion (HTML, CSS and JavaScript)](https://i.ytimg.com/vi/dr8Emho-kYo/default.jpg)
![Slide-In Overlay Hover Effect (HTML & CSS)](https://i.ytimg.com/vi/l0jLhFEzvJo/default.jpg)
![REST Countries API](https://i.ytimg.com/vi/THZyM2z8s-o/default.jpg)