After understanding the three commonly used selectors tag selector, class selector, and id selector, it's time to explore another powerful feature like pseudo-classes in CSS. By using pseudo-classes, we can target elements in HTML based on specific states or conditions, such as when a visitor hovers over an element, when an input is in focus, or when an element is the first child of its parent. In this article, we will discuss the concept of pseudo-classes, examples of pseudo-classes, and how to use them.

Understanding Pseudo-classes in CSS

A pseudo-class is a type of selector in CSS that is used to select elements based on certain conditions or positions in the document structure that cannot be selected using only class or ID. In CSS, a pseudo-class is written using a colon (:) followed by the name of the pseudo-class. Here's an example of how to change the color of a link when the cursor is hovered over it.

a:hover {
 color: red;
}

The selector a:hover will change the color of the link to red when the cursor is hovered over the link.

Some Examples of Commonly Used Pseudo-classes

Here are some examples of commonly used pseudo-classes in website development.

1. :hover

The definition of hover itself is to give an effect when the user points the cursor at an element. Here is another example of using :hover.

button {
 background-color: gray;
}

button:hover {
 background-color: red;
}

The background color of the button is gray. When we hover the cursor over the element, the background color of the button changes to red.

2. :active

This selector will work when the element is pressed, for example on a link.

a:active {
 color: orange;
}

When the link is clicked, the color of the link will change to orange.

3. :focus

Used for elements that receive focus, such as text inputs that are being typed.

input {
 border-color: gray;
}

input:focus {
 border-color: red;
}

When the input text is not in focus, the default border color is gray. But when the input text is in focus or being typed, the border color changes to red. This is very useful for clarifying which input elements the user is filling in.

4. :first-child, :last-child, and :nth-child

We may need to target elements based on their position in the order of sibling elements in the HTML structure. With these selectors, we can set styles based on the order of elements without having to add classes or IDs one by one.

• :first-child

Used to select the first child element of its parent. Here is an example of its use.

HTML Code

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS Code

li:first-child {
  color: red;
  font-weight: bold;
}

The code above will give red color and bold text only to the first <li>, because it is the first child of <ul>.

• :last-child

The opposite of :first-child, :last-child is used to target the element that is the last child of its parent.

HTML Code

<ul>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ul>

CSS Code

li:last-child {
  color: blue;
  font-style: italic;
}

The code above will give the color blue and italic text only to the last <li>, because it is the last child of <ul>.

• :nth-child(n)

By using this pseudo-class, we can select child elements based on their sequential number starting from 1 and above.

HTML code

<ul>
  <li>Product 1</li>
  <li>Product 2</li>
  <li>Product 3</li>
  <li>Product 4</li>
</ul>

CSS Code

li:nth-child(2) {
  background-color: green;
}

The code above will give a green background to the second element, namely Product 2.

Why Are Pseudo-classes So Important?

The use of pseudo-classes is very important in website development because they provide the ability to set the style of HTML elements based on certain conditions. In addition, we can improve the user experience and change the appearance dynamically.

Conclusion

Pseudo-classes in CSS are an essential method for styling modern websites. From creating interactive buttons to adjusting the appearance of input fields when active, pseudo-classes give us greater visual control over web pages.

Thankyou, see you in the next article.