CSS Pseudo-classes

→ Are you a new visitor? Please visit the page guidance for new visitors ←

CSS Pseudo-classes

You heard about these things in the past, right? So what are these classes that we are talking about? Pseudo classes are structures that are used to specify a state of the selector. They are used in the next format: selector:pseudoClass { property: value; }, simply with a colon in between the selector and the pseudo class.
They are very useful in many situations and they make our life easier when it comes to prettify the websites.
Let’s take a closer look at some of the available pseudo-classes in css:

Link related pseudo-classes.

Let’s take then closely:

:link – This matches only those links that have a “href” attribute, so it is essentially to specify one for the link in order to work with this pseudo-class.

:visited – Matches and add style on the links that have already been visited by the user’s browser.

:hover – When you roll over a link or any other element that have this class applied, his properties are applied.

:active – Matches the link while it is being activated (when it is clicked on or otherwise activated).

The :first-child and :last-child pseudo-classes.

The :first-child pseudo-class matches a specified element that is the first child of another element. Let’s see an example:

Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.

:last-child – Selects the last element of its type within a parent (reverse of the above example).

The :focus pseudo-class.

Imagine the next situation: You are browsing from a mobile device. You don’t have a hover state there, so you have to use something instead. :focus will select links that are the current focus of the keyboard. This is not limited to links, but can be used on inputs and textarea elements as well.

Other pseudo-classes.

:enabled – Selects inputs that are in the default state of enabled and ready to be used.

:disabled – Selects inputs that have the disabled attribute. A lot of browsers will make the input a faded out gray, you can control that with this selector and add style for it.

:nth-child(N) – Matches elements that are inside as a parameter. If you put simply a number in the parentheses, it will match only that number element. For example, here is how to select only the 2nd element:

Example: :nth-child(2);

:not(S) – Removes elements from an existing matched set that match the selector inside the parameter of :not(). So for example, all divs except those with a class of “even”

Example: div:not(.even).

:empty – Matches elements which contain no text and no child elements.

Example: <span></span>

:first-letter – Selects the first letter of the text in the element.

:before – It is able to add content before a certain element. You can add a dash or line before every li element or so.

:after – Is able to add content after a certain element.

These are only a part of the available css pseudo-classes. There are lots of them, but I think I covered the most important ones (or at least the most used ones).

Don’t forget to subscribe and comment below.

Request an article ←