Working with the Not CSS3 Selector
So far in our journey into the world of CSS3 selectors we met many selectors that help us find an item by explicitly trying to configure that item. In this lecture, we take a reversal in our CSS selection logic by weeding out content based on what it's not. (Warning: We will solve the homework from the last lesson so if you haven't completed it yet please don't press play and first post your answer into the comment section). By the end of this lecture, you will know how to work with CSS3 not () selector and know the rules that govern it.
properties: not, css negation selectors, css3
Video Transcript
00:00Stop being negative. If I tell you that there's no person behind me, then there's no person behind me.
00:06Although I am.
00:09There is a person, I'm just hiding them.
00:12Now, when it comes to the CSS rules, there's CSS rules that are all positive and uplifting, but there's some that are not.
00:19There's the not, which is an advanced one, just like the language one that we met previously.
00:24The not attribute or the not selector enables us to basically reverse the request that we're making.
00:30In this lecture, you're going to learn how to use the not, which is a CSS3 selector, I don't know why I say attribute all the time,
00:37and a very, very powerful one, enabling you to basically negate your request, saying, basically, I want everything but that.
00:44Let's see it in action.
00:46I hope you did your homework assignment, and I hope you put it in the comment section, because I would love to comment on what you're creating.
00:52There's a lot of ways to do what we talked about in the last lecture.
00:56Now, I want to basically walk through and teach you a new property.
01:00And by the end of this lesson, we're going to see one way of doing just exactly what that sample that we did earlier.
01:08So I want to really start off from there, and if you haven't done it yet, I strongly encourage you to stop this video.
01:15Give it a try. Think about it.
01:17We've learned everything you really need to be able to solve it, even if it's complicated.
01:22But you could definitely search up online to try to find other related items.
01:27We're going to be learning about negation pseudocodes in a second.
01:30But even before we do that, I want to take advantage of this, all the stuff we've learned so far.
01:36So I'm going to go ahead and save our application, just take a quick refresh, a quick view here.
01:41We'll see that all our three language elements are still in play.
01:45What I'm going to do is basically something very simple.
01:48I'm going to go ahead and say every item, every single item that has a language code, I'm going to go ahead and make it invisible.
01:57Now, notice that this is going to not work the way we want it.
02:01The main reason it's not going to work is because our whole document has a language reference as well.
02:06In this case, it's French-French.
02:08So if I go ahead and I click on refresh here, we're going to note that we're going to have you're in a completely blank page, which is not our intention.
02:16Our intention is only things that are content of the body.
02:20So in our body, anything in our body that has a language attribute.
02:24So anything with a language attribute, automatically, let's get rid of it.
02:28And in this case, we got rid of those three attributes or those three H2s.
02:33Perfect. All that's left for us to do is to go ahead and add one more rule after we got rid of all of them.
02:38And say, hey, by the way, if you're FRFR, then please come back.
02:42Let's set it to be inherit or set it to be block in our case because we know all these items are block elements.
02:50So I'm going to go ahead here, save this, click on refresh.
02:53And this time around, we'll see that now only the French item is going to come back.
02:57This is exactly how you would do this dynamically.
03:00And if we had the leveraging of JavaScript, we probably would do both of these steps dynamically in JavaScript,
03:06where we would get rid of the all the items in the language and then return the language that is in the world of CSS 2 without using any CSS 3.
03:15Now, I'm going to go ahead and add this into our comment block because let's talk about negation because it's going to open up the door to another variant, another way for us to do this.
03:26So the negation code is very, very intuitive and maybe not intuitive.
03:31That was a little bit of a stretch, but it is very, very cool.
03:34The idea is exactly the opposite of what you selected.
03:38Now, we start off with selecting something.
03:40So, for example, I'm going to go ahead and select all paragraphs in our document.
03:44Once I selected all paragraphs, what if I wanted to select every single item that does not have a class?
03:52If I wanted to select every item with a class, what would I do?
03:55I literally would just go ahead and ask, do you have a class?
03:58And every item with a class, then I could then go ahead and do a rule.
04:01But what if I wanted exactly the opposite?
04:04What if I wanted every item that does not have a class?
04:06Now, to do that, I would just mark not, open up a round bracket, and close a round bracket.
04:13Inside here, put a rule.
04:14Now, I could only put simple selectors, which means no open and closing brackets.
04:19So, for that matter, you're not allowed to have another knot inside of a knot.
04:23There's no nesting.
04:24Not only that there's no nesting, you can't call explicitly a lang item.
04:28You cannot call anything that is really with those round brackets, because that's not a simple pseudocode.
04:34But we do have access to the brackets.
04:38We do have access to properties.
04:40And in this case, I could say, hey, by the way, everything that is not a class.
04:44In other words, all paragraphs that don't have a class, let's do something with them.
04:48How about, let's add padding.
04:50So, I'm going to go ahead and add 100 pixels of padding to every single paragraph
04:54that does not have a class associated with it.
04:57And if we go ahead here, save this item, click on refresh,
05:00we'll see now all items that do not have a class defined to them
05:04will now have extra padding around them.
05:07Beautiful.
05:08So, we're going to keep it the way it is, but let's go back into our language.
05:11Now that we have a negation, let's see if we could create a rule
05:15that is a lot more complex that would enable us in one CSS rule
05:20to only get rid of the languages that are not the language that we have for our user.
05:25And by the way, this could be that extra CSS script
05:28that you load only for those customizations, which you could do dynamically
05:33as the browser finished loading.
05:35Then you load up the specificalities of that specific user,
05:38creating really small CSS files that are just appendants to the regular CSS.
05:44So, let's take a gander at it.
05:47So, first of all, I'm going to go into my body and any item in our body,
05:50again, because we don't want to affect every lang,
05:53but only languages that are literally inside of our body.
05:56Next, we're going to go ahead and say,
05:58hey, let's select everything that has a lang attribute.
06:01After we have everything with a lang attribute,
06:03let's take from all those stuff everything that is not a specific language.
06:09In this case, everything that is not our current language,
06:13that was fr, fr, fr, then we want to get rid of.
06:18So, let's walk through this again.
06:20We're first getting all of the items that have a lang property.
06:24Once we got all items that have a lang attribute,
06:27then we're going ahead and saying we don't want from that list,
06:30we don't want anything that has the value of fr, fr.
06:33And all items that are not that,
06:35we'll go ahead and set their display to be none.
06:39Now, I want to point out one of the nice things about this.
06:41We also avoid the scenario where we need to figure out
06:44what was the display type previously.
06:46And beyond that, we're also making sure that,
06:50well, beyond that, there's one more note that I want to say
06:52before we wrap this up, and let's see that it's working first
06:54before I talk about that last tip.
06:56You'll see that now only the French, French item will be visible.
07:00So, literally all we have to do in a real world scenario
07:03is to basically load up an external file
07:06that would just add that extra level of customization
07:09to our French speaking, different French natives.
07:12So, if the French friends would get this file
07:14and another would another, unless we want to do it in JavaScript.
07:18So, if we wouldn't do it in JavaScript,
07:19we'll just load this up in the HTML as one more file.
07:22That way we don't have to change our core styling.
07:25Now, I want to talk about just one more thing.
07:27In general, Google does not recommend using
07:29more than one language in a document.
07:31That's not necessarily true for small little customizations,
07:34such as the differences between British English and American English,
07:38or the difference between French English and Canadian English.
07:41Because really, if you just have small changes, mainly in headlines
07:44and things of those nature, you can very easily, using the lang attribute
07:48or using this advance not capabilities, create a really smart,
07:52in a really smart way, get rid of all the stuff
07:55that you don't want your user to consume in that HTML page.
08:00So, that's it. We're done talking about languages.
08:02We're far away from talking about CSS
08:05and we're done talking about negation, which is a CSS3-only property.
08:10And we're ready to move on to more CSS.
08:12So, we're still at Selectors and this chapter is still rolling.
08:16So, we'll see you in the next lecture where we continue exploring Selectors.