As seen in Chapter 8, pseudo-classes can be used to select the elements of a document based on their characteristics, such as their status, relationship between them and other elements, and value of their attributes. This makes it possible to apply styling to elements based on these characteristics and so extending the capability of HTML. For example, changes in the appearance and behavior of HTML elements can be specified based on the interaction of the cursor with an element to produce interactivity. Pseudo-classes used for styling the contents of links, the targets of links, and the contents of generic elements (e.g., <p> and <div>) and their effects are presented here. Others, which are typically used for styling list, table, and form elements, are discussed in Chapter 17.
1. Styling Links
The pseudo-classes commonly used for styling link text are listed in Table 14.16. Figure 14.43 shows how the pseudo-classes listed in the table are used and Figure 14.44 the result.
In the example, all the rules refer to any <a> element in the <body> element. The a.link{} rule says to display an unvisited link in blue; a.visited{} says to display a visited link in purple; a:hover{} says to display the link text in bold and red when the cursor hovers over it; and a:active{} says to make the link text green when being activated (i.e., being clicked or pressed). The order of the pseudo-classes should be like in the example for them to work together properly.
2. :target
The :target pseudo-class allows you to style the element to which a URL points. You might recall from Section 4.5 in Chapter 4 that it is possible to link to a specific element on the same page using the #symbol with the href attribute’s value. The Target pseudo-class basically says to select the element whose id attribute’s value matches the part preceded by the #symbol in the href attribute’s value. For example, if an href value contains #orange, Target selects the element of id=“orange”. One of the common applications of the pseudo-class is for making a hidden element appear when a link is clicked. Figure 14.45 shows how it is used and Figure 14.46 shows the result after the link has been clicked.
In the example, the #extrainfo{} rule hides the <div> element of id=“extrainfo” (which contains the <form> element) when the link is clicked, and the #extrainfo:target{} rule shows the element. Note that once the link is clicked and the target element displayed, the page has to be reopened afresh (not reloaded/refreshed) for it to work as intended again.
2.1. Lightbox Display and the ‘.target Pseudo-Class
A common application of the :target pseudo-class is the lightbox display, in which a modal window is displayed on top of the current page and the page dimmed; a modal window being a window or dialog box that requires user interaction in order to close it and return to the page that opened it. The window can contain any media object type (e.g., text, image, or video) and the closing mechanism is typically an interactive X positioned at its right-hand corner. A lightbox display is usually implemented using scripting, but can also be implemented using :target and various other CSS properties already introduced in this chapter and previous ones. Figures 14.47 and 14.48 show a basic implementation and Figures 14.49 and 14.50 the result.
Although the code for the example is long and might look complex, the principle used is rather basic in which a page-size semi-transparent element containing a smaller element placed in its center is first hidden and then shown and overlaid on the current page when a link on the page is clicked. In the example, the h2, ,link{} rule centers the heading for the current page and the link that activates the lightbox display. The #window{} rule styles the <div> element of id=“window”, which is the element that is used to cover the current page and make it look dimmed. The rule makes the size of the element the same as that of the page; makes its background color black and slightly transparent (so that the page underneath looks dimmed); positions its top-left corner at the top-left comer of the page, and hides it.
The .box{} rule styles the <div> element of class=“box”, which is the element used for the smaller window that displays the intended content. The rule specifies the size of the element (using width, height, and padding), positions it at the center of the <div> element of id=“window” (using position, top, transform, and margin), styles the content (using font-size, font-weight, background-color, and text-align), and specifies the border and shadow (using border and box-shadow). Note that positioning the smaller window inside the larger one can be more straightforward by making the elements behave like a table, using the table and table-cell values with the display property. These values are introduced more fully in Chapter 17.
The ,close{} rule styles the <a> element of class=“close”, which is the control for closing the lightbox display. Essentially, when the link is clicked, the user is returned to the start of the page underneath. The rule removes the underline from the element’s content, X (using text-decoration), specifies the size, weight, and color of X and the background-color and border of the element (using font-size, font-weight, color, background-color, and border), specifies the shape of the element (using width, height, border-radius, and padding), and positions the element (using position, top, and left). It is worth noting that the sizing and positioning of the element is largely through trial and error rather than calculations.
The ,close:hover{} rule makes the X black and cursor-shape a pointer when the cursor is over it. The #window:target{} rule displays the <div> element of id=“window” (hidden in the #window{} rule) as well as its children (i.e., the smaller window and its content).
3. :not(X)
The :not(X) pseudo-class, known as negation CSS pseudo-class, is a function that allows you to specify elements that you do not want to be selected for styling. Essentially, it selects elements that do not match the selector represented by the X (which is known as the argument of the function). Figure 14.51 shows how the pseudo-class is used and Figure 14.52 the result.
In the example, the p{}rule applies padding to all edges of all <p> elements and the p:not(.middle){} rule applies a pink background color to the <p> elements that are not of class=“middle”.
4. :empty
The :empty pseudo-class allows you to select elements that have no child elements or white space. Comments or scripts are irrelevant and ignored. Figure 14.53 shows an example of the pseudo-class in use and Figure 14.54 the result.
In the example, the p{} rule specifies the height, padding, and background color for all <p> elements, and the p: empty {} rule specifies the background color for empty elements. Notice the white space between the start tag of the last <p> element and the comment tag. This is why it is not considered empty. The same result will occur if the white space is between the comment tag and closing tag of the element, or if there is a carriage return between an element’s tag and the comment tag.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.