Summary of Lecture 21 1. Cascade: Many selector are used to style a single element and css solve this conflict by Cascade. 2. Cascade Algorithm : It determine which property of CSS will be applied in Element. The cascade algorithm has 4 distinct stages. 3. Position and order of appearance : If same selector, then last one will be used 4. Origin: authored CSS has priority 5. Important: When !important It has highest priority. 6. Specificity: Selector with high specificity is applied to html element. 7. Order of Specificity: Inline Style > ID selector > Class or Attribute selector > Element Selector > Universal Selector 8. Calculating Specificity: Value of Each Selector: Universal is 0, 1 for each element selector or pseudo-element, 10 for each class value (or pseudo-class or attribute selector), 100 for each ID value. Inline Style has 1000 specificity. Just add value to find specificity. #SigmaBatchOP #HarryBhai Completed Lecture 21 ❤
@@manshalkhatri9289 Watch this 10:26 timestamp carefully. You can clearly see about pseudo class and pseudo elements. Also Harry bhai is explaining it. 😊
He has not teached only for web development but he has also prepared for interview theory. Thank you so much for this effort, literally no one even bother for this cause. You are goat. hatsoff to you. Love you Sir! #SIGMABATCHOP #codewithharry.
this video is complex and simple at the same time. The concept of specificity is a bit complex but you explained it in a simple way so we can understand.
Time stamp 12:53 will get maroon color because of Position and order of appearance of attribute selector is at last position So it will override.😇Also specificity of both the class and attribute selectors are same.
Harry Bhai, ek request hai, mai ekdm scratch se suru kiya hai ye batch..to hr class k end me ek chota sa exercise de diya kro..kiuki exercise solve krne k baad hi confidence aata hai..warna lagta hai kuch nhi sikh paya🥲
13:01 The color of will be maroon because, the points of the class selector and attribute selector are equal. So, the element which is to the bottom will get the priority. #SigmaBatchOP
16:15 the total specificity is 41 ie 1+10+10+10 +10 a is element selector = 1; .harryclass and .rohan-class are class selectors = 10 each; [href] is attribute selector = 10; :hover is pseudo-class selector = 10. Hence, total is 41
The specifity is 41. Explaination: a would be 1 --> element selector. .harryclass would be 10 --> class selector .rohan-class would be 10 --> class selector [href] would be 10 --> attribute selector :hover would be 10 --> psuedo selector Total will be 1 + 10 + 10 +10 + 10 = 41. Thanks for bringing such useful content. Dil see shukriya harry bhai❤
13:13 the color of h1 will be maroon cuz the it has 10 points(😅) which is equal to class selector that means it's a tie. In case of tie, the last one get's the priority :)
13:05 The color will change to maroon as the specificity of class and attribute are same (10) but due to positioning, attribute will get preference here. 16:00 specificity will be 1+10+10.
Summary of the video in this video we will learn about the specificity/ priority of CSS in giving colours, etc, below is the example ie inline style ID Class(last class) universal selector data-x="a" is the example of attribute selector, which is the highest priority above inline. to calculate specificity - Specificity of element is 1 Specificity of class is 10 Specificity of attribute selector is 10 Specificity of inline is 1000 Specificity of pseudo selector is 10 Sometimes complex seelctors comes like h1.red like this, so in that case we will add the specificity of both h1 and the .red(Class) part therefore it becomes 1+10=11
Thank you harry bhaiya for uploading videos consistently.. Proud to be the Student of Sigma Web Development course #SigmaBatchOP 🔥🔥 We will raise the bar like anything 💪
I've been a dedicated follower of your course for quite some time. While I find the content incredibly valuable, I believe it could benefit from a more robust set of exercises. Currently, there are only two provided. If you were to include a straightforward exercise at the conclusion of each video, I can confidently say that there would be no hesitation in continuing to follow this course. The moment you implement this change, you can count on me to enthusiastically support it with #SigmaBatchOp
Hello, please help me I am confused like I understand each and every think that Harry teach in the lecture but I never try to memorize them so whenever he give an exercise then I feel like I am not able to memorize them so what should I do 😢
Hello Harry bhai , I have been following u for so long , I just have a suggestion, can u teach us industry level production grade stuff, (just like code with antonio). I think that will help a lot of students in mastering web development.
#HarryBhai 1 Tip for beginners: agar aapko vs code ke color picker me color value change karni hai (means RGB to HEX to HSL or Vice-versa) to aap color picker main top pe color code zaha likha hota hai vaha click kar sakte ho. Hats off to your great efforts, keep the good this up. #SigmaBatchOP
#SigmaBatchOp 13:01 maroon because of position and order of appearance 16:00 Specificity = 1(element) + 10(class) + 10(class) + 10(attribute) + 10(pseudo) = 41
TimeStamps ⌚ Introduction - 00:00 Sigma Web Development Intro - 00:32 What is Specificity in CSS - 01:21 Exploring Different Classes - 01:58 Cascade Algorithm in CSS - 02:36 Best Practices in CSS - 18:06 Conclusion - 19:25 Sigma Outro - 19:44
array harry bhai adhi rat ko itni zor se hassi ae mere dimagh me ye beth ne re the me soch re the abi ap bolo ke ye kam use hote hen ap ne to problem he solve kr dia love you bhaiya love from pakistan
1.)The color of h1 will be maroon as specificity of attribute and class is same but attribute is written at last so by position and order maroon from attribute will be applied(got correct) 2.)The specificity will be 21 of a.harryclass.rohan-class[href]:hover (got wrong) sorrry bhaiya i thought (.rohan-class[href]:hover) is one class only so took it's specificity as 10 so now got it 1+10+10+10+10=41 Thank youuu sooo much bhaiya got the clarity noww, will surely read it once again and focus more to get more understanding reallyyy awesome videoooooooooo💕💕❤❤💖💖 #SigmaBatchOp completed tutorial 21
The color of h1 will be marroon,because specificity of attribute selector is as same as class selector therefore it will be determined by its position.
12:55 maroon because attribute selector has same specificity as class selector and it's position is on last 15:57 41 because a=1 (Element Selector) .harryclass=10 (Class Selector) .rohan-class=10 (Class Selector) [href]=10 (Attribute Selector) :hover=10 (Pseudo Class Selector
In that question the attribute selector will apply as it has same value as of the classes but because of being on the last of the list of the list it has more priority.
00:03 - Specificity in CSS determines which styles will be applied when conflicting selectors are used. 02:29 - The Cascade algorithm in CSS determines which property will be applied. 04:27 - CSS specificity determines which selector has the highest priority when resolving conflicts. 06:45 - The most specific selector is the inline styles. 08:45 - Understanding CSS specificity and the importance of 'important' 10:54 - Selectors in CSS have different specificities based on their type and attributes. 13:01 - Understanding Specificity in CSS Selectors 15:16 - Understanding specificity in CSS 17:15 - Understanding CSS specificity and the importance of writing clean and concise code 19:25 - Engage with the video by liking, sharing, and engaging with the content
13:08 the color maroon will be applied since specificity of attribute selector is equal to class selector. Hence since they are equal, the selector which is at last position (i.e., attribute selector) it's property will be applied!
13:15 The background color of h1 would be maroon as there is a tie between the 3 other classes and the attribute selector is in last, which is given the topmost priority.
12:51 Answer:The answer will be maroon because all the selector have same 10 value and according to Position and order of appearance the lowest will be selected so maroon is the answer
a: 1 points for element selector. .harryclass: 10 points for class selector. .rohan-class: 10 points for class selector. [href]: 10 points for attribute selector. :hover: 10 point for pseudo-class.
#sigma batch op #SOLUTION attribute selector aayega because vo sabse last m h .maroon color #solution2 a.= 1 element selector , harryclass = 10 , rohan-class = 10 , [href] : hover / attribute selector = 10 ans = 31 , my ans is not correct bez = [href ] is (attribute selector) = 10 :hover is (pseudo-class selector) = 10 so , the ans is 41 #thankyou harry bhai
Yes h1 will be maroon as the specificity of attribute selector and class selector is same and maroon color is given at the last so h1 will get maroon color.
Summary of Lecture 21
1. Cascade: Many selector are used to style a single element and css solve this conflict by Cascade.
2. Cascade Algorithm : It determine which property of CSS will be applied in Element. The cascade algorithm has 4 distinct stages.
3. Position and order of appearance : If same selector, then last one will be used
4. Origin: authored CSS has priority
5. Important: When !important It has highest priority.
6. Specificity: Selector with high specificity is applied to html element.
7. Order of Specificity: Inline Style > ID selector > Class or Attribute selector > Element Selector > Universal Selector
8. Calculating Specificity: Value of Each Selector: Universal is 0, 1 for each element selector or pseudo-element, 10 for each class value (or pseudo-class or attribute selector), 100 for each ID value. Inline Style has 1000 specificity. Just add value to find specificity.
#SigmaBatchOP #HarryBhai
Completed Lecture 21 ❤
This is a client round interview question.👍
Pseudo ke liye 1 he Aisa to nai bataya hary bhai ne
@@manshalkhatri9289
Watch this 10:26 timestamp carefully. You can clearly see about pseudo class and pseudo elements. Also Harry bhai is explaining it. 😊
Google script course start karo please🎉
9. Best Practices: Avoid using complex selectors mainly stick to class and if want more specific then use id.
16:00 The specifity is 41 due to
a=1 (element selector)
.harryclass=10 (class selector)
.rohan-class = 10 (class selector)
[href] = 10 (attribute selector)
:hover = 10 (pseudo-class selector)
Thank You ❤
noice
here i forgot pseudo class then after some time strike on mind oH! harry bhai told earlier already about pseudo class 🤭
a is which element?
@@Hloo-z4w inline element
@@DarpanSapkotaa naah I mean what is the role of a in general
17:20 maine total value 21 hi calculate kiya, lekin ab samajh me aa gaya hai.
Literally........ Intro and outro is outstanding 🔥🔥🔥
purane wala outro bhi alag hi level lagta hi
The intro is so good I never skip it
Yes bro!
hamm when we come from low energy than also this intro and harrybhai mood make my energy highest
harry sir aapka ye web development ka course access karne ke bad kisi or ki videos dkehne ki need hee nai hogi ❤this course in superhit 🎉
thank you for increasing lectures time.
I needed a course like this, But I was not able to pay the fees...
thank you for giving us so much. 🙂
profile change kro please
how to css:
!!! style ="profile image URL(accha sa photo .jpg);"
@@clasher4174 kuch bhi 😂
🤣
Yeah
Make sure to stay consistent.
@@indeedmyself bro you completed full playlist? Apne kisi intership or job k liye apply Kiya?
16:17 the answer is 41 as
a=1
.harryclass=10
.rohan-class=10
.href=10
.href=10(Pseudo selector)
He has not teached only for web development but he has also prepared for interview theory. Thank you so much for this effort, literally no one even bother for this cause. You are goat. hatsoff to you. Love you Sir! #SIGMABATCHOP #codewithharry.
this video is complex and simple at the same time. The concept of specificity is a bit complex but you explained it in a simple way so we can understand.
fr bro
Time stamp 12:53 will get maroon color because of Position and order of appearance of attribute selector is at last position So it will override.😇Also specificity of both the class and attribute selectors are same.
overwrite*
@@MukundNarayanJha-yl7co it is Overried bro, Which is correct.
This video was in detail.
Hovering over a selector in VS Code gives the Specificity of that Selector.
Harry Bhai, ek request hai, mai ekdm scratch se suru kiya hai ye batch..to hr class k end me ek chota sa exercise de diya kro..kiuki exercise solve krne k baad hi confidence aata hai..warna lagta hai kuch nhi sikh paya🥲
Experience he sath he confidence b build hoga bro…sab kuch sahi lgega jab ek webpage banane start kroge tab lag kroge
Bro hm sare apke sath h
Same..apke sath hai..or excercise ki bat karte ho toh . Notes uthao usme excercises likh rakhi hai
You are right bro
Sahi kaha apne
13:01 The color of will be maroon because, the points of the class selector and attribute selector are equal. So, the element which is to the bottom will get the priority. #SigmaBatchOP
Thank you harry bhai for keeping this course free, dill se dhanyavad
16:15 the total specificity is 41 ie 1+10+10+10 +10
a is element selector = 1;
.harryclass and .rohan-class are class selectors = 10 each;
[href] is attribute selector = 10;
:hover is pseudo-class selector = 10.
Hence, total is 41
such such batao, kya tumne first attempt me hi solve kar liya and bina solution dekhe ? 😀😄😄
Color will be Maroon of the tag. Timestamp : 13:10
#SigmaBatchOP #HarryBhai
Thank you for explain this in so. It will be very useful in the interview.
It was very easy to understand❤❤❤
Thank you Harry Bhai 😊😊
Sigma Batch OP ❤
12:55 maroon
13:26 red
16:00 (0,4,1) => 41
a=1 → Elemental Class
.harryclass = 10 → Class Selector
.rohan-class = 10 → Class Selector
[href] = 10 → attribute selector
:hover = 10 → pseudo-class selector
=> 1 + 10 + 10 + 10 + 10 = 41
yes
h1 color is Maroon 13:15
Specificity of quick quiz is 41. 16:04
tune cheating ki hai pakka qki href wala explain nhi kia tha pheli iki video me
no
The specifity is 41.
Explaination:
a would be 1 --> element selector.
.harryclass would be 10 --> class selector
.rohan-class would be 10 --> class selector
[href] would be 10 --> attribute selector
:hover would be 10 --> psuedo selector
Total will be 1 + 10 + 10 +10 + 10 = 41.
Thanks for bringing such useful content. Dil see shukriya harry bhai❤
div p:first-child{
background-color: #fffb00;
color: rgb(255, 0, 0);
}
div p{
background-color: azure;
color: aqua;
}
21th Day Complete 5star⭐⭐⭐⭐⭐
Hii
solution:
div>p{
margin: 5px;
padding:40px;
text-align: center;
font-family: 'Montserrat', sans-serif;
background-color: rgb(15, 76, 126);
color: white;
box-sizing: border-box;
flex:1;
}
div :first-child {
background-color: yellow ;
color:red;
}
13:13 the color of h1 will be maroon
cuz the it has 10 points(😅) which is equal to class selector that means it's a tie.
In case of tie, the last one get's the priority :)
Am i the only one who is just in love with the outro bgm itsss toooo guddd yrrr!!!😩❤
color will be maroon as its specificity is 10 and position wise it is in the last
13:05 The color will change to maroon as the specificity of class and attribute are same (10) but due to positioning, attribute will get preference here.
16:00 specificity will be 1+10+10.
bro going on a best track just keep going and maintain this struggle we all are with you don't feel lonely💙💙💙💙💙💙💙💙💙💙💙💙💙💙💙💙💙💙💙
Summary of the video
in this video we will learn about the specificity/ priority of CSS in giving colours, etc, below is the example ie
inline style
ID
Class(last class)
universal selector
data-x="a" is the example of attribute selector, which is the highest priority above inline. to calculate specificity -
Specificity of element is 1
Specificity of class is 10
Specificity of attribute selector is 10
Specificity of inline is 1000
Specificity of pseudo selector is 10
Sometimes complex seelctors comes like h1.red like this, so in that case we will add the specificity of both h1 and the .red(Class) part therefore it becomes 1+10=11
comment ka koi faida nhi , mere jaise log ne video hi 4-5 baar dekhli hogi
thanks yrr
Thank you harry bhaiya for uploading videos consistently..
Proud to be the Student of Sigma Web Development course #SigmaBatchOP
🔥🔥
We will raise the bar like anything
💪
when i come from low energy than also this intro and harrybhai mood, energy make my energy highest....
this quality is rare.
5:53 specificity order
6:54 attribute selector
I've been a dedicated follower of your course for quite some time. While I find the content incredibly valuable, I believe it could benefit from a more robust set of exercises. Currently, there are only two provided. If you were to include a straightforward exercise at the conclusion of each video, I can confidently say that there would be no hesitation in continuing to follow this course. The moment you implement this change, you can count on me to enthusiastically support it with #SigmaBatchOp
I was always confused with the specificity but now it is all clear. Well done harry bhai
Hello, please help me I am confused like I understand each and every think that Harry teach in the lecture but I never try to memorize them so whenever he give an exercise then I feel like I am not able to memorize them so what should I do 😢
Hello Harry bhai ,
I have been following u for so long ,
I just have a suggestion, can u teach us industry level production grade stuff, (just like code with antonio). I think that will help a lot of students in mastering web development.
#HarryBhai
1 Tip for beginners: agar aapko vs code ke color picker me color value change karni hai (means RGB to HEX to HSL or Vice-versa) to aap color picker main top pe color code zaha likha hota hai vaha click kar sakte ho.
Hats off to your great efforts, keep the good this up. #SigmaBatchOP
Wow brother amazing tip
#SigmaBatchOp
13:01 maroon because of position and order of appearance
16:00 Specificity = 1(element) + 10(class) + 10(class) + 10(attribute) + 10(pseudo) = 41
TimeStamps ⌚
Introduction - 00:00
Sigma Web Development Intro - 00:32
What is Specificity in CSS - 01:21
Exploring Different Classes - 01:58
Cascade Algorithm in CSS - 02:36
Best Practices in CSS - 18:06
Conclusion - 19:25
Sigma Outro - 19:44
Sigma batch op
a=1 (element selector)
.harryclass=10 (class selector)
.rohan-class = 10 (class selector)
[href] = 10 (attribute selector)
:hover = 10 (pseudo-class selector)
who is watching this video again🤣🤣
Me
Me bhi 😂
@@AnilKumar-vb1dy why
Me😂
@@RAO_NAMAN-0 because they didn't wacthed the video carefully 😂😂
array harry bhai adhi rat ko itni zor se hassi ae mere dimagh me ye beth ne re the me soch re the abi ap bolo ke ye kam use hote hen ap ne to problem he solve kr dia love you bhaiya love from pakistan
1.)The color of h1 will be maroon as specificity of attribute and class is same but attribute is written at last so by position and order maroon from attribute will be applied(got correct)
2.)The specificity will be 21 of a.harryclass.rohan-class[href]:hover
(got wrong)
sorrry bhaiya i thought (.rohan-class[href]:hover) is one class only so took it's specificity as 10
so now got it 1+10+10+10+10=41
Thank youuu sooo much bhaiya got the clarity noww, will surely read it once again and focus more to get more understanding
reallyyy awesome videoooooooooo💕💕❤❤💖💖
#SigmaBatchOp
completed tutorial 21
Typing speed of harry bhai tremendous 👌
answer is 41
a=element selector(1)
.harryclass= class selector(10)
.rohan-class=class selector(10)
[href]=attribute selector(10)
:hover=pseudo classes(10)
Thank you for this concept. I understand very well Css Specificity
div>p{
text-align: center;
font-family: 'Montserrat', sans-serif;
background-color: rgb(43, 115, 174);
color: white;
box-sizing: border-box;
flex:1;
}
div :first-child {
background-color: yellow ;
color:red;
}
sigma Batch op , Maaza aa raha hai bey is course hai. Wow pehli baar ho raha hai esa
Sigma batch OP❤❤🏴☠️
The color of h1 will be marroon,because specificity of attribute selector is as same as class selector therefore it will be determined by its position.
thank u soo much harry for making this easy and simple to understand 😃
Sigma batch OP
Informative Video
live from Punjab
Thankyou harry sir
Your ENERGY is awesome!...........................................
p:first-child{
background-color: yellow;
color: red;
}
div p{
background-color: blue;
color: white;
}
Sigma Batch op is a great course in the world 🌍...
Great working sir...
MashaAllah...
Tutorial - 21 Done ✅
#SigmaBatchOP #HarryBhai #solution
Thank you ❤ Hary bhai for this amazing course
❤️🙏
Sigma Batch OP.
❤️🙏
12:55 maroon because attribute selector has same specificity as class selector and it's position is on last
15:57 41 because
a=1 (Element Selector)
.harryclass=10 (Class Selector)
.rohan-class=10 (Class Selector)
[href]=10 (Attribute Selector)
:hover=10 (Pseudo Class Selector
In that question the attribute selector will apply as it has same value as of the classes but because of being on the last of the list of the list it has more priority.
Thank you for this free course
Sigma batch OP 🎉🎉🎉
00:03 - Specificity in CSS determines which styles will be applied when conflicting selectors are used.
02:29 - The Cascade algorithm in CSS determines which property will be applied.
04:27 - CSS specificity determines which selector has the highest priority when resolving conflicts.
06:45 - The most specific selector is the inline styles.
08:45 - Understanding CSS specificity and the importance of 'important'
10:54 - Selectors in CSS have different specificities based on their type and attributes.
13:01 - Understanding Specificity in CSS Selectors
15:16 - Understanding specificity in CSS
17:15 - Understanding CSS specificity and the importance of writing clean and concise code
19:25 - Engage with the video by liking, sharing, and engaging with the content
16.00
Answer is 41
Element -1
Class-10
Another class-10
Href-10
Pseudo -10
Total -41
13:14 The color will be marroon as class and attribute selectors both has same specificity value therefore the position criteria will be applied here.
16:37 wah bhai herf sikhaye bina hi question de diya
15:41 (inline !important) to overwrite (!important) the (inline !important) is the top on the css table.
13:08 the color maroon will be applied since specificity of attribute selector is equal to class selector. Hence since they are equal, the selector which is at last position (i.e., attribute selector) it's property will be applied!
Sigma batch OP ❤🔥🔥🔥🔥🔥🔥
tutorial-21:done
sigma batch op
15:58 Answer is 41
a = 1
.harryclass = 10
.rohan-class = 10
[href]: = 10
hover = 10
harry bahi tusii great hooo....from pakistan.
Thankyou so much❤
God bless you🙏
Thanks for free course ❤❤❤❤
#solution
div{
background-color: blue;
color: white;
}
div>p:first-child{
background-color: yellow;
color:red;
}
12:58 Maroon since attribute and class selectors have same specificity, so priority will be given to whatever comes last.
12:55 , yess maroon color will be applicable
13:15
The background color of h1 would be maroon as there is a tie between the 3 other classes and the attribute selector is in last, which is given the topmost priority.
12:51 Answer:The answer will be maroon because all the selector have same 10 value and according to Position and order of appearance the lowest will be selected so maroon is the answer
a: 1 points for element selector.
.harryclass: 10 points for class selector.
.rohan-class: 10 points for class selector.
[href]: 10 points for attribute selector.
:hover: 10 point for pseudo-class.
Ppl writes video is complex ,no , today harry was complex😅.somtimes he forgot that he is teaching , it is because we are learner and he is expert.
very very useful and helpful video
#sigma batch op
#SOLUTION
attribute selector aayega because vo sabse last m h .maroon color
#solution2
a.= 1 element selector , harryclass = 10 , rohan-class = 10 , [href] : hover / attribute selector = 10
ans = 31 , my ans is not correct
bez = [href ] is (attribute selector) = 10
:hover is (pseudo-class selector) = 10
so , the ans is 41
#thankyou harry bhai
That video was amazing and your whole course is amazing harry bhai, after this course i am also excited to see your The Ultimate Python course.
You r a great teacher
Tutorial - 21 Done ✅
#SigmaBatchOP #HarryBhai
Thank you Hary bhai for this amazing course ❤
#sigma batch op 👌
SIGMA BATCH OP DIL SE HARRY BHAI
12:58 mere khayal se colour milega bhaiya
16:04 SPECIFICITY: 21
[data-x=a]:maroon
#Answer Maroon
as it an attribute selection though classes are same but position matters
Sigma batch is op🙌🏻🙌🏻🙌🏻
Very well done , Harry Bhai
Very nice explanation
amazing course harry bhai all credits goes to you thank you haary bhai rating-*******************************
Yes h1 will be maroon as the specificity of attribute selector and class selector is same and maroon color is given at the last so h1 will get maroon color.
We love you harry Bhai 💗💗💗
the answer of this question is 41
a =1
harryclass=10
rohan=10
class[href]=10
:hover =10(pesudo selector)
Harry bhaiya love you❤❤❤❤❤
You are really a great man
#solution
p:first child {color: yellow;
background-color: red}
p{ color: white;
background-color: blue; }