Using simple selectors in CSS is just the beginning. In this video, learn how to target HTML elements based on the HTML structure and select multiple elements at the same time.
- [Instructor] Let's look at a few more ways to select elements. When an element is nested inside of another element, it becomes its child or descendant. In CSS, you can select these elements based on this relationship by using descendant selectors. Use multiple selectors separated by a space to match descendant elements. For example, to select the link contained within a paragraph, the selector is P space A. Browsers read these selectors from right to left, so we'll first look for the A tag, which is the hyperlink element, then an A tag inside of a P tag.
Descendant selectors can be used for any nested element. Not just parent child elements. Let's take a look at this example in another JSFiddle. Let's follow the instructions in the HTML comments on the left. The first one says to select all h2 elements on the page. So for this, I can use a type selector of h2. Open my curly braces, and I'll just add a color value.
And run the code. So I've selected all h2s. Number two says to select the h2 only within the section element by adding section space h2. This style will now only be applied to headings within the section element, and let's run it. And there you go. Now if we wanted to select the h2 anywhere within the main element, we can do that by changing this descendant selector to main h2.
Both the h2s in the section tag and the article tag are both descendant elements of main. To select the h2 anywhere within the main element, I can use main as the selector instead of article or section, since they are both descendants of main. This selector won't affect the h2 in the header element. You can use more than two selectors to match descendant elements. Here's another example. Section space P space A will select a link nested inside of a paragraph inside of a section element.
The more selectors you use, the more specific the pattern becomes. This style would not apply to the link outside of the paragraph or outside of the section element, since it doesn't match the specific selector pattern. You can also target multiple elements by grouping them in one declaration block. This will apply the same style to all of the selectors in the list. Each selector is separated with a comma. Grouping selectors is good for creating more efficient CSS because it reduces the number of declarations.
It's also easier to update just one declaration block. When multiple selectors are combined in one block, each selector is still independent of each other. If using a descendant selector, always declare the full combination. Let's talk about one more type of selector, pseudo-classes. Pseudo-class selectors are keywords used to target a specific state of the element. The keyword is combined with a selector using a colon and no white space before or after the colon.
Hover is a common example, since it's often used to style links on mouse hover to indicate to users that it's a link. In this example, this style will only apply when you hover over the link. There are more pseudo-classes that can be used with links. Let's take a look at some examples back in JSFiddle. In HTML 5, it's valid to use the anchor tag as a placeholder by not including the href value. Notice that the default styles between the two are different.
You can use A as the selector when styling links, but if you need to make a distinction between the two, use the link pseudo-class to be more specific to anchor tags with an href value. Let's uncomment each value to see how it's applied. A keyboard shortcut for adding or removing comments is control, forward slash on a PC or command and forward slash on a Mac. So I'm going to uncomment this style from the A selector first.
And run the update. This changes the color for all links. But if I wanted to specify only links with the href value, I would use the link pseudo-class. Uncomment that and run the code. Notice that this style only applies to the links with the href values. Sometimes you'll also see a number symbol in this href value. That is also commonly used as a placeholder, but still includes the href attribute.
Most of the time, you should be okay with just using A as the selector for links, but the link pseudo-class is an option if you need to be more specific. Another pseudo-class that can be used with links is visited. Visited indicates whether the link has been clicked on already. Let's go ahead and uncomment that and run the code. You won't see a change yet because we haven't clicked on any links, but once you do, you'll see a change to the new color.
Notice that the background color has only changed on links one through four, and that's because the href value is the same for all four. Link five has a number sign in it, five. Even though I only clicked on one link, it will show as visited because they have the same href value. Another pseudo-class that can be used with links is active. And this describes the moment that you press on the link. Let's uncomment that and try it out.
Now when I click on it and I haven't released the mouse click yet, you will see the style. Then as soon as I release the mouse, it goes away. As mentioned previously, hover is for changing styles on mouse hover. So let's go ahead and uncomment that. And run it. So now when I hover over the links, the background color goes to none. But hover can actually be used on any element, not just links.
So let's add this to our paragraph here. Run it, and there you go. There is one more pseudo-class that can be used with links called focus. And this is for users that use the keyboard tab to navigate web pages rather than the mouse. The default focus looks like this. This blue, glowing outline. The may vary on different browsers, but you can update it with the outline property.
Uncomment this here, on a focus and run it. And now, when I tab through the links, we can see our new styles. Focus can also be used on other elements, as well. Such as this text input that's commonly used with forms. Let me just add the style to this block. Input, colon focus, run the code.
When I click on the input box, we can now see our new focus style. For accessibility reasons, you should not remove the focus outline without replacing it with a suitable alternative style. You want to make sure that the user still sees a visual representation of selecting the link when using the keyboard to navigate. There are more types of selectors, but this gives us a lot of options for adding styles to our final project.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property