CSS Tutorial: Attribute & nth child pseudo Selectors | Web Development Tutorials #32
CSS Tutorial: Attribute & nth child pseudo Selectors | Web Development Tutorials #32
► Source Code \u0026 Notes: https://codewithharry.com/videos/web-…
►This video is a part of this Complete Web Development in Hindi Course Playlist: • Web Development Tutorials For Beginne…
►Click here to subscribe - / @codewithharry
►Checkout my English channel here: / programmingwithharry
Best Hindi Videos For Learning Programming:
►Learn Python In One Video - • Python Tutorial In Hindi 🔥
►Python Complete Course In Hindi - • Python Tutorials For Absolute Beginne…
►C Language Complete Course In Hindi -
• C Language Tutorials In Hindi
►JavaScript Complete Course In Hindi -
• JavaScript Tutorials In Hindi
►Learn JavaScript in One Video - • JavaScript Tutorial
►Learn PHP In One Video - • Learn Php In One Video In Hindi - हिं…
►Django Complete Course In Hindi -
• Python Django Tutorials In Hindi
►Machine Learning Using Python - • Machine Learning Tutorials For Beginn…
►Creating \u0026 Hosting A Website (Tech Blog) Using Python - • [Hindi] Web Development Using Flask a…
►Advanced Python Tutorials - • Intermediate/Advanced python Tutorial…
►Object Oriented Programming In Python - • Object Oriented Programming Tutorials…
►Python Data Science and Big Data Tutorials - • Python Data Science and Big Data Tuto…
Follow Me On Social Media
►Website (created using Flask) - http://www.codewithharry.com
►Facebook - https://www.facebook.com/CodeWithHarry
►Instagram - https://www.instagram.com/codewithharry/
►Personal Facebook A/c - https://www.facebook.com/geekyharis
Twitter - https://twitter.com/Haris_Is_Here
Content
0.182 -> We saw about pseudo selector in last video
3.312 -> And we saw in detail that which selector works how.
7.007 -> Today we will learn about more pseudo selectors
10.641 -> And they will make your life easier when you will do web development
14.638 -> So here I will write tut32.HTML
17.99 -> With that I will add my HTML boilerplate template
22.956 -> And here I will write attribute and nth child pseudo selector.
32.764 -> So will do this and with that I will make some markup
38.033 -> First of all I will go Live by clicking on go live
41.365 -> And by clicking I am live now
44.354 -> If you haven't access this playlist at then do access
47.887 -> Because I am still getting comments
50.089 -> that you haven't showed step by step
51.685 -> So please, I have explained from starting
55.804 -> Access this playlist, bookmark from here and save it
59.499 -> Link is in description, I will come back here in my body
62.951 -> Will add some markup div .container
65.415 -> Working quickly because I know that you know this very well
71.047 -> Now here li.item#item$*5 and 5 item will create
82.167 -> So, will do item1, item2, item3, item4, item5.
92.238 -> with that I'll write form action="" form.form-control
104.298 -> Just added a class nothing else.
107.367 -> And kept input type=" text" and placeholder = "Enter your name"
114.795 -> And I don't want to waste time entering makeup
117.925 -> After this let me keep type="password"
121.175 -> and will write here "Enter your password". Saved it
125 -> Then will right input type="submit" value="Submit"
131.701 -> And a bad looking form is designed which has nothing
137.534 -> Great I don't have any problem till now
139.857 -> Will come here add style so that I can write CSS and inside it
144.702 -> Here what I want to do is select that input which has type="text"
151.464 -> Listen carefully whose type is text
155 -> To do that what I will do is make input display: block and
161.137 -> As soon as I did that see what happened
163.782 -> It will look like this with that if I want my container
171.855 -> If I have to give container some padding
176.377 -> Not padding margin: 34px 23px;
181.565 -> Now you'll say where this 2 number came from?
183.242 -> this 2 numbers are random I just created right now.
186.715 -> So don't think like what I did
189.199 -> See this is container if I make its display: inline-block;
202.016 -> Set its width: 233px; and margin: auto;
208.435 -> So what I did in this container?
211.202 -> First of all made its display: inline-block; width: 233px;
216.107 -> And made margin: auto ;as I will do that
220.609 -> So, it didn't came in Centre, for that I have to make it block.
224.244 -> So we have seen if we want to Centre any block element
227.878 -> So first of all we will set its width
229.454 -> And make margin: auto; will Centre it
231.979 -> So here I will make my container display block
235 -> Will set its width and save. Let me remove margin from here
242.407 -> I have made it Centre, let me close the console and see here
246.747 -> I got the form. Now form is done
250.28 -> Now if I want to select only those input whose type is text
255 -> Then how will I do it let's see
257 -> For that I will use a pseudo selector
259.807 -> I'll write input[type="text] like this
268.566 -> now I'll do padding: 23px; and border: 2px solid red;
278.374 -> and as I will do this, this property applied on type="text"
284.651 -> I know this form doesn't look nice and I didn't even wanted
288.063 -> I just wanted to show you this property.
290.063 -> I wanted to show you this pseudo selector
292.094 -> which you can do by targeting attribute
295.055 -> Suppose I have entered an input H1
298.992 -> inside h1 I put anchor tag
301.396 -> and here href, I had to write link
305.928 -> a:link and href="http://google.com"
311.156 -> I will write go to google. Save it and see here go to google.
318.059 -> Now suppose I want to open the Google in new tab
322.5 -> Then I will write here target="_blank"
326.578 -> As I will do this and click, google will open in new tab
331.967 -> Suppose I want to select an element such that
335.521 -> or to select such anchor whose target is set.
339.337 -> Then I can do that like this, I will write
343.012 -> I will increase the font-size: 34px; and with that
348.361 -> color: violet; save.
354.618 -> Here you can see the colour is violet and font size is set.
359.019 -> Let me increase its font-size: 64;
362.33 -> I know I made it a lot bigger but that's ok
365 -> will make it 44 again
367 -> So this applied on that anchor tag
371.139 -> Whose target is set
375.641 -> If I remove this target="_blank" then this property doesn't apply
381.152 -> If I keep this then property applies
385.735 -> Because this CSS will only Trigger when a has target
390.661 -> If there is another anchor tag without it then it won't apply
396.414 -> Suppose I created a new link here
400.593 -> I will do ctrl +D and write Facebook instead of Google.
408.868 -> I have selected this too maybe I left before pressing button
414.661 -> I will write Facebook like this if you press alt + click here
419.445 -> you can use mulit-curser, anyways do all that.
422.958 -> Suppose I write _self which is a target
427.299 -> Then do this will work like this but if I remove this
433.106 -> So it's not working. Suppose I want the target _self
437.991 -> Should Trigger another CSS then I can do something like this
442.917 -> Suppose I want to make its colour bluish like this
448.045 -> Saved and see go to Facebook
451.074 -> Go to Google, go to Facebook.
453.074 -> I have kept its font-size: 44px;
457.536 -> If I want to reduce it to 14px
459.818 -> and color something blueish then I can apply that here.
463.372 -> So, in this way I can take CSS selectors according to attribute.
471.243 -> Suppose I want to select an anchor tag whose target is _blank or _self
479.619 -> So I can do in that way.
482.426 -> So this was our pseudo selectors
485.819 -> I hope you understood the target specific pseudo selector
490.24 -> In a similar way we can write input[type="email"]
497.062 -> Now suppose for some reason I make its colour: yellow;
500.323 -> I know it will not look nice but assume I want to do it
505.249 -> And I want to make border: 4px solid red;
508.803 -> And here in my form I will add an email and write enter your email
517.504 -> See enter your email has border and properties which I applied
523.963 -> So you can do like this on type="email" type="text"
527.9 -> can even do on type="password" it will be your choice
531.252 -> you can select specific tag or input according to attribute.
540.706 -> I hope this is clear, now I will explain nth child pseudo selector
547.871 -> Suppose I want to select li
550.335 -> So, I'll write li:nth-child(3) and here I want to make color: cyan;
560.282 -> So, see 3rd element turned cyan. Let me write more elements
566.297 -> So, you enjoy. So, here let me make it 6, 7 and 8
576.449 -> So, I have to work hard a little here, we should work hard in life.
581.071 -> without hard work life is useless.
585.855 -> now, 9 here too and here 10. I think that's enough
593.706 -> won't keep more than that. So, here our li:nth-child(3)
598.127 -> will select my 3rd element
601.56 -> And will apply these properties on it as you can see
608.382 -> Now this will change my property on position number 3
610.967 -> So, I'll write that this will apply CSS for third child.
628.322 -> So it will only apply the CSS on 3rd child
635.265 -> Now suppose I want to apply on every 3rd or 2nd child
640.191 -> Then I can write something like this 2n+0 which means
647.78 -> That I want to make colour: red; on every 2nd element
651.576 -> See on every second element colour became red.
658.681 -> I have written item 5 twice let me remove it
661.045 -> and you can see every 2nd or even element has color red.
665.85 -> So, this was how we can select every second element
670.191 -> Now what it does? It starts from 1 just using the formula, nothing else.
675 -> So if I make 3n+ 1 or 3n+ 3 here
678.715 -> Let me remove this here, then first of all it will run for n=0
684.569 -> Means my third element will be red as you can see.
689.152 -> Then n=1 I will keep which means 6
693.351 -> If I keep 3 then 3*3 is 9 it will make 9 red.
697.792 -> So basically it starts like this putting n in the formula
702.032 -> Now if this value evaluate from 0 then no element get affected
705.908 -> So I hope you have understood
708.352 -> Now here if we want to take odd and even child
712.915 -> So, if I write like this odd child then I can write like this
717.679 -> li:nth-child(odd) and as I will do this
723.714 -> Suppose I want to make background-colour: yellow, bad colour.
731.828 -> ctrl+D there should be even if there is odd
739.801 -> Let's do one by one so here it give background colour to odd
750.195 -> Now if I want to give even yellow colour so I will comments out
755.322 -> and see it gave to even, So I want you to access this code
759.4 -> I have given link in description
761.077 -> I put all codes link in description
763.077 -> So make sure to access when I give you link
766.59 -> And write code by reading the comment I write for you only
769.861 -> So that you can watch and learn
772.143 -> With that I always give importance to practice
777.593 -> So I hope you have understood and with that
781.409 -> If you haven't access the playlist yet then do access
785.144 -> And do like the video if you are liking it
787.749 -> And you will get this code for your reference
791.968 -> You will get all the things which I have shown you here
795.683 -> By right clicking->format document will beautify this
798.689 -> make sure to do that too, if I forget.
801.113 -> That's it for this video
802.911 -> If you haven't access the playlist yet then do access
805.96 -> And access the source code from description too
808.323 -> Thank you so much for watching this video
810.401 -> And I will see you next time
Source: https://www.youtube.com/watch?v=P-hZDC5YkJE