DIY Hideout
DIY Hideout
CSS Advanced Selectors Part 2 - Pseudo-classes and Pseudo-elements

CSS Advanced Selectors Part 2 - Pseudo-classes and Pseudo-elements

By Lye Heng Foo on

In the previous articles, we have looked at basic and the more advanced Combinator selectors.

In this article, we will take a look at the use of a few common pseudo-classes and psuedo-elements, and how to make use of these powerful CSS selectors.

What are Pseudo-classes?

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

Anchor Pseudo-classes

These are the few pseudo-classes that can use with the anchor element:

a:link {}   /* for unvisited link */
a:visited {}   /* for visited link */
a:hover {}   /* for when mouse is hovered over the link */
a:active {}   /* for when the link is selected */

NOTE: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective!

Other useful Pseudo-classes

These pseudo-classes can be used over elements. Examples:

div:hover {}   /* for when mouse is hovered over the div section */
p:first-child {}   /* matches the first <p> child element of any element */
li:nth-child(2) {}   /* matches the second <li> child element of a list */
p:nth-child(odd) {}   /* matches all odd <p> child element of any element */
tr:nth-child(even) {}   /* matches all even <tr> child element of a table */
p:last-child {}   /* matches the last <p> child element of any element */
input:focus {}   /* for when the input element is in focus */

For a more complete list of all the available pseudo-classes to use, you may visit W3Schools CSS Pseudo-classes

What are Pseudo-elements?

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

Please take note that pseudo-elements starts with double colon (::), whereas pseudo-classes starts with a single colon (:).

Some useful Pseudo-elements

::first-letter {}   /* select the first letter of the text */
::first-line {}   /* select the first line of the text */
::before {}   /* use to insert some conent before the content of an element */
::after {}   /* use to insert some conent after the content of an element */
::marker {}   /* use to style the markers of list items */
::selection {}   /* matches the portion of an element that is selected by user */

For a more complete list of all the available pseudo-elements to use, you may visit W3Schools CSS Pseudo-elements

Examples of common usages of Pseudo-elements

The following example insert a small bulleye image before the start of the heading h1 text.

h1::before {
  content: url(bulleyes.gif);
}

The following example turns the user selected text to bright red on a yellow background.

::selection {
  color: red;
  background: yellow;
}

More articles like this ...

Backup And Restoring Mysql Database

Backup And Restoring Mysql Database

By Lye Heng Foo on

Backup using phpMyAdmin Read more
CSS Advanced Selectors Part 1 - The Combinator Selectors

CSS Advanced Selectors Part 1 - The Combinator Selectors

By Lye Heng Foo on

There are various selectors that we could use to select the element(s) in our HTML page. We have covered simple basic CSS selectors in the previous article. In this article, we will now cover the advanced CSS combinator selectors. Read more
CSS Basic Selectors

CSS Basic Selectors

By Lye Heng Foo on

There are various selectors that we could use to select the element(s) in our HTML page. Simple basic CSS selectors are covered in this article. The advanced CSS selectors will be covered in the following article. Read more