part0020

I n this chapter, we are going to be working with some new CSS selectors that will improve the way you select and style HTML elements. The more CSS selectors you are exposed to, the better you get at creating professional layouts for your web pages.

Pseudo-class selectors are commonly used on anchor tags to define some CSS rules according to a specified state of the link. State in this case could mean styling an element when a user moves his/her mouse cursor over an element. Figure 15.0 shows the syntax for selecting and styling elements using pseudo-class selectors.

We are going to begin this chapter by creating and saving a new file with the name pseudo_selectors.html. To gain a practical example on how pseudo selectors work, we are also going to be adding some links (anchor tags) to our pseudo_selectors.html file, after which a “pseudo class” selector will be used to style those links. Figure 15.1 shows how the new file looks like, together with some links added to it.

Links also known as anchor tags in HTML usually have four states. These states can be used to determine how a link would display to a user. The four states are unvisited, visited, hover, and active. Using the anchor pseudo selectors, Figure 15.3 shows some new CSS rules applied on all four states of our links.

Figure 15.3: An embedded style-sheet is added to pseudo_selectors.html file with some pseudo-class selectors to style the new links added to the file.

a:link Pseudo Selector: The “:link” pseudo class selector is used for styling links (anchor tags) that have not been clicked (visited) by a user.

NOTE: There is no space between the tag name and the pseudo selector.

a: visited Pseudo Selector : The “:visited” pseudo class selector is used for styling links that have been visited or clicked by a user.

a: hover Pseudo Selector : This is also known as mouse over state. Links styled using the “:hover” pseudo selectors only take effect when a user hovers his/her mouse over a link. When you hover your mouse over any of the links styled with “hover” pseudo selectors, you will see the effect.

a: active Pseudo Selector : The “:active” pseudo class selector takes effect the moment a user clicks on a link before releasing the mouse click. To really see how this selector works, click and hold on a link and you should see the effect of this type of selector.

The next selector that we shall consider is the “:nth-child” pseudo selector. To demonstrate how this selector works, we are going to add four paragraphs within our pseudo_selectors.html file. We are also going to remove the <a> tags we added together with its CSS rules. Optionally, you can save it in a new file.

NOTE: We are not removing the anchor tags because there is not enough space to contain them, but we are removing it because we only want to focus on what we are currently discussing.

We are going to be using these tags to get a better idea on how the “:nth-child” pseudo selector works. The “nth” in this case represents the number at which a tag we are selecting is positioned. For example, we have four paragraphs within the <body> tag, if we want to select the third paragraph, it means the value we will provide to the “:nth-child” selector will be three (3). Let's do this practically within our embedded style-sheet to see how it works.

In Figure 15.5, a new CSS rule was added to style the third paragraph using “:nth-child” selectors.

Figure 15.5: A tag is styled using an “nth-child” pseudo selector in our pseudo_selectors.html file.

From Figure 15.5, observe that we used the “p” selector after which we attached the “:nth-child” pseudo selector to it in order to select the third element. The reason why we are able to select the third element is because of the value that we assigned to the “:nth-child” selector, in this case three (3). Figure 15.6 shows the effect our new CSS rule is having on the tags.

Keywords such as “odd” or “even” can alsso be assigned as values to the “:nth-child” pseudo selector. When the value of “odd” is assigned to the “:nth-child” pseudo selector for example, it will automatically apply the CSS rules we added to all the elements that are in an odd position.

To get a clearer view on what we just discussed, recall that odd numbers are numbers that have a remainder after dividing them by two. These are numbers like 3, 5, 7 etc. CSS knows the serial position of every HTML element. In our own case, we have four paragraphs, which means the first paragraph is positioned at “1” when we look at it serially. The second paragraph is positioned at “2” and so on. When we assign the value of “odd” to the“:nth-child” pseudo selector, it will select only the first and third tags simply because they are in an odd position when we look at them serially.

Figure 15.7 shows the “:nth-child” selector modified, this time with the value of odd, rather than the initial “3” we had.

From Figure 15.8, you will observe that only the odd (first and third) tags were styled. Now try changing the value of your “:nth-child” pseudo selector from “odd” to “even” and refresh your browser to see the differences between the two.

In this chapter, we got to see other possible ways that we can apply CSS rules to our HTML elements using the pseudo class selectors. The next chapter will be covering one of the most important CSS properties that will improve your layout and design. It's called “float”.