CSS Tutorial: More on CSS Selectors | Web Development Tutorials #31
CSS Tutorial: More on CSS Selectors | Web Development Tutorials #31
► 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 -> We have seen many things in CSF so far.
2.675 -> We also saw if we want to style anything
5.886 -> Then we need to use selector there.
8.323 -> So, I will quickly create a file named tut31.HTML
14.334 -> And will quickly Show you more on selectors
20.326 -> And we will see about selectors here
22.981 -> How we can use more advanced selectors
26.669 -> But before that many people still comments
29.463 -> That you haven't showed from starting show step by step
32.814 -> so I have shown step-by-step here in my playlist
35.787 -> Bookmark it and save it you will get all the videos
39.415 -> I will come back here again and we will see about selectors
43.163 -> Some more. We have seen basic selectors
48.241 -> In which we used to write elements name and select
50.837 -> And it was something like this I wrote h1 and this is more
55.24 -> On selectors. And as I write H1 here after this
59.464 -> For example I write H1 and background-colour: red;
64.78 -> And make colour: black; font-weight: bold;
71.387 -> Just doing it. Not focusing much on styling.
75.929 -> I will click on go live and it opened this is more
80.113 -> I wrote no selector I have to write on selector
83.503 -> Wrote more on selectors and with that if I want to make it centre
88.005 -> Then text-align not Emphasis, align: center;
94.871 -> And it is centred. I can do like this if I want.
98.817 -> There is nothing much unit but
102.346 -> If I want to set an element in a more advanced way
106.332 -> Then I should know that too
107.776 -> So I will tell you how it works
110.829 -> If I make a div .container here
113.107 -> And make div .header inside it
116.815 -> or else will make div. row and inside it I write
125.11 -> One paragraph in which I will write this is a paragraph
129.91 -> And with that will write p and this is another paragraph
137.034 -> Save it and will write one more paragraph this is outermost paragraph.
145.727 -> Saved it and here paragraph, another paragraph, outermost paragraph
150 -> all this is written. Now, if I want to select all the paragraphs inside div
157.024 -> So, I can write div p like this means all the paragraphs inside div
163.075 -> will apply this property. Suppose I write color: yellow;
167.438 -> And made font-weight: bold;
171.782 -> Then see this property applied only on these 2 not on the last one
177.833 -> Why not? Because in my selector I have told that P inside div
185.175 -> It can be inside Div's div's div's div's div
190 -> Then too this property will apply on it
192.874 -> I will give background colour too to show you background-colour: green;
198.309 -> Saved it and it is looking like this.
201.898 -> So if I want to make 1 P inside div like this
205.626 -> Then I can use this selector but
209.294 -> But sometimes you may want the P inside direct div affects
215.107 -> with the properties I have mentioned here
220.105 -> Affect only to those who have direct p inside div.
223.356 -> So here I have written div p if I enter this inside ul,
227.044 -> And inside ul I write li and in that I will write
230.672 -> Class=item x 4
234.042 -> Write a paragraph tag inside it
236.975 -> And write this is another paragraph inside li
242.312 -> Let me keep just one li I don't need more
247.112 -> To it applied on that too because what I have written here
251.217 -> This selector which I have written says any div contains P inside it
255.977 -> Means will start from this div and apply on all the p it get inside it
259.566 -> It will apply on all and then will go inside this and will apply on all
263.77 -> Applied on all p's except this one
268.014 -> So this div p selects p in any depth present inside div.
278.394 -> I wrote div p li then it will apply only for li
283.015 -> So, here li inside P inside div
285.889 -> So there is nothing like that, no li inside p inside div.
289.656 -> We have p inside li inside div, look. So, if I write div li p
296.7 -> Then it will only affect to this one
300.348 -> Let me show you see this is affecting it
302.924 -> Now if I keep any li inside this
305.381 -> div li p, and let me show you, will add another paragraph
310.797 -> I have kept this for P here
312.797 -> Then won't apply on any p and if I write li then also won't apply.
317.081 -> This will not get affected
322.238 -> See nothing happened and you understood this
326.105 -> I hope you have understood this I will comment this out.
329.019 -> And here I will show you
333.144 -> That how if you want to follow a particular hierarchy
338.361 -> Like if you want to go inside a specificity that li inside ul inside div
345.465 -> Then what you will do? As I have written here
347.703 -> As I have written div and P here, what happened?
351.569 -> All these were affected
354.334 -> Now p is not the direct Child Of div see here
357.367 -> This p, this is another paragraph inside li one
361.174 -> Is not direct child of my div. It's parent is li
366.487 -> But then too it affected the property.
368.586 -> But sometimes you want to apply property only when it is direct child
372.115 -> Then you can do something like this
373.738 -> Use greater than sign >, which means
377.744 -> The direct child of div should be p.
382.306 -> then only it will apply like this is my div container.
385.696 -> it has a div and a p element inside it
389.245 -> This property will apply on this is another paragraph
392.099 -> Because direct element inside div is p,
395 -> And it is a child of my div class="container"
400 -> And with that this p is also direct, this is a paragraph.
405.118 -> So this 2 affected here see
407.714 -> Now if I had any other paragraph anywhere like here
411.68 -> This is a para inside ul
415.586 -> Then it will not get affected because it's not a direct child
420.704 -> I have written p direct inside div
424.372 -> p should come after div, if that happens apply this property
428.874 -> Else don't apply the property
431.45 -> That simple. Now I will tell you about one more selector
436.449 -> And will show you about that selector here
439.76 -> It's that if you want to apply CSS on all those elements
447.082 -> Whose last element is there
450.71 -> So, if I write div +p
452.948 -> Then this property will apply, I will make colour: white;
458.066 -> Will make background-colour: red;
465.488 -> will remove this for now.
467.965 -> So I am saying that paragraph whose last sibling is div
473.421 -> Let's see here I am collapsing it.
475.878 -> This is a paragraph whose last sibling is div
479.725 -> Sibling mean that, what is the parent of this p?
485.697 -> It is inside what? It is inside body look carefully.
487.935 -> It Inside body, I have H1 inside body.
490.471 -> This div, let's forget what inside it
493.424 -> And here p, this 3 are siblings of it
497.112 -> This p's last sibling is what? Container.
500 -> So its last sibling is div.
503.132 -> So this paragraph will apply this property
505.926 -> Let's see whether it does have any paragraph
509.217 -> which has last sibling div? Yes.
510.76 -> See, this is another paragraph's last sibling is what?
513.634 -> It's div. So, these 2 should apply this property.
516.686 -> On another paragraph and outer paragraph.
518.368 -> So it applied on another paragraph and Outer paragraph
522.215 -> Now let me change this red because I have given this in heading too
526.26 -> So I will make it lighter like this
528.717 -> Saved it and see it became lighter, This was another red.
532.842 -> To our h1, so I hope you have understood this.
536.351 -> So if div is direct parent of p
539.443 -> Then this property will work
543.627 -> And if div is last sibling of p
547.315 -> Then this property will work. I will comment this out too.
552.195 -> I hope you have understood this.
554.493 -> Let me write comments here quickly.
556.831 -> Here I'll write, if p is contained by any li which is contained by div.
572.634 -> Now here it's not necessary it's direct child
576.262 -> It can be div has many thing inside it inside which there is li
579.136 -> And many things inside it which has paragraph then.
581.771 -> Then this property will apply
583.771 -> but the thing I am writing here. If p is right inside div
595.442 -> then this CSS will be applied.
603.181 -> So we wrote this here. Now let's see what this + mean?
608.696 -> Here we will write if p is right after div
616.972 -> or another way of saying it, P is next sibling of div
628.999 -> I want you all to apply all this property by yourself and see
631.694 -> Because if you don't see it by applying yourself
633.694 -> Then you won't get it so well
636.27 -> I want you to understand things clearly
638.965 -> To keep things with clarity you have to try all this by yourself
644.023 -> So I hope you have understood this thing clearly
646.658 -> If you haven't access to this playlist yet
649.194 -> Then kindly do access this playlist
652.008 -> Because this is the place where I am uploading all the videos
655.338 -> And telling the things step by step
657.616 -> So for clear clarity you should access this playlist
661.9 -> Also, many are asking that is there any prerequisite for this course?
665.787 -> I will say nothing you just have to give time to this
669.455 -> Your time and your wish of learning you have to give.
674.335 -> And try by yourself after watching the videos, everything.
679.393 -> do experiment. The more you code the more it will be beneficial
684.173 -> So I will see if you watch it from starting till end
687.662 -> I designed this course so that by watching from starting till ending
692.859 -> No one can say I didn't understood CSS
696.031 -> or HTML because I am going to make this course like
699.481 -> I will add everything in this and will make your web developer
705.606 -> So you just stay in the course and watch all the video step by step
709.076 -> That's it for today's video
711.076 -> If you haven't excess this playlist yet then click here to bookmark
714.466 -> Click here and save it. With that if you are liking the videos
718.313 -> Then kindly give me a like
720.313 -> I want to add one more thing here
722.055 -> I am giving all the source code of videos in description
725.366 -> So you will get source code by clicking on the description link
729.63 -> You have to go to my website, let me show you.
733.735 -> And going in the video section of this course
736.827 -> Click on start watching
738.827 -> And all the code of that video you will get in video section
743.051 -> You can copy it by clicking here and use it
747.156 -> You can watch it from here however you like
750.228 -> Copy the code properly and as you will paste it
754.551 -> Anywhere I will pasted here there was no point in that but anyways
758.219 -> As I will paste, I will paste here
760.993 -> So it came here I have made easy code copy pasting for you
765.912 -> Use all the features on which I have worked
768.925 -> Made all this things for you so take link from description
772.752 -> Do access code if you are just watching or experimenting
777.751 -> Don't want to type this all over again
779.751 -> So, hence I have given you this code
781.751 -> So that's it for this video
783.751 -> Thank you so much for watching this video
785.751 -> And I will see you next time
Source: https://www.youtube.com/watch?v=WwUM7qOimbo