Learn CSS pseudo-classes in 7 minutes! ☟

hey how's it going everybody today I'm going to explain pseudo classes pseudo classes are keywords added to a selector they modify the behavior of an element when they're in a certain state for example I have a button when I hover my cursor over the button I set this button to increase in font size and also change the background color to Green hover is an example of a pseudo class it modifies our buttons Behavior active is when an item is currently selected so with my mouse I'm going to left-click the mouse button and hold it the button is now red basically they modify a special state of an element so let's begin with a few examples let's go to our index file and we will create a hyperlink I will set the hrep attribute to be I don't know Google or something https colon do forward slashes google.com be sure to close it I'll type the word Google here is my hyperlink to Google a link is also a pseudo class I will select any anchor tags that we have we have one I'll set the link pseudo class to have these CSS properties so a colon then the name of the pseudo class instead of this text being blue let's set it to be like a light blue I will set the color property to be a light blue color let's pick one that's pretty good when I hover my cursor over this link I want the color to change we are selecting any anchor tags colon then we will use the hover pseudo class and I will change the color you know what let's use what we currently have I'll just make it a little brighter now when I hover over this link the color changes I'll increase the font size too it's kind of like we're zooming in on this element let's do 1.1 em so the font size increases slightly active kicks in when you're holding down the cursor over an element a colon active let's change the font size to be 1.1 em again I will set the color to be let's go with the dark blue color when I left click on the mouse and hold it this link is now in the active state if a link is visited by default it's purple let's change that a colon visited when our anchor element is in the visited state I'll change the font color how about a gray color there all right so those are a few basic pseudo classes in this next example we'll need a list an unordered list we will need 10 list item elements this is number okay let's copy this paste it nine times one two three four five six seven eight nine now we will select any list items and use the hoverseudo class when I hover over one of these list items I will change the background color of that list item to be a highlighter yellow color I will change the background color to be yellow let's go with that so check this out when I hover over a list item the background color changes there's also the not pseudo class we can select anything that is not being hovered over not kind of does the opposite anything that is not in this state anything that's not being hovered over let's set the color to be like a gray color anything that's not currently being hovered over is gray but when it is hovered over it's yellow so that is the not pseudo class anything that is not in this state will have these CSS properties then we have the nth child pseudo class list item colon and child parentheses anything that's selected let's set to be yellow depending on what value you put within the parentheses that element will be selected one corresponds to the first element to us for the second three is for the Third nine is for the ninth element for all odd number elements type odd for all even elements type even for every third element that would be three n three six nine for every fourth that would be 4N you can add an offset too normally with 3n that's every third but if I want to start at the beginning I can add plus one one four seven or even plus two two five eight it's kind of like a formula this is really handy with JavaScript because you can place a variable within here the value of that variable can change which is pretty cool all right last example let's create a development with an ID of greeting the text will be hover here within our development let's create a paragraph element with some text of hello normally I want this Hello message to be hidden until we hover over this element our div element I'm going to style our greetings P element I'll set the background color to be maybe a blue this time like the light blue I'll add a little bit of padding too maybe 10 pixels to make this element invisible I can set the display property to be none what I would like to do when I hover over the settlement I want this element to be displayed we are selecting our greeting then when we hover over it I want the P element of this div section to have the display property of block display it as a block level element when we hover over the settlement it displays the P element within our div section this will come really handy when we create drop down menus those are pseudo classes elements can have special States like when they're being hovered over or you click on them using these pseudo classes we can apply CSS properties to those elements when we interact with them and those are pseudo classes and CSS

Channel: Bro Code

Views: 22,283

Keywords: CSS tutorial, CSS course, CSS hover, CSS active, CSS link

Id: Nrsy_2ogRfQ

Length: 7min 38sec (458 seconds)

Published: Thu Sep 21 2023