Table of Contents
CSS #5 :nth-child()
นอกจากการดูบทความนี้แล้ว คุณยังสามารถดูข้อมูลที่เป็นประโยชน์อื่นๆ อีกมากมายที่เราให้ไว้ที่นี่: ดูความรู้เพิ่มเติมที่นี่
CSS Tutorial For Beginners 23 – nth Child Selectors
Yo ninjas, once again! I’m here with another CSS tutorial for beginners, and this time we’re going to be getting familiar with the nthchild pseudo classes. They are you new best friend, trust me. If there’s one structural pseudo class you should master, it’s this one! Nthchild selectors help us target any child of a parent element based on it’s position within the HTML structure. It is an awesome technique, and one that I hope you will enjoy using on your own projects. Stay cool, keep coding \u0026 peace, my friends :).
SUBSCRIBE TO CHANNEL https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1
========== CSS for Beginners Playlist ==========
https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmOdb2mhoTSrT
========== HTML Basics Course ==========
https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc
========== The Net Ninja ============
For more frontend development tutorials \u0026 to blackbelt your coding skills, head over to https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk
========== Social Links ==========
Twitter @TheNetNinja https://twitter.com/thenetninjauk
CSS nth child Selectors
When you are trying to target HTML elements in a pattern, like every second or third list item or table row, then the nthchild selector and its partners are exactly what you need.
Remember that, unlike JavaScript, the HTML elements are numbered starting at one, not zero.
The formula used by these selectors is (an + b)
Where the letter `n` stays as n.
The letter a is replaced by a numeric multiplier.
The letter b is replace by a number which is the starting point.
The letter a can also be a negative integer.
Eg:
:nthchild(2n + 4)
This would represent the following elements:
(2 0 + 4) == 4
(2 1 + 4) == 2
(2 2 + 4) == 0 no match for this or any numbers after this.
Code GIST: https://gist.github.com/prof3ssorSt3v3/5024866f6210da8ea54b49e4c98c1518
:First-Child :Last-Child :nth-Child(2n+1) Pseudo Selectors in CSS Master Series in Hindi #10
Welcome, Position/Numberbased pseudoclass selectors in CSS in Hindi. :firstchild – Selects the first element within a parent.
:lastchild – Selects the last element within a parent.
:nthchild() – Selects elements based on a simple provided algebraic expression (e.g. “2n” or “4n1”). Has the ability to do things like select even/odd elements, “every third”, “the first five”, and things like that.
Must Watch Videos For Web Development \r
\r
➡️ Hooks in React JS in Hindi | useState in Hook in React JS: https://youtu.be/SS1I7mG2kk\r
\r
➡️ Array Destructuring in ES6 in JavaScript in Hindi 2020: https://youtu.be/QANG6A1zkQ\r
\r
➡️ Object Destructuring in ES6 in JavaScript in Hindi: https://youtu.be/k6yMQhPvbrM\r
\r
➡️ React DevTools \u0026 Source Code Link: https://www.thapatechnical.com/2020/05/reactdevelopertoolsinreactjsin.html \r
\r
➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: https://www.youtube.com/playlist?list=PLwGdqUZWnOp3aROg4wypcRhZqJG3ajZWJ\r
\r
➡️ ReactJS JavaScript Array Map Method in Hindi with Example: https://youtu.be/EETqnvQfpEg\r
\r
➡️ Fat Arrow Function in JavaScript in Hindi 2020: https://youtu.be/yboXLLwIHQ\r
\r
➡️ 23: Array in React JS in Hindi | React JS Project Netflix App 2 in Hindi in 2020\r
\r
➡️ Array in JavaScript in Hindi: https://youtu.be/zGlxOx_xSaY\r
\r
➡️ 22: React JS Project Netflix App Part 1 in Hindi in 2020: https://youtu.be/HRhJVGjIraE\r
\r
➡️ Install VS Code for ReactJS LINK: https://www.thapatechnical.com/2020/05/installreactjswindowsinstallnodejs.html\r
\r
➡️ Check Complete Reactjs in One video here 👇 https://youtu.be/43IbFDSVdB0\r
\r
➡️ HTML in One Video: https://youtu.be/pN7BFLfSjFw\r
\r
\r
➡️ CSS in One video: https://youtu.be/hkQv0NIxKQY\r
\r
\r
➡️ CSS FlexBox in 30 Minutes: https://youtu.be/6LPAmZajfA\r
\r
\r
➡️ JavaScript in One video: https://youtu.be/PODgPWhbfU\r
\r
\r
➡️ ECMAScript 6 in One Video: https://youtu.be/Iek4DtRobLA\r
\r
\r
➡️ HTML5 in one video: https://youtu.be/4V0YpOKZo\r
\r
\r
➡️ CSS3 in one video: https://youtu.be/TFrFx7H5ZI8\r
\r
\r
➡️ Bootstrap4 in One video: https://youtu.be/yZnNnvXO8HI\r
\r
\r
➡️ Jquery in One video: https://youtu.be/PNvyPEQ0yI\r
\r
\r
➡️ JSON in one video: https://youtu.be/bMqevPKAPD4\r
\r
\r
➡️ ReactJS in one video: https://youtu.be/43IbFDSVdB0\r
\r
\r
➡️ PHP in One Video: https://youtu.be/3024Kc6SDJ0\r
\r
\r
➡️ NodeJS in one video: https://youtu.be/ipnWAKoiBt\r
\r
\r
➡️ MySQL in one video: https://youtu.be/5bFxbwjNGk\r
\r
\r
CLICK HERE TO WATCH \r
\r
➡️ Fetch API in JavaScript: https://youtu.be/TojSXOuGUW4\r
\r
➡️ AJAX tutorial for beginners in Hindi: https://www.youtube.com/playlist?list=PLwGdqUZWnOp3ZgLj8upMGSRSC1ezBfEZs\r
\r
➡️ Template literals (Template strings) in ES6 in JavaScript in Hindi: https://youtu.be/Qcph3GB1JFs\r
\r
➡️ Async Await in JavaScript in Hindi: https://youtu.be/hFLXE5JCcs\r
\r
➡️ Promises in JavaScript in Hindi: https://youtu.be/xGBhmi4wwMI\r
\r
➡️ Callback Hell in JavaScript: https://youtu.be/fr67u98nckk\r
\r
➡️ Advanced JavaScript in Hindi Playlist: https://www.youtube.com/playlist?list=PLwGdqUZWnOp0hSGwasCjbrWSPrEKqB_kz\u0026disable_polymer=true\r
\r
➡️ ECMAScript Tutorial in Hindi 2020: https://www.youtube.com/playlist?list=PLwGdqUZWnOp19VXDM4oHtmWhDfWblFh\r
\r
➡️ ES5 \u0026 ES6 | ECMAScript 6 in One Video in Hindi: https://youtu.be/Iek4DtRobLA\r
\r
➡️ JavaScript Game Development Series in 2020: https://www.youtube.com/playlist?list=PLwGdqUZWnOp1Ub0K1CBuLxLOEN6wTq2bg\r
\r
\r
➡️ Source Code Link: https://www.thapatechnical.com/2019/11/howtogetsourcecode.html\r
\r
\r
➡️ Top 5 Programming Languages in 2020: https://youtu.be/czroY5nAD0c\r
\r
\r
➡️ Ludo Game JavaScript Link: https://youtu.be/_tlncjn1JpU \r
\r
\r
➡️Plz show some love to My Siter Youtube Channel and Plz Subscribe Link: https://www.youtube.com/channel/UCEst8yZ12JEYsSVVXmtU7GQ\r
\r
\r
MUST WATCH VIDEOS \r
\r
\r
➡️ How to become a Full Stack Developer 2020: https://youtu.be/etZ4jq_YjyM\r
\r
\r
➡️ How To Become a Web Developer 2020: https://youtu.be/Ur9LGVTGXs\r
\r
\r
➡️ How JavaScript Works: https://youtu.be/VaBP6_pBOgM\r
\r
\r
➡️ Follow me on Instagram: https://www.instagram.com/vinodthapa55/\r
\r
\r
\r
Make Website Responsive Using Media Queries in One Video in Hindi | Web Design Tutorial in Hindi\r
\r
➡️ Link: https://youtu.be/cKR9gzco3Kc\r
\r
\r
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.\r
\r
\r
Don’t Forget to Follow me on all Social Network, \r
\r
\r
Website Link: https://www.thapatechnical.com\r
\r
\r
Instagram Link: https://www.instagram.com/vinodthapa55\r
\r
\r
Facebook Link: https://www.facebook.com/vinodthapa55\r
\r
\r
Twitter Link: https://twitter.com/vb55thapa\r
\r
\r
Facebook ThapaTechnical Page Link: https://www.facebook.com/vinodbahadurthapa/?ref=aymt_homepage_panel\u0026eid=ARCTi5kdE1POliSOXnW51qZdo6NcpcSOqrioqut1KDac_CfgY5OCeyvcHlgRDgc_OK6eYNFCF_Rrfiq
css selectors mastering nth-child : Using the child ranges in bangla
css selectors mastering nthchild : Using the child ranges in bangla
Here explained,
Using the child ranges
Positive Child Ranges (n + 5)
Negative Child Ranges (n + 5)
Generic Child Ranges { nthchild(n+4):nthchild(n+8) }
Advanced Generic Child Ranges { nthchild(n+2):nthchild(odd):nthchild(n+9) }
Practice here
https://codepen.io/kaairasif/pen/MxvwzY?editors=1100
My other tutorials in this channel.
=========================================
Simple way to create CSS animations
https://youtu.be/l8bvaZo3vzQ
==========================================
CSS Scroll Snapping
https://youtu.be/V2gklXFhLy0
==========================================
Automatic Numbering With Counter Function in CSS
https://youtu.be/cSTY2tWkINs
==========================================
CSS placeholder selector
https://youtu.be/glvs8Lmn8jc
==========================================
Smart PNG and JPEG compression
https://youtu.be/V7Bawr3Yl8
==========================================
CSS Grid Layout Part 1 in Bangla
https://youtu.be/1r16lCjIbAw
==========================================
CSS Grid Layout Part 2 in Bangla
https://youtu.be/573DNw26is
==========================================
CSS Grid Layout Part 3 in Bangla
https://youtu.be/KioGrqtKfW8
==========================================
CSS Specificity Explained in Bangla
https://youtu.be/6XpifE5g1es
==========================================
How Chrome Shadow Editor Works? This tiny editor will save your time and make your task more easier.
https://youtu.be/MIMNzDL9_g
==========================================
Javascript has become an essential web technology, Why? Here Highlighted 7 Most Important Reasons.
https://youtu.be/NslU6oS6lgU
==========================================
Photoshop Alignment Explained in Bangla. যেকোনো Object কে খুব সহজে কিভাবে সাজাবেন ?
https://youtu.be/6b0p6s7CaRs
==========================================
Photoshop Layer Comps Explained in Bangla
https://youtu.be/Yt_LeonB1XE
==========================================
CSS Selectors in Depth Introduction। এই ভিডিটি ওয়েব ডিজাইনে অনেক গুরত্বপূর্ন ভুমিকা
https://youtu.be/ryDmnzpLm84
==========================================
CSS Simple and Combinator Selector
https://youtu.be/I2A7X3mnNQ
==========================================
CSS Attribute Selectors
https://youtu.be/XWths2YxtAk
==========================================
Photoshop Patterns background কিভাবে কাজ করে তার বিস্তারিত এই টিউটোরিয়ালে জানতে পারবেন ।
https://youtu.be/h_2Q1J7lME
==========================================
Photoshop Workspace details in bangla
https://youtu.be/dWbwSOUJIps
==========================================
Necessary tools for web development. The fastest way to take a customisable screenshot.
https://youtu.be/zWzPNnwDrs
==========================================
CSS Before and After Selector Basic in bangla
https://youtu.be/VERoFeTOMI
==========================================
CSS Before \u0026 After with Practical Example in Bangla
https://youtu.be/Wqn1B3SAEfc
==========================================
Learn HTML Part 1 : Introduction in Bangla
https://youtu.be/NF1B32BPsbc
==========================================
Learn HTML Part 2 : Page Structure in Bangla
https://youtu.be/8GGD_PMI87c
==========================================
Learn HTML Part 3: Links and Images in Bangla
https://youtu.be/VnFBgZ3DlbU
==========================================
Learn HTML Part 4 : Lists in Bangla
https://youtu.be/LphUOSM2zac
==========================================
Learn HTML Part 5 : Table in Bangla
https://youtu.be/yjAmijD4CdI
==========================================
Learn HTML Part 6 : URL in Bangla
https://youtu.be/Wqn1B3SAEfc
==========================================
Learn HTML Part 7 : Form Elements in Bangla
https://youtu.be/sQiEON8iboU
==========================================
Learn HTML Part 8 : Form Styling in Bangla
https://youtu.be/vZBzpeJrHfU
==========================================
Learn HTML Part 9 : Form Attribute in Bangla
https://youtu.be/JVLN3lOVExc
นอกจากการดูหัวข้อนี้แล้ว คุณยังสามารถเข้าถึงบทวิจารณ์ดีๆ อื่นๆ อีกมากมายได้ที่นี่: ดูวิธีอื่นๆINVESTMENT
