Continuing down our CSS path. The previous article can be found here:

Pseudo-class Selectors

The last type of selector that we’ll cover is the pseudo-class selector. The ones that you will likely encounter are the ones pertaining to anchor tags, <a>. Let’s start by creating a simple link.

<a href=”https://dinocajic.com">Dino Cajic</a>

The browser will underline the link and make the text color blue. When you hover over it, you may or may not see the color change. Visiting the link will likely change the color of from blue to purple.

To modify the link appearance, we can modify each of the pseudo-classes: unvisited, visited, hover, selected. We’ll do this by adding a colon between the a selector and the pseudo-class.

a:link { text-decoration: none; color: red; }
a:visited { color: green; }
a:hover { text-decoration: underline; }
a:active { color: purple; }

Open the page in your browser to see the results. The unvisited link will appear red. Hovering over the link will cause the text to appear underlined. Clicking and holding the link will change the color of the text to purple. After you visit the page, the color of the link will appear green.

There are several other pseudo-class selectors but the last one that we’ll focus on is the nth-child pseudo-selector. The nth-child pseudo-selector allows you to select elements based on a specific pattern, like for example, all odd elements. This is beneficial when you’re trying to style a table to have alternating colors for readability.

The nth-child pseudo-selector can have the following values:

:nth-child(odd)

• select all odd elements: 1, 3, 5, …

:nth-child(even)

• select all even elements: 2, 4, 6, …

:nth-child(An+B)

• Mathematical formula allowing for specific selections such as 2n+5, where n is in a range from 0 to ∞. The result is all odd numbers starting at five: 5, 7, 9, 11, 13,

:nth-child(n)

• selects a specific element: n = 34

The nth-child pseudo-selector can be applied to any HTML element. Let’s apply it to the div tag.

<section>
    <div>First Row</div>
    <div>Second Row</div>
    <div>Third Row</div>
    <div>Fourth Row</div>
    <div>Fifth Row</div>
    <div>Sixth Row</div>
    <div>Seventh Row</div>
</section>
/* CSS */
div { padding: 10px; }
div:nth-child(odd) { background-color: lightblue; }

We first apply a 10px padding to all div tags. Each odd div element also receives a light-blue background color.

Selector Precedence

If your HTML element has multiple types of selectors appended to it, and those selectors have been defined in the CSS document, you will have to worry about precedence. Imagine that we have a paragraph tag with class and id attributes.

<p class=”red-text” id=”blue-text”>
    The color of the text in this paragraph will appear blue.
</p>
/* CSS */
p { color: green; }
.red-text { color: red; }
#blue-text { color: blue; }

The id attribute has the highest precedence, followed by the class attribute, and finally the type selector.

Nested selectors also have higher precedence than non-nested selectors. For example, if we extend our previous example, we can change the precedence again.

<p class=”red-text” id=”blue-text”>
    <a href=”#”>
        The color of the text in this paragraph will appear orange.
    </a>
</p>
/* CSS */
p { color: green; }
.red-text { color: red; }
#blue-text { color: blue; }
a { color: purple; }
p a { color: orange; }

Dissecting the example above, the <p> tag has three styles appended to it:

• Green text color for the <p> tag
• A red text color for the .red-text class
• A blue text color for the #blue-text id

The nested <a> tag has two styles appended to it:

• The purple, non-nested text color
• The orange, nested text color

If the nested tag (p a { … }) was not declared in the external CSS document, the color would appear as purple. The styling for the nested <a> tag would take precedence over the class and id attributes.