Pseudo-class

The pseudo-class may be depicted as the keyword which can be mixed to any selector that specifies the elected element’s unique state. It can be included to a selector to insert the effect to an existing element regarding its state. Example, The :hover can be applied to add the unique effects to the element if the user points the cursor on the element.

The pseudo-class name isn’t case-sensitive.

Syntax:

The pseudo-class, along with the colon (:) is used. The syntax is as follows:

Here, we are defining several pseudo-classes of CSS. We will explain a few most commonly applied and essential pseudo-classes. CSS pseudo-classes are explained in tabular form as below:

Pseudo-classDescription
:activeIt can be applied to include style to the active element.
:hoverIt includes the unique effect to the element if a user points the cursor on the element.
:linkIt inserts the style to an unvisited link.
:visitedIt inserts the style to a visited link.
:langIt can be applied to represent a language for use inside any specified element.
:focusThis class chooses an element that is focused via a user currently.
:first-childThis class includes a unique effect to the element, which are the first children of other elements.

Let’s consider the pseudo-classes, which are discussed above, with some illustrations.

Pseudo-class- :hover

The :hover pseudo-class includes the style to the element if any user points the cursor on it. If we wish to create it useful, then it should be used after two pseudo-classes, i.e., “:visited” and “:link”.

Example:

Output:

CSS Pseudo-class

Pseudo-class- :active

This pseudo-class uses at the time of the element is activated or clicked. It chooses an activated element.

Let’s consider it along with a demonstration as follows:

Example:

Output:

CSS Pseudo-class

Pseudo-class- :visited

It chooses a visited link and includes a unique style to them. It has possible values that can be the name of the color in any valid format.

Example:

Output:

CSS Pseudo-class

Pseudo-class- :lang

This class provides support in documents that need several languages. It permits us to portray the unique rules to distinct languages.

Example:

In the following example, we will describe p:lang(fr) that will choose the components having property lang=”fr”.

Output:

CSS Pseudo-class

Pseudo-class- :focus

It chooses the components that are focused over via a user currently. Generally, it is applied inside the input components of the triggers and forms if a user clicks over it.

Example:

Output:

CSS Pseudo-class

Pseudo-class- :first-child

This pseudo-class is used to match the particular component, i.e., the first children of other components. It includes the unique effects to any corresponding component.

Note: We must declare the <!DOCTYPE> on the document’s top to create the pseudo-class, i.e., “:first-child” to implement within the IE8 and its other earlier version.

Let’s consider the following demonstration to understand it.

Example:

Output:

CSS Pseudo-class

The general tooltip hover

The tooltip describes extra information regarding something if the user points the cursor on the component. Let’s make the tooltip with the use of the pseudo-class “:hover”.

Example:

Output:

CSS Pseudo-class

CSS pseudo-classes and classes

The CSS classes may be connected with the pseudo-classes. The syntax is as follows:

Syntax:

We can consider it with an example as follows:

Example:

Output:

CSS Pseudo-class

Pin It on Pinterest

Share This