Mastering CSS: Using Pseudo-Classes and Pseudo-Elements to Build a Landing Page

CSS styling is an essential part of creating an attractive and user-friendly website. Some of the most powerful tools we have at our disposal are pseudo-classes and pseudo-elements.

This time, we are going to explore the importance of using these tools in CSS to improve the interaction and accessibility of our websites, as well as to give them a more sophisticated and professional look.

Pseudo-elements

These are elements that can be added to an HTML element to give it additional style or functionality.

They are called “pseudo” because they are not actual HTML elements but are “simulated” by special syntax in CSS.

Here, you can learn all about pseudo-elements.

Pseudo-classes

These are keywords added to selectors that specify a special state of the selected element. These special states can include user actions such as hovering over an element or having an active element.

Here, you can learn all about pseudo-classes.

Why use pseudo-elements and pseudo-classes?

In some cases, you might be tempted to create new HTML elements to add additional styles or functionality to your page. However, there are several reasons why you should consider using pseudo elements instead of creating new elements.

Here are some reasons why you should consider using pseudo-elements and pseudo-classes in your projects:

They allow you to add styles to specific parts of an HTML element, such as the first or last paragraph of a div or the first or last child of an element. This can be useful to give a distinctive style to specific elements of your page.
Allow you to add additional elements: Pseudo-elements allow you to add additional elements to your page, such as a custom list marker or a separator line. This allows you to expand the design possibilities of your page.
You avoid increasing the complexity of the HTML: By using pseudo-elements, you don’t have to add new elements to the HTML of your page. This allows you to keep the HTML cleaner and simpler, which makes it easier to maintain and debug the page.
By using CSS pseudo-classes in conjunction with media queries, you can create React components with adaptive styles and dynamic behavior.
Using CSS pseudo-classes and media queries, you can create modular, responsive components for a more consistent and reusable user experience across devices and contexts.

The most used Pseudo-classes in CSS

:active It is applied to an element while the user is pressing the mouse button or finger on it.

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

nav a:active {
  background-color: #6a82fb;
}

:hover It is applied to an element when the user hovers over it with the mouse cursor.

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

nav a:hover {
   color: #333;
   background-color: #fc5c7d;
 }

:focus It is applied to an element when it has the focus, that is when the user is interacting with it using the keyboard.

<input type="email" id="email" required placeholder="Email" />

input:focus {
   background-color: #111;
 }

:visited It is applied to a visited link.

<footer>
   <ul>
    <li><a href="/" class="link">Link 1</a></li>
    <li><a href="#" class="link">Link 2</a></li>
    <li><a href="/" class="link">Link 3</a></li>
   </ul>
  </footer>

footer .link:visited {
  color: #444;
}

:first-child and :last-child It applies to the first and last child element, respectively, of a specific element.

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing.</li>
</ol>

ol li:first-child {
  font-weight: bold;
}

ol li:last-child {
  text-decoration: underline;
}

:not(selector) It applies to all items that do not match the specified selector.

<footer>
  <ul>
    <li><a href="/" class="link">Link 1</a></li>
    <li><a href="#" class="link">Link 2</a></li>
    <li><a href="/" class="link">Link 3</a></li>
  </ul>
</footer>

footer ul li:not(:nth-child(3)) {
  font-weight: normal;
 }

:enabled and :disabled It applies to the input type element that is enabled and to an element that is disabled respectively.

<form>
  <button type="submit" disabled>Subscribe</button>h
</form>

<form>
  <button type="submit" enabled>Subscribe</button>h
</form>

form button:enabled {
  background-color: #6a82fb;
  color: white;
  padding: 10px 20px;
  border: none;
}

form button:disabled {
  background-color: #ccc;
  color: #666;
  padding: 10px 20px;
  border: none;
}

:checked It applies to a selected form element.

<form>
  <div id="radio-group">
  <input type="radio" class="radio" id="radio1" />
  <label for="radio1">I agree</label>
  <input type="radio" class="radio" id="radio2" />
  <label for="radio2">I desagree</label>
  </div>
</form>

.radio:checked {
  accent-color: #6a82fb;
 }

:valid and :invalid It applies to the input type element when the value entered is valid or invalid respectively.

<form>
  <input type="email" id="email" required placeholder="Email" />
</form>

input:valid {
  border: 2px solid green;
}

input:invalid {
  border: 2px solid red;
}

The most used Pseudo-elements in CSS

:before and :after to insert content before and after an element, respectively.

<section id="about-us">
   <h2>About Us</h2>
<section>

<section id="services">
   <h2>Services</h2>
</section>

#about-us h2::before {
  content: "😀";
}

#services h2::after {
  content: "👀";
}

::backdrop It applies styles to a background behind a specific element to give it more importance or emphasis.

<dialog>
  <h2>I'm an open dialog window</h2>
  <p>Check out my backdrop :)</p>
  <button class="btn" onclick="closeDialog()">Close</button>
</dialog>

dialog::backdrop {
  background-color: rgba(106, 130, 251, 0.4);
}

::first-letter It applies styles to the first letter of a paragraph.

<section id="about-us">
  <h2>About Us</h2>
  <p>
    We are a company dedicated to providing high quality products and services to our customers. We have been in
    business for over 10 years and have a reputation for excellent customer service and satisfaction.
  </p>
</section>

#about-us p::first-letter {
  font-size: 150%;
  color: #6a82fb;
}

::placeholder It applies styles to temporary text in an input element.

<form>
  <input type="email" id="email" required placeholder="Email" />
</form>

input#email::placeholder {
  color: #fc5c7d;
}

::marker It applies styles to the markers of a list item.

<section id="about-us">
    <li>First element</li>
    <li>Second element</li>
    <li>Third element</li>
   </ul>
  </section>

#about-us ul li::marker {
  color: #6a82fb;
  font-size: 1.5em;
}

Putting it all together

https://codesandbox.io/s/peaceful-pine-ju3gjw?from-embed=&embedable=true

Conclusion

In summary, pseudoclasses are an essential tool for web developers, as they allow us to create interactions and dynamic visual effects on web pages, improving the user experience and making the page more attractive and easy to use.

It is important to keep in mind that some pseudoclasses are more compatible with specific browsers, so it is always advisable to check compatibility before using them in a project.

Read more:

Want to connect with the Author?

Love connecting with friends all around the world on Twitter.

Also Published here.