What is visited in css

What is the visited selector in CSS?

Many candidates are rejected or down-leveled in technical interviews due to poor performance in behavioral or cultural fit interviews. Ace your interviews with this free course, where you will practice confidently tackling behavioral interview questions.

There are different types of CSS selectors for different purposes, one of which is the :visited CSS selector.

This is a location pseudo-class selector, which means it relates to links, and to targeted elements within the current document.

The CSS :visited selector enables the styling of links that have been visited by the user.

Syntax

The CSS selector can either be a class, ID, or HTML attribute. The :visited keyword matches links that have been visited by the user.

Use cases of :visited selector.

For privacy reasons, browsers limit which styles you can apply to the :visited selector, and how they can be used.

Some of the CSS properties that can be changed with the :visited selector are:

• color
• background-color
• border (and its sub-properties)
• outline-color
• fill and stroke properties for SVGs.

Code

From the example above, using the :visited selector the color of the link text is changed once the user visits the site.

Similar to the other example above, In this example the border of the a tag is set to change once the link has been visited.

The :visited selector enables users to distinguish the difference between links they have and haven’t visited.

Order of link pseudo-classes

It is important to note that in styling link-related pseudo-classes, the order must be followed to avoid case scenarios where the styles might be overridden.

The CSS style for each pseudo-class must be placed in this order, respectively:

The CSS :visited selector is also supported by all browsers.

Источник

:visited

The :visited CSS pseudo-class applies once the link has been visited by the user. For privacy reasons, the styles that can be modified using this selector are very limited. The :visited pseudo-class applies only and elements that have an href attribute.

Try it

Styles defined by the :visited and unvisited :link pseudo-classes can be overridden by any subsequent user-action pseudo-classes ( :hover or :active ) that have at least equal specificity. To style links appropriately, put the :visited rule after the :link rule but before the :hover and :active rules, as defined by the LVHA-order: :link — :visited — :hover — :active . The :visited pseudo-class and :link pseudo-class are mutually exclusive.

Privacy restrictions

For privacy reasons, browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used:

• Allowable CSS properties are color , background-color , border-color , border-bottom-color , border-left-color , border-right-color , border-top-color , column-rule-color , outline-color , text-decoration-color , and text-emphasis-color .
• Allowable SVG attributes are fill and stroke .
• The alpha component of the allowed styles will be ignored. The alpha component of the element’s non- :visited state will be used instead. In Firefox when the alpha component is 0 , the style set in :visited will be ignored entirely.
• Although these styles can change the appearance of colors to the end user, the window.getComputedStyle method will lie and always return the value of the non- :visited color.
• The element is never matched by :visited .

Note: For more information on these limitations and the reasons behind them, see Privacy and the :visited selector.

Syntax

Examples

Properties that would otherwise have no color or be transparent cannot be modified with :visited . Of the properties that can be set with this pseudo-class, your browser probably has a default value for color and column-rule-color only. Thus, if you want to modify the other properties, you’ll need to give them a base value outside the :visited selector.

HTML

a href="#test-visited-link">Have you visited this link yet?a>br /> a href="">You've already visited this link.a> 

CSS

a  /* Specify non-transparent defaults to certain properties, allowing them to be styled with the :visited state */ background-color: white; border: 1px solid white; > a:visited  background-color: yellow; border-color: hotpink; color: hotpink; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Privacy and the :visited selector

Before about 2010, the CSS :visited selector allowed websites to uncover a user’s browsing history and figure out what sites the user had visited. This was done through window.getComputedStyle and other techniques. This process was quick to execute, and made it possible not only to determine where the user had been on the web, but could also be used to guess a lot of information about the user’s identity.

To mitigate this problem, browsers have limited the amount of information that can be obtained from visited links.

Little white lies

To preserve users’ privacy, Firefox and other browsers will lie to web applications under certain circumstances:

• The window.getComputedStyle method, and similar functions such as element.querySelector , will always return values indicating that a user has never visited any of the links on a page.
• If you use a sibling selector such as :visited + span , the adjacent element ( span in this example) will be styled as if the link were unvisited.
• In rare scenarios, if you’re using nested link elements and the element being matched is different from the link whose presence in history is being tested, the element will be rendered as if the link were unvisited, as well.

Limits to visited link styles

You can style visited links, but there are limits to which styles you can use. Only the following styles can be applied to visited links:

• color
• background-color
• border-color (and its sub-properties)
• column-rule-color
• outline-color
• text-decoration-color
• text-emphasis-color
• The color parts of the fill and stroke attributes

In addition, even for the above styles, you won’t be able to change the transparency between unvisited and visited links, as you otherwise would be able to using the alpha parameter to rgb() or hsl() , or the transparent keyword.

Here is an example of how to use styles with the aforementioned restrictions:

:link  outline: 1px dotted blue; background-color: white; /* The default value of background-color is `transparent`. You need to specify a different value, otherwise changes on :visited won't apply. */ > :visited  outline-color: orange; /* Visited links have an orange outline */ background-color: green; /* Visited links have a green background */ color: yellow; /* Visited links have yellow colored text */ > 

Impact on web developers

Overall, these restrictions shouldn’t affect web developers too significantly. They may, however, require the following changes to existing sites:

• Using background images to style links based on whether they’ve been visited will no longer work, since only colors can be used to style visited links.
• Colors that are otherwise transparent will fail to appear if styled in a :visited selector.

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

CSS :visited Pseudo Class

The :visited selector selects and styles visited links in the page.

The :visited pseudo-class applies when the link has been visited by the user.

If we try to add style to the visited links by giving them a style property (e.g., background-image) it will not work in modern browsers. But the style properties will work properly if we use any other pseudo-class.

The styles that are modified using this selector are very limited. Browsers allow the following styles:

There is an option for web browsers to ignore the rule styles for the :link and :visited pseudo-classes because the :visited pseudo-class can be abused and it will be possible to get information from the visitor’s browser history.

Version

Syntax

Example of the :visited selector:

html> html> head> title>Title of the document title> style> a < display: block; padding: 5px; > a:visited < color: #8ebf42; > style> head> body> h2>:visited selector example h2> a href="https://www.w3docs.com">W3docs a> a href="https://stackdev.io/">Stackdev a> body> html>

Example of the :visited selector with the unvisited, visited, hover, and active links:

html> html> head> title>Title of the document title> style> p < font-size: 20px; > /* unvisited link */ a:link < color: #cccccc; > /* visited link */ a:visited < color: #1c87c9; > /* mouse over link */ a:hover < color: #8ebf42; > /* selected link */ a:active < color: #666666; > style> head> body> h2>:visited selector example h2> p>Visit our a href="https://www.w3docs.com/">website a>. p> body> html>

Источник