Adding Presentational Styles - CSS3 Foundations - page 93

nav ul li:nth-child(2){
opacity: 0;
}
In Figure 5-25, the “About” link is no longer visible on the page, but you can still see an empty space where that link
should be. If you hover over that empty space, you can still click the “About” link, even though the element has an
opacity of 0 .
Figure 5-25 The blank area where the “About” link is positioned.
When visibility: hidden is applied:
nav ul li:nth-child(2){
visibility: hidden;
}
The “About” link is still rendered (you can see the empty space, as in Figure 5-25); however, this time, you can't
click it! So both methods of hiding an element still render that element, but visibility: hidden has no
events—such as clicking—whereas opacity: 0 does.
What if you want to have an element hidden and not even rendered? An element that exists in the HTML but doesn't
show an empty space when it's hidden?
Using display: none achieves that, as shown in Figure 5-26:
nav ul li:nth-child(2){
display: none;
}
Figure 5-26 The “About” link is no longer rendered on the page when it is given the declaration display: none.