This chapter is from the book
This chapter is from the book
This chapter is from the book
9.7 Advanced Selectors
In order to add an extra bit of polish to the site header, we are going to introduce a few more advanced CSS selectors, and then we’ll continue to add in more styling for the rest of our page. These advanced selectors include pseudo-classes, first-child/last-child, and siblings.
9.7.1 Pseudo-Classes
It’s always nice to have links do something when a user rolls over them, especially since we removed the underlines from the links in Listing 9.16. Those underlines on links are called design affordances, and they are there to give users the suggestion that something will happen if they move the cursor to the link and click.
Some people may argue that all links on a site should have some affordance that clearly marks them as something clickable, either with underlines or by making them look like buttons (HOLY WAR!!!). At this point in time, though, the design convention of putting plain-text links that don’t have underlines (or some other special style) in a header is something that most Internet users are now accustomed to. You just know that the things at the top of the page are clickable.
Without underlines or other immediately visible affordances, though, it is important to show users a response to rolling over the link with their cursor (including on mobile (Box 9.3)). You really want people to know that they are interacting with an element that does something after they perform an action.
All HTML links have a set of what are called pseudo-classes that allow developers to style different interactions with the link:
:hover: Styles what happens when a user rolls over the link (applies to any element, not just links)
:active: Styles what happens when a user clicks the link
:visited: Styles what the link should look like if a user has already visited the linked page
The way to add a pseudo-class to a style declaration is by combining the element or class name with the pseudo-class, like this:
.header-nav a:hover {
color: #ed6e2f;
}
This use of the :hover pseudo-class arranges to change the color of the link when the user’s mouse hovers over it. (For now we’ve just picked a random orange color that will stand out nicely against the blue background.)
We’ll add a second change as well, which is to make the logo partially transparent on hover using the opacity property. The combined result appears in Listing 9.17.
Listing 9.17: Adding hover states to the navigational links.
css/main.css
.header-nav a:hover,
.header-nav a:active {
color: #ed6e2f;
}
.header-logo:hover,
.header-logo:active {
opacity: 0.5;
}
Note that we’ve added the same styling to the :active pseudo-class in order to give mobile users feedback as well (as discussed in Box 9.3).
Save your styles and refresh, and now the nav links will turn orange on rollover, and the logo will turn 50% transparent (the opacity style works like a decimal percentage), as shown in Figure 9.20.
)
Figure 9.20: Muuuuch better.
There are a bunch of other very useful pseudo-classes that are regularly used in designing layouts. We’ll talk about some of these throughout the rest of this section, and we’ll see further examples in Section 13.5.
9.7.2 Exercises
Now that you’ve seen how to style rollovers, try styling the .social-links to have rollover states where the background color changes.
As stated in this section, psuedo-classes like :hover don’t just apply to links. Try adding a hover state that changes the background color of the .full-hero element.
9.7.3 first-child
In order to indicate that the Home link in the navigation menu is particularly important, let’s arrange for it always to be a different color from the others. We could do this with a separate class, but since Home is always going to be the first link in the menu we can target it using what is called the first-child pseudo-class. This pseudo-class applies the corresponding styles only to the first child of the parent element. (There’s also a last-child pseudo-class, which we’ll use in Section 13.4, and many others that are beyond the scope of this tutorial.)
Let’s make the Home link work the opposite of the styling for the other links, so that it’s orange by default and black on rollover. To use the first-child pseudo-class, we need to make sure that whatever we’re targeting is contained in a wrapper, and that there is nothing else in the wrapper. That just means that when you are using the child pseudo-classes, you need the elements to be inside some other HTML element.
If there is anything like text, or an HTML element of a different type, between the top of the parent and the element you are trying to target, the first and last child pseudo-classes won’t work, but in this case we are going to target the first li in .header-nav (Listing 9.18). The ul with the class .header-nav is our wrapper, and the lis are all children that can be targeted.
Listing 9.18: Changing the appearance of just the first link.
css/main.css
.header-logo:hover,
.header-logo:active {
opacity: 0.5;
}
.header-nav > li:first-child a {
color: #ed6e2f;
}
.header-nav > li:first-child a:hover {
color: #000;
}
Note how specific we are in Listing 9.18: We’re using the child selector to target only lis that are direct children of the .header-nav class. You don’t technically need this level of precision, but later on we will add in a dropdown menu in the header (Section 13.4), and if we target styles too generally then we’ll make styling the dropdown difficult.
Now when you save and refresh the first link should look different (Figure 9.21).
)
Figure 9.21: Making the first nav link orange.
9.7.4 Exercise
We mentioned that there are other child selector types. Try out :last-child by changing the color of the link that is in the last li in the page header.
9.7.5 Siblings
Let’s look at two additional advanced selectors, and then after seeing how they work, we’ll use one to add another little style detail to our site navigation. CSS supports two sibling selectors, both of which are written like the child selector > when making a declaration:
The adjacent sibling +: Selects a single element only if it is right next to the primary element in the declaration. For example, h2 + p selects a p tag only if it is immediately preceded by an h2 tag.
The general sibling ~: Selects all elements of the type in the declaration if they follow the primary element. For example, h2 ~ p applies to all p tags preceded by an h2 tag.
Let’s hop out of working on the header for a second to create an example to use with the sibling selectors. In your default.html file, replace the h2 tag with the HTML from Listing 9.19.
Listing 9.19: Replacing the h2 and adding some text.
_layouts/default.html
<h2>THE FOUNDERS</h2> <p> Learn Enough to Be Dangerous was founded in 2015 by Michael Hartl, Lee Donahoe, and Nick Merwin. We believe that the kind of technical sophistication taught by the Learn Enough tutorials can benefit at least a billion people, and probably more. </p> <p>Test paragraph</p>
We can target the paragraph that directly follows the h2 with the style shown in Listing 9.20.
Listing 9.20: Adding an adjacent sibling selector.
css/main.css
h2 + p {
font-size: 0.8em;
font-style: italic;
margin: 1em auto 0;
max-width: 70%;
text-align: center;
}
Notice that only the first paragraph is styled (Figure 9.22).
)
Figure 9.22: Only the p immediately after the h2 is styled.
Now if we change to the general sibling selector ~ as in Listing 9.21, both paragraphs will get styled (Figure 9.23).
Listing 9.21: The general selector targets all elements that come after a specified element.
css/main.css
h2 ~ p {
font-size: 0.8em;
font-style: italic;
margin: 1em auto 0;
max-width: 70%;
text-align: center;
}
You may also have noticed from Figure 9.23 that the ps in the .bio-boxes below aren’t styled. That is because the sibling selectors don’t pass styles to elements that are wrapped inside any other elements. They only work on elements inside the same parent.
)
Figure 9.23: All p tags after the h2 are now styled the same.
Looking back to the header, we can use a sibling selector in the site header navigation to target all the lis after the first li, and add in a little extra styling to help visually separate the links using the styles in Listing 9.22. You might have seen something like this online: a little vertical line between navigational links to help separate them from other links in a list. Let’s use a sibling selector to add some divider lines.
Listing 9.22: Using the general sibling selector to add styling to the header navigation.
css/main.css
.header-nav > li {
display: inline-block;
margin-left: 1em;
}
.header-nav > li ~ li {
border-left: 1px solid rgba(0, 0, 0, 0.3);
padding-left: 1em;
}
The rule .header-nav > li ~ li in Listing 9.22 says to apply the subsequent rules to all li elements next to an initial li inside an element with class ”.header-nav”— in other words, every li in the menu after the first one. This way, the divider lines appear before every menu item except the first (Figure 9.24).
)
Figure 9.24: Menu divider lines.
Now that the navigation is fairly spiffy, let’s turn our attention to the logo, which will give us a chance to learn a little bit about CSS positioning.
9.7.6 Exercise
What if you didn’t use the ~ in Listing 9.22, but rather the adjacent sibling selector? Would the divider line appear before every menu item?