Css visited background color

CSS Links

With CSS, links can be styled in many different ways.

Styling Links

Links can be styled with any CSS property (e.g. color , font-family , background , etc.).

Example

In addition, links can be styled differently depending on what state they are in.

The four links states are:

• a:link — a normal, unvisited link
• a:visited — a link the user has visited
• a:hover — a link when the user mouses over it
• a:active — a link the moment it is clicked

Example

/* unvisited link */
a:link color: red;
>

/* visited link */
a:visited color: green;
>

/* mouse over link */
a:hover color: hotpink;
>

/* selected link */
a:active color: blue;
>

When setting the style for several link states, there are some order rules:

Text Decoration

The text-decoration property is mostly used to remove underlines from links:

Example

a:visited text-decoration: none;
>

a:hover text-decoration: underline;
>

a:active text-decoration: underline;
>

Background Color

The background-color property can be used to specify a background color for links:

Example

a:link <
background-color: yellow;
>

a:visited background-color: cyan;
>

a:hover background-color: lightgreen;
>

a:active background-color: hotpink;
>

Link Buttons

This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:

Example

a:link, a:visited <
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
>

a:hover, a:active background-color: red;
>

More Examples

Example

This example demonstrates how to add other styles to hyperlinks:

Example

Another example of how to create link boxes/buttons:

a:link, a:visited <
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
>

a:hover, a:active background-color: green;
color: white;
>

Example

This example demonstrates the different types of cursors (can be useful for links):

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

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

Источник

CSS Links

With CSS, links can be styled in many different ways.

Styling Links

Links can be styled with any CSS property (e.g. color , font-family , background , etc.).

Example

In addition, links can be styled differently depending on what state they are in.

The four links states are:

• a:link — a normal, unvisited link
• a:visited — a link the user has visited
• a:hover — a link when the user mouses over it
• a:active — a link the moment it is clicked

Example

/* unvisited link */
a:link color: red;
>

/* visited link */
a:visited color: green;
>

/* mouse over link */
a:hover color: hotpink;
>

/* selected link */
a:active color: blue;
>

When setting the style for several link states, there are some order rules:

Text Decoration

The text-decoration property is mostly used to remove underlines from links:

Example

a:visited text-decoration: none;
>

a:hover text-decoration: underline;
>

a:active text-decoration: underline;
>

Background Color

The background-color property can be used to specify a background color for links:

Example

a:link <
background-color: yellow;
>

a:visited background-color: cyan;
>

a:hover background-color: lightgreen;
>

a:active background-color: hotpink;
>

Link Buttons

This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:

Example

a:link, a:visited <
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
>

a:hover, a:active background-color: red;
>

More Examples

Example

This example demonstrates how to add other styles to hyperlinks:

Example

Another example of how to create link boxes/buttons:

a:link, a:visited <
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
>

a:hover, a:active background-color: green;
color: white;
>

Example

This example demonstrates the different types of cursors (can be useful for links):

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

:visited

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

Try it

Стили, определенные псевдоклассом :visited , будут переопределены любым последующим псевдоклассом, связанным со ссылкой ( :link , :hover или :active ), который имеет по крайней мере равную специфичность. Чтобы правильно оформить ссылки, поместите правило :visited после правила :link , но перед правилами :hover и :active , как определено LVHA-порядком : :link — :visited — :hover — :active .

Privacy restrictions

Из соображений конфиденциальности браузеры строго ограничивают то,какие стили вы можете применять с помощью этого псевдо-класса,и как их можно использовать:

• Допустимые CSS свойства 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 и text-emphasis-color .
• Допустимые атрибуты SVG: fill и stroke .
• Альфа-компонент разрешенных стилей будет игнорироваться. Вместо этого будет использоваться альфа-компонент состояния элемента non- :visited .В Firefox, когда альфа-компонент равен 0 , стиль, установленный в :visited , будет полностью игнорироваться.
• Хотя эти стили могут изменить внешний вид цветов для конечного пользователя, метод window.getComputedStyle будет лгать и всегда возвращать значение не :visited цвета.
• Элемент никогда не сопоставляется :visited .

Примечание. Дополнительные сведения об этих ограничениях и их причинах см. В разделе « Конфиденциальность» и селектор «посещение» .

Syntax

Examples

Свойства, которые в противном случае не имели бы цвета или были бы прозрачными, нельзя изменить с помощью :visited . Из свойств, которые можно установить с помощью этого псевдокласса, ваш браузер, вероятно, имеет значение по умолчанию только для color и column-rule-color . Таким образом, если вы хотите изменить другие свойства, вам нужно дать им базовое значение вне селектора :visited visit.

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 < / * Укажите непрозрачные значения по умолчанию для определенных свойств, позволяя им стилизовать с состоянием: посещенное * / background-color: white; border: 1px solid white; > a:visited < background-color: yellow; border-color: hotpink; color: hotpink; >

Result

Specifications

Источник

HTML Links — Different Colors

An HTML link is displayed in a different color depending on whether it has been visited, is unvisited, or is active.

HTML Link Colors

By default, a link will appear like this (in all browsers):

• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red

You can change the link state colors, by using CSS:

Example

Here, an unvisited link will be green with no underline. A visited link will be pink with no underline. An active link will be yellow and underlined. In addition, when mousing over a link (a:hover) it will become red and underlined:

a:visited color: pink;
background-color: transparent;
text-decoration: none;
>

a:hover color: red;
background-color: transparent;
text-decoration: underline;
>

a:active color: yellow;
background-color: transparent;
text-decoration: underline;
>

Link Buttons

A link can also be styled as a button, by using CSS:

Example

To learn more about CSS, go to our CSS Tutorial.

HTML Link Tags

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник