Pseudo-classes and their Types in CSS 

Zia

1 Follower

Follow

Jun 16, 2024

-

0 sec read

233

0

Pseudo-classes

Consider a scenario where a Website consists of multiple pages linked through hyperlinks. Browse through various Web pages by randomly clicking on the links on the main page. At times, it might happen that unknowingly the same Web page gets opened that you have already visited. In such a case, you might need a mechanism to differentiate the already visited links from the remaining ones. In CSS, this is possible by using pseudo-classes.

Pseudo-classes allow users to apply different styles to elements such as buttons, hyperlinks, and SO on.

Lists the different states of an element.

• Active: Defines a different style for an element that is activated by the user.
• Hover: Defines a different style for an element when the mouse pointer is moved over it.
• Link: Defines a different style for an unvisited hyperlink.
• Visited: Defines a different style for the visited hyperlink.
  
  

Syntax:

Lists the selector name and its description.

• :link : Is used for selecting all unvisited links
• :visited : Is used for selecting all visited links
• :active : Used for selecting the active link
• :hover : Is used for selecting links on mouse over
• :focus : Is used for selecting the input element that has a focus
• :first-letter : Is used for selecting the first letter of each <p> element
• :first-line : Is used for selecting the first line of each <p> element
• :first-child : Is used for selecting each <p> element that is the first child of its parent.
• :before : Is used for inserting content before each <p> element
• :after : Is used for inserting content after each <p> element
• :lang (language) : Is used for selecting each <p> element with a lang attribute value
  
  

Pseudo-classes specify the styles to be applied to an element depending on its state. In CSS3, a selector can contain multiple pseudo-classes. These pseudo-classes should not be mutually exclusive. For example, the selectors a: visited: hover and a:link: hover is applicable, but a :link :visited is not applicable because :link and :visited are mutually exclusive selectors. The HTML code creates a form that accepts customer details and provides a link that allows the user to view the bill.

Specifies the styles for an unvisited link.

Specifies the styles for a visited link.

Specifies the styles for a link when a mouse hovers over it.

The Purpose of Pseudo Elements

Consider a scenario where you are designing a website that explains important technical terms. While defining such terms, you might feel the necessity to emphasize more on the first letter by applying different styles. It becomes difficult if you try to apply styles only to the first letter of a line or paragraph. This can be achieved by using pseudo-elements.

Pseudo-elements provide you with the flexibility to apply styles to a specific part of the content such as a first letter or first line. This allows you to control the appearance of that specific content without affecting the rest of the content.

Pseudo-elements

The :first-line and :first-letter pseudo-elements allow you to apply styles to the first line and first letter respectively.

:first-line

The :first-line pseudo-element allows you to apply styles to the first line.

:first-letter

The :first-letter pseudo-element allows you to apply styles to the first letter.