Let's talk about one of the most Powerful and versatile selectors in CSS And that is the hats selector a lot of People call it the parent selector but It's capable of a lot more than just Selecting the parents for example with It you can do cool stuff like this in CSS without using any JavaScript now if You're not familiar with the has Selector don't worry we'll cover Everything you need to know in this Course but hey if you're just meaning my Name is Adi I'm a web designer and Developer and in this course we'll first Have a look at the has a selector syntax And the explore some basic techniques And then we'll create some practical Examples by the end of it you'll have a Solid understanding of what the has Selector is and how you can effectively Use it in your CSS code but before we Get into all that I want to quickly tell You about an amazing resource called and Bottle elements here you can find tons Of useful resources like fonts icons UI Kits WordPress themes music stock photos And much more for creatives like me this Is an awesome resource because all the Assets have simple commercial licensing And you're not bound to any contract Therefore you can cancel whenever you Want so if you're interested check out The link in the video description Alright so let's get started by looking
At the syntax of the selector and Understanding how it works Before we get started you should know That the video description contains Links to all the resources that I used In this video as well as links to all The source files so if you want to Follow along you can download those Files from there also don't forget to Subscribe to envato test Plus for more Free content just like this alright so What is the has selector Well according to the official spec the Definition looks something like this That's pretty technical isn't it Let's try that again first of all has Is a pseudo class and a pseudo class is A keyword that you add to a selector Which selects an element based on a Certain state or context for example When using the hover pseudo class we're Essentially selecting the hover state of That anchor element so we can refer to Has As a selector it's not incorrect in the End we are selecting something with it As for the rest of the definition We can rewrite that into something like This has is a CSS pseudo class that Allows you to select an element based on Whether or not it contains another Element that matches a specified Selector so to put that information to Good use let me show you a couple of
Examples Let's start with this we have two figure Elements each one containing an image The one on the right also contains a fig Caption right so if we take a look at The code We can see that we have the two figures And we can see the second one contains a Fake caption now what I want to do Is style this figure right so the second One a bit differently because it can it Must also accommodate the Fig caption And this is a perfect use case for the Has selector So what we can do In CSS we can say something like this Figure Colon has fig caption and we can set the Styles let's say I want to change the Background color Maybe add a border maybe add some Padding And round off the corners So let's look at the results now we have Two figure elements but the second one Which has a fig caption is styled Differently and as you can see the Styles that I just wrote So the background the border the padding The Border radius is only applied to the Second figure element This one because it contains the Fig Caption and this is exactly what the has Selector is doing remember the
Definition Has is a pseudo class that selects an Element based on whether or not It contains another element that matches A specified selector so in my case I Used this type selector fig caption and It matches This element the second element here and I did that without using Any kind of classes or IDs so that's the Basic way it works Now before we move any further let's Talk browser support overall browser Support is excellent Pretty much all the major browsers Support the has relation relational Sorry pseudo class except Firefox Unfortunately You can enable it Uh with a flag That's this flag right here layout dot Css.hasselector.enabled right but it's Not supported by default the other ones Chrome Edge Safari Opera all supported Uh IE of course this is an old browser So we don't even consider this and also Some of the mobile browsers do not Support this feature but this is pretty Awesome it will be supported in the near Future so actually there's no reason you Should not use this right now all right Now you might be wondering why a Selector like has would be useful and The short answer is it allows you to
Write less code so let me give you an Example uh to show that so let's Actually go to our demo 2 here Right so we have the same uh the same Example as before and let's say that I Want to achieve the same result I want To style this figure Uh that has a fake caption separately Right so I would go back to the code I Have the two figures but in order to to Differentiate between them we need to Use uh some classes or IDs so what we Can say is we can say class uh custom Figure and we're going to add it here as Well and on this second one I'm gonna Add an extra class called with caption So then in CSS I would say figure custom Figure and then with caption Right so I would then write the same Style I would add my background my Border the padding and the Border radius And of course the result is exactly the Same but this time You need to write more code right you Need to add separate classes whereas What we had previously was very simple In HTML we just had a The figure Element no extra classes no Extra IDs and we just used the has Selector to determine which one of these Elements or to select add the element Which had the Fig caption and then style That separately so as you can see it's a Lot more convenient to use a selector
Like has in these types of situations Now so far we checked If the parent element contains a certain Child and then style the parent According to that but we're actually not Limited to that behavior let's have a Look at the following example we have Two cards which are pretty much Identical except the card on the right Has an image right now what I would like To do is I want to have this image span The entire width of the card and I would Like the title that's above the image to Not have this a border bottom right so How do we do that with the has selector Well first of all let's start with the Padding right so I want to Target the Card that has an image and set the left And right padding to zero so we do that By going here Right so we have a div class card And we can say card has IMG And I can set padding in line to zero Padding in line in this writing Direction basically means padding left And padding right so I can save that Refresh So now only the card that has an image Has that side padding removed that's Good so the image looks right but the Other content doesn't right so this Title It doesn't look right we need uh some Sort of distance between it and the edge
And the same goes for this content right It needs that uh two REM of padding to The side So we can say something like this we can Duplicate this and we can say On the cards that have an image we can Target the H2 All right which is the element that I Use as a title and also the card content Right so I can copy this paste it here Card content And I can say padding inline to REM So now only the title And the actual card content gets that 2 RAM Padding inline the image stays the same Now what about This uh this line here I need to remove It on the card that has the image so I Can say card this time we can Target the H2 so H2 Has Plus image And I can say border bottom Zero so let's see if that works and it Does so what's up with this you might Ask well it's pretty simple Plus IMG is a selector that basically uh Selects an image that follows The H2 Right so if I say H2 plus IMG if I say border 1 pixel Solid red it's going to select the image That's
After an H2 or is a sibling of H2 and It's going to add a border And that's exactly what we're doing here We can say H2 if it has a an image Sibling then we select that H2 and we Set the Border bottom to zero and we can Also set The padding bottom to zero just remove a Little bit of that space Right so quite simple actually in this Example yeah we have Two cards One of them with a standard structure of H21 card content the other one H2 image And then card content and I want to make Changes Uh to some of the elements in the cards That have an image in our case the Second card So first of all we remove the padding By using the selector so if the card has An image I remove the side padding Then if the card has an image I select The H2 and the card content and I set The padding to those elements And finally I select all the H2S That have an image sibling and I remove The border and the padding so as you can See the has selector is very powerful And very versatile And hopefully after watching this Introduction lesson You Now understand Its syntax and what you can use it for
Now Let's dive a little bit deeper and take A look at some more practical examples Let's start with practical example Number one we have a typical navigation Menu with a couple of items but the Second one Has a sub menu Right Are the code for that looks something Like this we have a nav and inside an Unordered list And then for each link we have a list Item But then for the sub menu we have Another unordered lists Or List inside The list item alongside with the anchor Tag Now what I want to do here Is actually add a little arrow right Here next to the services text that's Going to indicate hey this is a sub menu And that's quite easy to do I can add a Class here Or I can add Like a physical HTML element like an Image or an SVG Or I can add like a pseudo element to This but of course that would involve Using a class or an ID and I want to Keep this as simple as possible well This is a great use case for the has Selector because I can Target
The list item that has A UL inside it and style that Accordingly so Here's how I do that We're going to say Nev list item That has a new well And then I can say a After So I'm using a pseudo element And it's actually used the correct Syntax there and I can say content Arrow down okay So now if I go back we have A menu item that says Services arrow Down And as you can see it only Applies to this list item because it has A sub menu it has a UL inside it but we Can also see the arrow down suit element Being applied to these other anchor tags So to prevent that we're only going to Target The immediate children not all of them Right so now This only gets applied to the parent Anchor tag and of course we're not going To have the text arrow down we're going To have an image and I'm going to use An SVG for that an encode it SVG to be More precise so instead of text I'm Going to say URL and I'm going to paste In this what I did basically was I had An arrow in a figma document I copied it As an SVG
And then I opened a URL encoder pasted The SVG code there and it gave me this Basically It's quite simple And now We have a nice Arrow Right next to The the services text and of course this Is possible because the anchor tag Itself has a display of flex so we're Using fluxbox I set a gap of 0.5 Rams And I aligned the items to the center of Course without these The uh the arrow would be poorly aligned Not to mention it would break the layout That we had here so let's just stick to The uh to the flux box Code there so that's example number one Right we targeted the list item that had Or that has an UL in our case it's this One and then we targeted the after Element For the anchor tag and then we just Added the image It's really up to you how you add this Uh this image here You can do it in so many different ways I chose an encoded SVG Now let's move on to example number two And example number two is a form with Two Fields one for email one for Password you can think of it as a sign Up form where we enter our email address A password and we start a free trial
Right but the thing is I want to do some Validation right so I want a valid email Address and I also want a password That's at least four characters And what I did in code was that I set Some patterns right so in the email Field I set this pattern which basically Checks for a valid email address and in The password field I chose or I used This pattern which basically checks that The password has at least four Characters Regardless of what characters those are Now when doing this and when setting the Attribute of required In an input field like this if the value That you input is invalid then the input Itself will receive an invalid State This type of validation would be quite Simple to do with JavaScript but if we Prefer like a CSS only variant then we Can easily do this with the has Attribute so here's how we do that first Of all I already created Field errors right as you can see here Are below each input I have a paragraph With the class of field error that says Hey the email address you entered is not Valid or that the password must contains That must contain at least four Characters and by default I'm actually hiding these errors By setting the opacity to zero and their Position absolutely so let me actually
Comment this so you can see where they Are So I'm displaying them absolutely to the Side And they look something like this and What I want to do Is I want to show these whenever the Respective field is invalid so we start The following way we say field Has invalid and we can just change the Color for instance To color error base I'm using some Custom attributes here so right let's Say I'm going to enter this bit We can see that we're in an invalid State We changed the color of the text to red But if I input a correct email address The label here gets the default color Back but as soon as I go invalid yeah so It changes Based on the uh the state Of this input and the same goes for Password right so if I enter Password of two characters it's invalid But if I make it four characters it Becomes valid now let's uh add the other Changes that should be visible when I Have an invalid field for example the Background color of the input right so I Can Target this And I can say the input so when the Field is invalid I can Target the input And I can say background color
And here I'm going to use color error Tent 90. All right so starting to look pretty Good but I'm getting an error here or I'm getting the error Styles even though I haven't entered anything so let's fix That We can say Field Has And here's something else you can do Placeholder shown so when it's showing Its placeholder meaning I don't have any Value entered yet and let's actually Target the input there I'm going to change this background Color To Gray 10.95 okay And also I'm going to change its color Back to the default Okay so basically when I'm showing the Placeholder Don't give me the error Style But if the input is in an invalid State Then do show it Otherwise go back to default Also if this has an error and I focus it I want to remove that error Style So that's quite easy to do we can say Something like this When the input is in focus We change the background color and we'll Do the same thing here so field has
Oops Has Focus All right so now the error state will Only be visible when there's an error And the field is not focused or we don't Have a placeholder shown Cool now let's actually show the error Field Right and well we need to do two things For that first of all we need to Select the field error In a field that's invalid and and Doesn't have focus and set the opacity To one So we're going to say field has Invalid But also it's not in focus Right so I'll say field error and set The opacity to one and then the second Thing we need to do is hide this when The field has Focus so we can say field Has Focus and we'll Target Field error and We're going to set the opacity to zero But also in addition to this I want to Also hide this When we have a placeholder and it's not In focus So it's a bit it's a bit weird but we Have to do this so we can say Placeholder Shown and let's actually select the Pseudo class there so placeholder shown
And Not in focus Okay so let's see what we have here Field Um it's actually field error here Okay so Invalid Tab away and now we can see the error Field If I enter a valid email That goes away as soon as I Use an invalid value that's shown again And the same goes For the password Right so it's working properly now let's See again Exactly what we're doing here so we have The uh markup for a specific field where We have the label and we have the input And the field error the email Looks something like this the password Looks something like this they each have A pattern And they're each required so if the Pattern is not met they get an invalid State so what do we do first Is we say okay if the field has an Invalid State then we change its color And that's going to affect the of course The color of the label and we change the Background color of the input we make it This very light red but this only this Should only be visible when we're not Focused or when we're not showing the
Placeholder right so when we're not Having a value and then the actual field Error We're showing it When the field Is of course invalid but not in Focus Right so You can see as soon as I change Focus We're changing the opacity for uh for That error field And we're also hiding This error field Or this error text When the field has focus and also When we have the placeholder and it's Not in Focus it's not that difficult and This gives you an idea of another use Case for the has pseudo element right You're not just limited uh to selecting Other elements inside a parent as you Can see here we use the invalid pseudo Class for the parent element and of Course the invalid pseudo class is Applied to an input Right it's applied here Not on the div itself but the div with The class of field can have The pseudo class of invalid applied to Any of its uh child elements which is Why this selector is super super Powerful so that's another use case for The has pseudo elements let's move on to The third and final example and here we Have another form this time it's a kind
Of form that you get after maybe Unsubscribing for from a certain service And it basically say okay well what's Your reason for canceling and you have a Couple different options here maybe it's Too expensive maybe I found a better Alternative or maybe it's another reason And then we have a field here where we Can say our reason like I don't like it Anymore But the thing is I only want to display This field When other reasons is selected if it's If this one is selected then this field Doesn't have any relevance right so what We can do Is in CSS I have this this input field It's called or it has an ID of other Reason and I can Target that uh other Reason let's actually Target its parents So other reason uh field and I can say Uh display none Right so now that field Is hidden regardless of what I have Selected here But then I can say Okay form Has and we can actually check for a Certain option the one that we're Interested in is this one option value Other so I can say option value equals Other And this one Needs to be checked and then I can Target the other
Reason field and I can set a display To block or whatever So now you'll see that When I select either the first or the Second one nothing happens but if I Select the third Then all of a sudden this third field or This uh sorry this other field is now Visible and I can enter my reason but This is not visible for any of the other Two and that's thanks to The has selector Right We're saying hey if the form Has this option called or the option That has a value of other and if that is Checked Then I'm going to select the other Reason field and I'm going to show it Otherwise that particular field is Hidden and there you go that's the Result another great use case for the Has selector and that's about it for This course let us know if you enjoyed It and if you have any questions please Leave a comment down below as always Don't forget to subscribe to the envato Test plus YouTube channel for more Content like this but also to learn About web development web design and Much more it's all free so make sure to Also give this video a thumbs up if you Liked it with that said thank you very Much for watching I'm ADI and until next
Time secure [Music] [Music]
