CSS Tutorial For Beginners 12 - Selector Specificity
HTML-код
- Опубликовано: 17 окт 2024
- Hey guys, in this CSS tutorial for beginners, we're going to take a look at selector specificity (I hate pronouncing that word, even though I'm a ninja!). Essentially, this translates as how specific and how much weight your CSS selector has when it comes to dealing with conflicts. It's a really important subject that I suggest you guys master. Keep coding :).
SUBSCRIBE TO CHANNEL - / @netninja
========== CSS for Beginners Playlist ==========
• CSS Tutorials For Begi...
========== HTML Basics Course ==========
• HTML Tutorials For Beg...
========== The Net Ninja ============
For more front-end development tutorials & to black-belt your coding skills, head over to - / @netninja or thenetninja.co.uk
========== Social Links ==========
Twitter - @TheNetNinja - / thenetninjauk
![BRASIL vs. PERÚ [4-0] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 10](http://i.ytimg.com/vi/tbyOJKXfQnI/mqdefault.jpg)
I never knew of this points system, never read about it anywhere...
This is veeery helpful! Thank you for this video!
it's just an example to understand the rule
You're a true ninja when it comes to teaching.
Nobody has ever explained specificity this well. Thank you
What a great way of explaining spec...spec...specifififty :D
You're a fantastic teacher, I've learnt more from you than my lecturers. Thank so much for your hard work, dedication and enthusiasm.
I agree apsolutely.
I love this tutorial - the point system rocks!!
:) Thanks!
Your videos are big help to us. I'm now making my website, and i'm going to spread your tutorials and your channel (of course). Continue making, your tutorials are on-point.
Thanks so much! Really glad you like them :D
Big blessing to us. Thank you guys!
your voice: 6:20 min "whatttt!!!! hhhhhmm mmmmmmmm", was really amazing...hahahaha
No Cap
most important vid about css i watched from you so far
and seriously, hasnt anybody noticed that all these css rules are just like learning how to style ancient greek words ?
they both have complicated and kinda conflicting rules
This is the important part in learning CSS, thank you
you cover things that some lecturers don't even mention! I'm so thankful that I found you!!!!
Exactly! Did not learn point system in my school.
I'm not gonna watch any CSS videos after watching this series... this has everything..
I have finally found a meaningful explanation. Thank you very much!
Thanks for the videos, they cut and make a mark that's easy to remember and understand!
BRILLIANT EXPLANATION AND EXAMPLES AS USUAL. I UNDERSTAND IT ALL! THOSE ARE NOT THAT EASY TO UNDERSTAND, BUT YOU HAVE MADE IT QUITE CLEAR! THANKS AGAIN!
Thanks! The points system help me unstand it.
Great video! Just what I was looking for. Very helpful.
when you said the word (specific), a light bulb came on in my head; thus: the more specific you are about your description of a tag in css, the more its ability to override other tags in selecting which style option to be used
thanks mate, best course ever, I am learning lots new skills
The tutorials are very useful. It's great the content is not just one huge 3 hour video, but a series of small, more focused elements. But concerning the inheritance, i think it would be much easier to visualize if you instead of changing the color of font, did the same thing but with the background-color, which makes everything more legible.
i almost got a heart attack at 3:25
btw nice video, very helpful! :)
I know right but you have to admit it's pretty cool.
Nice explanation. Thanks!
That "WHAT" 😂😅👌
'points' concepts help me a lot.haha
what if the main-content id didnt have a p tag specified in it? That would make it also explicitly targeting the strong tag right? Essentially making all of them red
2021 amazing almost 6 years
I was wondering. Maybe not so important, but still: Witch specificity point has an inherited element?
@8:00 will the strong tag work if the first rule was just #main_content{ } and not #main_content p{ }?
"WAAAAAAA" haha, awesome
so, how about if i still want to be green? what should i do in this css file to make it green?
+Luyang Zou You could make a more specific CSS rule, so it overrides the one making it red. For example - #main-content p.test{color: green;}
I think usually use class for small indentations/ingeneral styling and ids for very specific ones.
Also the point system makes it easier . Its all about the selector specificity.
#maincontent + p+ .test= 100 + 1 + 10 = 111points which is greater than 100. So you will have your green text
Very helpful tutorials. I have a question or a scenario rather. I'm using a Theme in wordpress and I'm trying to create a banner with css. I'm running into alot of trouble. Since it's a company site I don't want to place the url here without permission. Thanks to your tutorial I understand now that the themes point system overrode my code and I'm finally able to make changes. Thank you! If you have time I can send the url to you. If not thanks for your tutorials anyway.
+Jaymartv Thanks, glad you enjoy the vids :). Sure, paste your URL...
wordpress.ciactuation.com/valves/
I'm trying to place the jpgs as a banner on the sides of the h2 Pipeline valves. And this theme isn't letting remove the jpegs from the site either.
I think I actually figured it out right after I sent the message. Your the best though for sure.
+Jaymartv See this fiddle - jsfiddle.net/tczp57md/ . Grab the CSS rule there and paste it in your CSS file, it will centre the image behind the PIPELINE VALVES text, if that's what you want to do? The image is being controlled by a bg-image property in CSS, so to remove it, just delete the CSS rule controlling it.
Nice and apt video.
Best Shaun
You're a great teacher!!!
But I found mistake over here.
6:08 Here you reacted "WHAT" because there MUST BE green color in "p class="test".
6:02 But the problem is YOU DIDN'T SAVE your FILE! (how can i say that you didn't save is when i first downloaded "Brackets" i noticed there on left side 'near to project' there is a DOT, that dot appears if you DON'T save your file)
Super enthuisiastic at the beginning of this vid. ha ha
So, if I write an element rule 102 times, will it win the ID rule? Or is this ranking system just a metaphor for priority? lol
Remember , Implicit vs Explicit styling always has Explicit as the winner .
Explicit vs Explicit follows Cascading( top to bottom and bottom is the winner )
But Implicit vs Implicit always has Points System come into play.
What do you think about google canary?
dude will id.class take preference and override id element ?
what about "!important" where he is? :)
Done
Hello sir, I thought we can have only one ID per page but in the above example you have made three IDs header, content header and main header is that possible or I did't get it right ? Thanks..
+Ahmed Imam Hey... You can only have 1 of each id on a page. So for example, only 1 'header' id, and 1 'main-header' id, whereas with classes you could have multiple of each one. :)
+The Net Ninja Thanks sir, that was very helpful.
I want u also to clarify for me another thing if u don't mind plz
#MainContent {
color:blue;
}p{
color:green;
}
in this above codes the ID points r 100 and the element is 1 point only but sill the element override the ID, why is that sir ? sorry if I'm asking a lot, it just coz i am a beginner in css. Thanks
+Ahmed Imam It is ok :). That is because you are targeting the element directly with the P tag. The points rule only comes into play when you have more than 2 selectors that target the same element. #mainContent{ } targets a container element, but p{ } targets the p element. If it was #mainContent p{ }, then that selector would have more points and win :).
In the title of your video, you typed: "Selector Specificty" there's a 'i' missing in Specific*I*ty
Are you human ? Or our Humble , honourable Teacher ? :D
Love from Bangladesh.
why strong win? at this point I confused
Explicit rules override implicit rules. "strong" was not directly targeted by any previous rules
Implicit ( inherited ) vs Explicit Styling always has Explicit styling as the winner .
Where as Implicit vs Implicit styling has the point system coming into play
Go to be honest man. Hide all the tutorials in this RUclips and display only yours. Until you told about these rules, I had no idea that there is something like this.
so how many points is strong ? thanks
It's only one point on it's own
And you spelled specificity, 'specificty' in the title!
Well observed :) I have corrected it now thank you!
@@NetNinja It's an honor to do any service for you master ninja! I'm sure you can even kill John Wick with just a blink of an eye!
how you calculate the points ? i didn't understand that?
I have an idea just say Specific lol. Hell that's what I do, because that's what it means.
I think you come from the same area as Michael Bisping
Correct me if I'm wrong, but this points system isn't exactly correct.
i.e. you can't override an id selector rule with eleven class selectors (1 * 100 < 11 * 10), the id selector would always win.
Be aware of that.
i didnt understand something . i saw somewhere esle that we write " p#id" and not "#id p" can anyone help me here
Should we stand infront of a mirror while learning to say Specificity?
please stop your "oh" sound. It's really annoying for listening
please stop your complaining. It's really annoying for reading because the net ninja is giving great value FOR FREE