Visited link style in css

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.

Источник

: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.

Источник

:visited

Подсвечиваем ссылки, по которым пользователь уже ходил.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Псевдокласс :visited добавляется ссылкам, по которым уже переходил пользователь.

На скриншоте выше посещённым ссылкам задан красный цвет. Ссылки окрасились в него автоматически, как только по ним перешли. По первой ссылке ещё не кликали, поэтому она стандартного цвета.

У этого свойства есть ряд ограничений. Из-за этого его не часто используют в реальной практике.

Пример

Скопировать ссылку «Пример» Скопировано

Цвет посещённой ссылки будет фиолетовым, а непосещённой — зелёным.

 a  color: green;> a:visited  color: purple;> a  color: green; > a:visited  color: purple; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

К селектору, выбирающему ссылки на странице, добавляем двоеточие и ключевое слово visited .

Селектор ссылки по тегу в состоянии :visited

 a:visited  /* Стили */> a:visited  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

Селектор ссылки по классу + :visited

 .link:visited  /* Стили */> .link:visited  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

Составной селектор ссылки, вложенной в пункт списка, в состоянии :visited

 li .link:visited  /* Стили */> li .link:visited  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

Селектор ссылки по идентификатору в состоянии :visited

 #id:visited  /* Стили */> #id:visited  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

Селектор ссылки по классу в состоянии :visited и её псевдоэлемент

 .link:visited::before  /* Стили */> .link:visited::before  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Браузер отслеживает, по каким ссылкам на странице кликнул пользователь, и подставляет фантомный класс :visited тем из них, по которым был совершён переход на другую страницу. При этом весь механизм присвоения этого класса скрыт под капотом браузера.

Ограничения

Скопировать ссылку «Ограничения» Скопировано

С самого начала интернета браузеры могли присваивать псевдокласс :visited ссылкам. В какой-то момент истории злоумышленники научились собирать информацию о тех сайтах, на которые ходит пользователь, и использовать это для собственной выгоды. Подобный «шпионаж» осуществлялся довольно просто: на странице со ссылками запускался скрипт, который проверял стили ссылок и собирал все посещённые в свою базу.

Для предотвращения злодеяний браузеры приняли решение, что ограничат стили, которые будут срабатывать для псевдокласса :visited . Вот список доступных свойств:

• color ,
• background — color ,
• border — color ,
• border — bottom — color или border — block — end — color ,
• border — left — color или border — inline — start — color ,
• border — right — color или border — inline — end — color ,
• border — top — color или border — block — start — color ,
• outline — color ,
• column — rule — color ,
• fill ,
• stroke .

Любые другие стили будут игнорироваться. Так что не удивляйтесь, если что-то из написанного вами кода не будет работать.

Кроме того, браузер проигнорирует цвета с альфа-каналом (прозрачностью, проще говоря) и прозрачность opacity .

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Смену стилей между состояниями можно анимировать при помощи transition 🎉

💡 Если дизайнер хочет применить для посещённой ссылки стили, которые не входят в перечень разрешённых — не стесняйтесь ему на это указать и пояснить, что его задумка технически не реализуема.

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Если вы задаёте стили для разных состояний ссылок, следует придерживаться определённого порядка в объявлении:

Этот порядок легко запомнить при помощи аббревиатуры LVFHA и мнемоники LoVe Fears HAte.

🛠 Из-за наложенных на этот псевдокласс ограничений он не часто используется в реальных проектах. Только там, где обязательно нужно выделять посещённые ссылки. Как правило, это некий большой сборник ссылок на различные ресурсы. Нелюбовь к этому псевдоклассу передалась от разработчиков дизайнерам и они редко отрисовывают посещённые ссылки в макетах.

Источник