A CSS rule determines how the content of the element or elements that it is associated with should be displayed. It comprises two parts: a selector and a declaration block. The selector selects the element or elements to which the instructions specified in the declaration block are to be applied. A declaration block may contain one or more declarations and is enclosed in curly brackets, with the declarations separated by semicolons. Although it is not mandatory to place a semicolon after the last declaration, it is generally considered a good practice. For example, it can help avoid omitting one when hurriedly adding a declaration to the end of a block. Each declaration comprises a property and a value, separated by a colon. Property specifies the aspects of the selected element to change, such as font, color, width, height, and border, and value specifies the setting for the property. Figure 8.3 illustrates the format. The example in Figure 8.3 specifies that the content of all occurrences of the <h1> element should be given a foreground color of yellow and a font in the family of Arial. The CSS properties are dealt with more fully later.
The example in Figure 8.4 shows more than one element specified in a selector and specifies to apply the same color and font family to the contents of the <h1>, <h2>, and <h3> elements, so that they look the same, except for their size (recall from Chapter 3 that different heading elements have different sizes).
CSS rules can be declared in a separate document, to which the HTML document to be styled is then linked, or they can be declared in an HTML document, using the <style> element or the style attribute. When declared in a <style> element, they are simply placed between the element’s opening and closing tags. When declared using the style attribute, the declaration block is made the value of the attribute and placed in quotes, as shown in Figure 8.5.
The declarations in the example say to display the text content of the element on which the style attribute is in yellow and has Arial family of font. The value of the style attribute is a rule, too, except that there is no selector, which it does not need, since it is inside an element and applies only to the element. More about how CSS rules are kept in a separate document or defined within an HTML document is discussed later in the chapter.
1. CSS Selector Types
CSS provides many different selector types that enable rules to be crafted to style various complex combinations of elements in an HTML document. Table 8.1 lists the main ones. They will be referenced from other chapters, as they are used in more practical design situations.
Elements can also be selected for styling, based on attributes or their values. Table 8.2 lists common attribute selectors and how values are matched.
2. Pseudo-Elements
CSS defines pseudo-elements to allow the selection and styling of specific parts of elements, such as the first letter of the first line of a paragraph, that are not accessible by using normal CSS selectors, because they are not defined in the HTML document tree model, since the model sees a document only as a hierarchical tree of elements whose properties can be controlled by CSS. Essentially, pseudo-elements behave like elements, even though they are not real elements, since they are not part of the HTML document tree. Table 8.3 lists the elements.
Although one colon, instead of double colon, may also be used with pseudoelements, CSS3 uses double colon to distinguish pseudo-elements from pseudoclasses. Figure 8.6 shows the format for using a pseudoelement. It says to make the first letter of the content of every <p> element yellow. More examples of usage can be found in Chapter 14.
3. Pseudo-Classes
Pseudo-classes are designed to allow elements to be classified on characteristics that are broader than those possible, for example, with the class attribute. Figure 8.7 shows the format for specifying them, and Table 8.4 lists them. Note that only a few of them are commonly used. Examples are provided in Chapters 14 and 17.
TABLE 8.4
Pseudo-Classes and Examples of Usage
4. nth Selectors
Instead of the :nth-based selectors listed in Table 8.4 taking just n (i.e., a number), they can also take a mathematical expression. This enables them to be used to specify multiple child selections, such as every second or third child element in a list of children of the same parent. The expression’s syntax is an+b, and it represents an element that has an+b-1 siblings before it in a list of children that share the same parent with it. For example, if an element has three siblings before it, then its position is 4th and can also be said to have an index of 4. The index numbering of the children of an element starts at 1 (i.e., the first child has an index of 1).
Another way to think of the an+b expression is that it selects child elements whose index matches the value to which the expression evaluates. The value of n can be a positive integer or zero, and the value of a or b must be a positive or negative integer or zero. Basically, the way it works is that n is progressively assigned the values of 0,1,2,3, and so on and the expression evaluated each time for each value. In the end, the element selected is the one with the index that matches the result of the evaluation. So, for the expression 2n + 1, for example, n is first given the value of 0, which makes the expression evaluate to 1 (i.e., [2 x 0] + 1). So, the first child is selected. Next, n is given the value of 1, which makes the expression evaluate to 3 (i.e., [2 x 1] + 1). So, the third child element is also selected. In the same way, the values of 2,3,4, and so on evaluate to 5,7,9, and so on, and the corresponding child elements are selected, if available. If
the expression evaluates to zero or a negative number, no element is selected, since no child element has a zero or negative index.
To show an example of the application of nth selectors, li:nth-child(4n-7) { color: brown; } says to make text brown for all <li> child elements that have the index of 1,5,9, and so on. This is done by giving n the value of 0, which makes the expression evaluate to -7 (i.e., [4 x 0] – 7), for which there is no matching element index. Next, n is given 1, which evaluates to -3, for which there is also no matching index. Next, n is 2, which evaluates to 1, which matches the first child element, and so on.
Instead of using n or an expression, the odd or even keywords could also be used. The odd keyword selects child elements 1,3,5,7, and so on, and the even keyword selects child elements 2,4,6,8, and so on. The odd keyword, for example, can be specified as tr:nth-child(odd){}. It is useful to know that there are :nth checkers on the Web for trying out outputs of expressions.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.