:First-Child :Last-Child :nth-Child(2n+1) Pseudo Selectors in CSS Master Series in Hindi #10

Подписаться 670 тыс.

Просмотров 29 тыс.

50% 1

Welcome, Position/Number-based pseudo-class selectors in CSS in Hindi. :first-child - Selects the first element within a parent.
:last-child - Selects the last element within a parent.
:nth-child() - Selects elements based on a simple provided algebraic expression (e.g. “2n” or “4n-1”). 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 ************
➡️ Hooks in React JS in Hindi | useState in Hook in React JS: • #30: Hooks in React J...
➡️ Array Destructuring in ES6 in JavaScript in Hindi 2020: • ES6 Tutorial #5: Array...
➡️ Object Destructuring in ES6 in JavaScript in Hindi: • ES6 Tutorial #7: Objec...
➡️ React DevTools & Source Code Link: www.thapatechnical.com/2020/0...
➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: • React JS Tutorial in H...
➡️ ReactJS JavaScript Array Map Method in Hindi with Example: • ReactJS JavaScript Arr...
➡️ Fat Arrow Function in JavaScript in Hindi 2020: • ES6 Tutorial #8: Fat A...
➡️ #23: Array in React JS in Hindi | React JS Project Netflix App #2 in Hindi in 2020
➡️ Array in JavaScript in Hindi: • JavaScript Tutorial in...
➡️ #22: React JS Project Netflix App Part #1 in Hindi in 2020: • #22: Props in React Js...

➡️ Install VS Code for ReactJS LINK: www.thapatechnical.com/2020/0...
➡️ Check Complete Reactjs in One video here 👇 • ReactJS For Beginners ...
➡️ HTML in One Video: • Learn HTML in One Vide...
➡️ CSS in One video: • Learn Complete CSS In ...
➡️ CSS FlexBox in 30 Minutes: • CSS FlexBox in 30 Minu...
➡️ JavaScript in One video: • JavaScript in One Vide...
➡️ ECMAScript 6 in One Video: • ES5 & ES6 | ECMAScript...
➡️ HTML5 in one video: • HTML5 Tutorial in One ...
➡️ CSS3 in one video: • Learn Complete CSS3 In...
➡️ Bootstrap4 in One video: • Bootstrap 4 in One Vid...
➡️ Jquery in One video: • jQuery in One Video in...
➡️ JSON in one video: • JSON in One Video in H...
➡️ ReactJS in one video: • ReactJS For Beginners ...
➡️ PHP in One Video: • PHP TUTORIAL IN ONE VI...
➡️ NodeJS in one video: / ipnwakoibt
➡️ MySQL in one video: • Complete SQL & MySQL i...
********** CLICK HERE TO WATCH ************
➡️ Fetch API in JavaScript: • Fetch API in JavaScrip...
➡️ AJAX tutorial for beginners in Hindi: • AJAX tutorial for begi...
➡️ Template literals (Template strings) in ES6 in JavaScript in Hindi: • ES6 Tutorial #3: Templ...
➡️ Async Await in JavaScript in Hindi: • Async Await in JavaScr...
➡️ Promises in JavaScript in Hindi: • Master The Promises in...
➡️ Callback Hell in JavaScript: • Callback Hell in JavaS...
➡️ Advanced JavaScript in Hindi Playlist: • Advanced JavaScript Tu...
➡️ ECMAScript Tutorial in Hindi 2020: • Modern JavaScript ES6 ...
➡️ ES5 & ES6 | ECMAScript 6 in One Video in Hindi: • ES5 & ES6 | ECMAScript...
➡️ JavaScript Game Development Series in 2020: • JavaScript Game Develo...
➡️ Source Code Link: www.thapatechnical.com/2019/1...
➡️ Top 5 Programming Languages in 2020: • Top 5 Programming Lang...
➡️ Ludo Game JavaScript Link: • JavaScript Game in Hin...
➡️Plz show some love to My Siter RU-vid Channel and Plz Subscribe Link: / @mayabeautyvlogs878
**************** MUST WATCH VIDEOS *****************
➡️ How to become a Full Stack Developer 2020: • How to become a Full S...
➡️ How To Become a Web Developer 2020: • How To Become a Web De...
➡️ How JavaScript Works: • How JavaScript Works i...
➡️ Follow me on Instagram: / vinodthapa55
Make Website Responsive Using Media Queries in One Video in Hindi | Web Design Tutorial in Hindi
➡️ Link: • Make Website Responsiv...
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.
Don't Forget to Follow me on all Social Network,
Website Link: www.thapatechnical.com
Instagram Link: / vinodthapa55
Facebook Link: / vinodthapa55
Twitter Link: / vb55thapa
Facebook ThapaTechnical Page Link: vinodbahadur...

Опубликовано:

30 июл 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 77

@ThapaTechnical 3 года назад

Guys, believe me it's awesome.. matlb all selectors ek property me. Plz share with your friends and classmates too ☺️

@kamalsharma2839 3 года назад

