Coding Newbie

css pseudo class selectors

CSS Pseudo Class Selectors: The Easy Way

Pseudo Class Selectors in CSS allows us to gain more control over the design of our website.

In this post we will talk about what CSS Pseudo Class Selectors are actually, and how do they work.

What are Pseudo Class Selectors?

Pseudo Class Selectors allow us to define special state of an element. It is a CSS attribute that give us more control over our elements and additional options when it comes to the page style and effects.

The syntax for using CSS selectors is quite simple and easy to use:

selector:pseudo-class {
    property: value;
}

As you can see, we separatepseudo classes from the element’s selector with a colon character “ : “.

Here is an example:

a:hover {
    color: red;
}

The code written would apply style on a link when we hover over it with a pointer.

This is just one example of a pseudo-class selector. There are many pseudo selectors, and it is important to mention that we can use them on different elements (hover can be used on a button, div, paragraph, etc), however there are also some that are exclusive for certain elements.

When it comes to browser support, pseudo-classes are fully supported by modern browsers (with few exceptions in IE). Now, let’s mention some of the most used pseudo-selectors.

List of Pseudo Class Selectors

Most Used Pseudo Class Selectors

:hover

We already mentioned hover pseudo class. The goal of :hover is to apply styling when we hover over some element. It can be any HTML element, but it is mostly used for links, buttons, and images.

:active

This pseudo is used for elements when they are in a so-called “active state”, which simply means we clicked on them. Most common use is for links and buttons.

:visited

This one is solely link-related pseudo selector, as its purpose is to target visited links.

:focus

This is often neglected pseudo class selector, but extremely important for web developers.

As the default user rarely uses a keyboard to navigate throughout the website, but does it with a mouse, :hover pseudo selector has gotten all the attention. However, there are users that use a keyboard for faster navigation, especially when it comes to filling registration forms and similar tasks.

This is where :focus comes to the scene. We use it to select elements when in focus of the keyboard tab.

Not only it is not limited to links, but it is more important to use for buttons, inputs, and text areas.

:checked

We use :checked for inputs, more precise, for checkboxes. With this selector we apply styling to elements which are in a “checked” state.

:required and :optional

These are input exclusive pseudo selectors. They are referring to inputs labeled as required, or optional.

Position Related Selectors

Now I will talk about some position related pseudo selectors.

:first-child

This selector selects an element related to its parent. More specifically, it will target the element which is the first child.

css pseudo class selector first-child

If we have multiple divs separating lines of text, then this styling will apply on every first child:

css pseudo class selectors multiple first-child

As we can see, this approach is more efficient than declaring a specific class for first paragraphs, and then assigning that class to each of them. Not only this, but if we add new divs with text, the :first-child pseudo selector would automatically apply styling for every new element, without the need to add class or repeat code.

:last-child

The last-child pseudo selector is the opposite of first-child, and it targets all the last elements within the parent element.

:nth-child()

We use this pseudo selector when we want to target a child element in a specific position. We enter the element’s position within the brackets.

css pseudo class selectors nth-child

Type Related Selectors

The pseudo selectors :first-child, :last-child, and :nth-child() will target the element regardless of its type. It will just take the first, last, or element in a specified position within the parent element. It will not take into account the type of the element.

So, if we specify the color p:first-child , the code will look at the first-child of a parent. If the first child is not a paragraph, there will be no colored paragraph within the parent element. If we want to make sure the first paragraph has desired color, no matter if it is a first child or not, we use the extension “of-type”.

:first-of-type

Targets the first element of specified type. Here is the difference compared to first-child pseudo selector.

css pseudo class selectors first-of-type

:last-of-type

The :last-of-type pseudo selector selects all the elements that are the last of a specified type within the parent element.

:nth-of-type()

This pseudo selector targets the elements of specified type, at a certain position within the parent element.

:first-letter

The :first-letter selector can be quite useful, and we can use it to style the first letter of an element. This is mostly the case when you want to make the first letter stand out from the rest of the text.

css pseudo class selectors first-letter

Conclusion

Pseudo Class Selectors allow us to define special state of an element. In the end, it is important to mention the difference between pseudo-selectors and pseudo-elements.

We recognize Pseudo selectors by the colon symbol “ : “, while pseudo elements use the double colon “ :: “ symbol. However, the crucial difference is that pseudo selectors target existing elements and content. On the other hand, pseudo elements create new content, relative to a specified, existing element. We use them to add some content, which can be especially effective and useful when creating animations.

Most used pseudo elements are ::before and ::after, you can learn more  about them here.

If you wish to learn more about CSS and why CSS is important language to understand, you can read it in the article What is CSS and why is CSS so important?

%d bloggers like this: