:link

:link targets elements that have not yet been visited by the user.

Syntax

element:link {
  /* CSS properties */
}

Replace element with the specific HTML element you want to style (e.g., a for links).

Example

<a href="https://example.com">Link to Example</a>

a:link {
  color: blue;
  text-decoration: underline;
}

This will make unvisited links appear blue and underlined.

Additional Considerations

• Specificity: The :link pseudo-class has a lower specificity than most other CSS selectors. If you need to override styles, you might need to use more specific selectors or increase the specificity of your :link rule.
• Order: The order of pseudo-classes matters. The :link pseudo-class should typically be declared before the :visited pseudo-class to ensure correct styling.
• Browser Compatibility: While :link is widely supported, there might be minor differences in behavior across different browsers. It’s always a good practice to test your styles in various browsers.

Example with Multiple Pseudo-Classes

a:link {
  color: blue;
  text-decoration: underline;
}

a:visited {
  color: purple;
  text-decoration: none;
}

a:hover {
  color: red;
}

a:active {
  color: yellow;
}

This code creates a link style that changes color and text decoration based on the user’s interaction:

• Unvisited links are blue and underlined.
• Visited links are purple and have no underline.
• Hovering over a link changes the color to red.
• Clicking on a link changes the color to yellow.

By effectively using the :link pseudo-class, you can create visually appealing and informative links on your web pages.