Learn how to use selectors based on the various states of the element and user interaction.
- [Instructor] In this lesson, we'll be going over pseudo class selectors, which are often dynamic, meaning they require some action from the person interacting with your webpage. Pseudo classes are combined with other selectors, as we can see in this example here. They're combined using a colon and no spaces, and while there are many different pseudo classes, in this lesson, we're just going to focus on the ones that can be used with hyperlinks. By default, unvisited links are styled as blue, and previously visited links are purple. Let's click on a link to see it change to the visited state. Notice how all the links change to purple. That's because they all have the same H-ref value. The place holder number sign. So the browser thinks it's all the same link. So if I give one of these a different value, and then click on it again, only that link will show as visited. These defaults can be changed with the link pseudo class. Let me add this style in, and now we can see that the default blue has changed to green, but the default visited is still purple. So I can use the visited pseudo class to change that as well. Also note that link and visit will only select anchor tags that have an H-ref value. So even though this first one is using the anchor tag, there is no H-ref value, so there is no style applied to it. Styling a visited state may be useful for something like search results, because if you're looking for a result that you've clicked on before, seeing that visited style may help you filter through the results a little more quickly. But if you're not planning to style a visited state, you can also just use A to style the links. That works as well. When you use just A as the selector, it will be applied to all anchor tags, regardless of whether it has an H-ref attribute or not, and you also don't have to specifically declare a visited state. Let me just hide this here for a second, both the link and the visited, and then you'll see even when I click on a link, the visited state does not change. There are three more pseudo classes that can also be used with links to target various states: focus, hover, and active. But unlike link and visit, these pseudo classes can be used with other elements as well. Let's take a look at focus. This is applied when the element comes into focus, usually when navigating a website with the keyboard tab key, instead of a mouse. Though some browsers may show a style when the user clicks or taps on an element. The default styles for focus varies across browsers, and is displayed as either a glowing blue outline, or a dotted line, But if you're using Firefox on a Mac, such as myself, there is this default Mac user setting that removes the focus style. So even when I try to tab through the links, nothing is happening. So I won't go into much detail about it here, but if you're on a Mac, and a Firefox user, and you want to turn this feature on, check out this stack overflow discussion here. This isn't a Firefox issue, for certain Mac operating systems this feature was added as a default system setting, so you'll have to turn it on if you want to use the tab feature. Let's see how the focus style looks in Chrome. So I'm going to click on this area, and press the tab key. There is the blue, glowing outline. That is the default style for focus, for Chrome. So you can change this style using the outline property. Which takes a value of the outline width, the outline style, as well as the outline color. So now when I tab through this, I can see my new style. So for accessibility reasons, if you do decide to change this style, make sure to replace it with an alternative style where the user can still see a visual representation that doesn't rely on color only. Or, you can just leave it. Focus can also be used on form elements like text inputs. Hover styles are applied when the mouse pointer hovers over an element, but doesn't activate it by clicking on it. Just not that touch devices don't support hover interactions, but if you do set a hover style, it may show for a split second when the element is tapped. Let's change this hover style, change the background to gray so when I hover over the elements, I'll see the style applied, and when I take my mouse off the link you will no longer see the style. Hover can be used on any other elements as well. So the last one, the active pseudo class, applies the style at the moment the element is being activated by the user, such as the time between pressing the mouse button and releasing it. Let's go ahead and add this style in, then I'm going to click on one of the links. When I hold it, you can see the active style, but when I release it, the visited style will be added. As soon as you release the mouse, the active state is over. When using all these pseudo classes together with the same element, the link in this example, they must be listed in the order declared here because of the cascading rules discussed in a previous lesson.
- Writing basic selectors
- Setting properties
- Cascade and inheritance
- Setting a font family, font size, text color, and more
- Working with the box model
- Leveraging Grid and Flexbox
- Using the float and position properties
- Working with advanced selectors
- Creating fluid layouts