Sir, 2n-1 is correct representation of odd numbers starting from 1. 2n+1 starts counting of odd numbers from 3 and loops end at 11th because total no. of loops or n is set as 5 after 2n loop (as list is total of 10 items and styling must have been already applied to tenth also in 2n loop, provided no other pseudo loops are after like 2n+1 we had). System now unable to understand whose rule to apply for 10th 2n for being even or 2n+1 ending the loop after 2n+1 for odd rule is applied for styling. So, it would have been better put the equation as 2n-1 which is correct representation of odd numbers starting from 1. Most likely , this will solve the problem. Also, now 2n-1 elements must be declared first in css and then 2n as first odd number 1 comes before first even no. 2. It will appropriately solve 10th no. not getting proper styling problem. There are though several other ways too to solve, like adding an extra and make it 11 instead of 10th.

@usamahansari6795 3 года назад

Bhai thanku so much ♥️ mujhe yeh nhi ata tha master series bhott achi banayi hai aapne once again thanku so much

@priyanshusaini6299 3 года назад

11:35 li:nth-child(10n){ }

@RajPhotoEditingMuchMore 3 года назад

Nice sir 👍 Thanks

@DEEPANSHU_NAG 3 года назад

Thanks 🙏🏻 for today's video sanday ka video ka wait kr rhe h is series ko continue kre ....

@akshatgarg6249 3 года назад

You're are my teacher You're are god You're are my beloved....

@kirann671 3 года назад

AWESOME ❤️

@mr_virani6307 3 года назад

apkse video main se daily kuch naya sikhne ko milta hai thanks thapa technical like and share kijiye is video

@mywebsite6524 3 года назад

nth-last-child(1) pseudo class to catch the last element And your teaching style awesome From Bangladesh

@tileshwaripatel2190 Год назад

its really amazing...your way of explanation is very good😊.. .thank you sir....

@aryamaurya1533 3 года назад

Your video is always awsome👌👌

@kaushikasutar5914 3 года назад

Yes it was helpful me and my friends......

@itcollage8987 3 года назад

Thanks your for your efforts

@elliotwavetrader8090 3 года назад

Bro I seen your many videos. Nice efforts.Your way of teaching is very good. Can you make one video a comparison between flex box, display -inline block, grid , float: left . Which one is best to use. Or any like. No such comparison done by any youtuber. And newbies get confused in that. That may be one of the most watched video possible. Think if you feel fit then make such video.

@creativeakshara8438 3 года назад

Sir you are great 👌😊

@nayanraval5359 3 года назад

Great 😊👍

@ZeshanMukhtar1 Год назад

Awesome

@aaryavaidya8774 3 года назад

Awesome 😄

@munnikhanam111 3 года назад

You are awesome 🤩🤩🤩

@SafarwithAarush 3 года назад

Thanks for these awesome tutorials. Make a tutorial on - How to make a slider.

@mdmahmudulhasan6448 3 года назад

thank you for nice explanation

@vivek5019 3 года назад

Good bro👍.

@deepikakapoor9607 3 года назад

Its well explained

@programmingwithjavascript3579 3 года назад

Nice video

@abhi34776 Год назад

bhai tussi great ho

@kamalsharma2839 3 года назад

@krishna.vineet 11 месяцев назад

Bro, logic is correct if n is natural number. Here n is whole number, starting from 0 So first odd will be 2n+1 i.e. 1 2n-1 will be -1, ispr alag alag browser alag alag react krenge

@johnthapa1879 3 года назад

Thank you so much ☺️

@infotab9523 3 года назад

great

@kurma3992 Год назад

I don't know why iss video pe itna kam like-comments hai. Even it's most satisfactory video and having helthy content with lovely explanation Love you bro😍

@abhi34776 Год назад

agree

@arvind677 6 месяцев назад

Thankyou sir

@ashharmansuri6816 3 года назад

Ki:nth-child(10){ Color: orange; }

@kiranmali4228 3 года назад

Thapa sir, you are rocking. really helpful all the tutorials. I wish your all wishes complete. One question: Could you please tell me which software are you using for your video editing???

@ditinagrawal3182 3 года назад

Filmora

@dhananjaygupta3895 2 года назад

This method of thenth child highLight using nth-child Property li:nth-child(2n+10){ color: red; } And Thank You 👍 For This Video.

@krishna.vineet 11 месяцев назад

Bro, we can go 10n directly But I think is problem me hame ye assume krna h ki "we don't know how many childs there are".. Baki agar pta h to 10n is straight forward easy

@asnpatil 3 года назад

Nice

@RajeshKumar-ee7by 3 года назад

9n+1 is for last

@ramanrocks1694 2 года назад

Thapa bhai, if we have a dynamic list and we want to style only last 5, how can we do using pseudo classes

@levelxgamingyt 3 года назад

Super bro

@anamikamishra2152 3 года назад

Thankuuuuu

@ashishkumarsah9356 3 года назад

Nth-child(10n) Nth-child(10) nth-child(5n+5n) nth-child(5n+5):not(nth-child(5))

@ankitabharuka1945 3 года назад

Please tell which is that website from where you take colors

@saurabhbhaskar7964 3 года назад

How to apply color to middle child without JS for dynamic number of elements?

@akankshagarg5400 3 года назад

Awesome sir.. sir your all tutorial vedios are amazing. Thanks you sir.. Sir main ek courier company me work kr rahi hun par usme muje track id add krna hai.. usko kaise add krun.. location kaise bta chalegi.. coding?? Please sir guide me