css - Pseudo Class

CSS Pseudo Classes Explained for Beginners

In the world of HTML and CSS, a pseudo-class helps you to define a specified state of an element. CSS pseudo classes can provide a great way to make sure you get just the right actions from your content.

In this short tutorial guide, you will learn how to use css pseudo classes for your own work. Sample images will be provided to help guide you through the process from start to finish. If you find you need any refreshers on the basics of HTML or CSS, please have a quick read with  HTML for Dummies and CSS Basics for Beginners to get the ground floor materials ready. 

How Do I Use a Pseudo Class?

Using CSS pseudo classes will seem quite familiar if you have ever used CSS to target a specific element for effect. The process is much the same albeit with a few extra items to consider. 

In the image below, you have a standard paragraph element that is being styled with the color red. This is the common and basic method of using css.

Now, with that element in mind, consider if you want a specific action to take place when the end user interacts with the page. A very common example for this would be if the user moved the mouse over the element. This would be considered “hovering” over the element in CSS terms.

Here is where you can apply a pseudo class to the paragraph element. To do so, you will need to add a colon after the selector, (which in this example’s case would be the “p” element tag). After the colon, you add in the desired condition or state that the browser should interpret for the CSS styling.

In the next image, you can see that underneath the existing paragraph styling is another paragraph style set. However, this next selector is followed by a colon and the word “hover” before declaring the style inside the curly braces.

You can see that when the user hovers over the paragraph element, it changes to the color blue.

Why Would I Use a CSS Pseudo Class?

In the examples above, you can see how easy it is to have a working CSS pseudo class set up on your page. However, you might inquire what the need for a pseudo class is. The key to understanding the “why” of using the pseudo style is knowing that they rely on conditions. You define the condition for the pseudo to activate, so you need to understand why you want them to activate.

Using the example above, if an end-user was to visit your page and you wanted attention drawn to a specific element, the hover CSS pseudo class would provide that effect as it’s a direct visual change on the screen. 

To demonstrate this effect on another aspect, take the following for an example. In the image below you have the CSS that dictates what happens when a user has an input field in focus. The color of the text and background both change along with a border being added.

In the next image example, you can see the focus effect in use when the user has the input element in use, (or focus).

The question of why you want to use the focus option can be answered by the visuals alone. It helps to focus the user on what input section they are working with. Yet, you can go a bit deeper with the needs for this. 

Consider if the user is not using their mouse for navigation due to a limitation on hardware or personal disabilities. The hover option may not have any effect on this user. If they are instead using the tab button to move along the page elements, then the focus option would be a better choice. Combining both hover and focus CSS pseudo classes can provide great coverage for either event.

Combining CSS Knowledge 

This short guide can help you get a quick overview of how CSS pseudo classes work and the importance of knowing why you want to use them. However, that just covers the entry point for the topic. 

To help you get started with other uses of CSS pseudo classes take a look at the following posts for guidance. Learn about the link pseudo class styling with The Easy Guide to Styling HTML Links Using CSS. The content here will expand on the use of the pseudo classes by detailing how you can use them to define the state of a link for your end-user.

Noting the use of a menu on the examples, you can build on this by creating your own dropdown menu. This menu can also benefit from using pseudo classes like focus and hover to enhance the user experience. Learn the steps needed in the post How to Build a CSS Dropdown Menu.

Lastly, knowledge on how to combine CSS selectors can come in handy when you want to refine the pseudo classes in effect. The right combination form for HTML elements can ensure your desired effect such as hover is used in the context you want. Dive into the combinators content with the post An Introduction to CSS Combinators.

Above all, remember that you won’t be a master overnight. Take your time and have fun with the process. Each step, be it success or failure, builds your CSS skillset. Experiment and see where the road takes you.

_________________________________________________________________________

If you want to do more than just CSS, then take the dive into programming. Programming can jumpstart your options for new roles. Coding skills can help you make those new professional possibilities a reality. Take the first step and enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.

Start Learning Today!