Css class for link

CSS Pseudo-classes

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus

Syntax

The syntax of pseudo-classes:

Anchor Pseudo-classes

Links can be displayed in different ways:

Example

/* unvisited link */
a:link color: #FF0000;
>

/* visited link */
a:visited color: #00FF00;
>

/* mouse over link */
a:hover color: #FF00FF;
>

/* selected link */
a:active color: #0000FF;
>

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.

Pseudo-classes and HTML Classes

Pseudo-classes can be combined with HTML classes:

When you hover over the link in the example, it will change color:

Example

Hover on

An example of using the :hover pseudo-class on a element:

Example

Simple Tooltip Hover

Hover over a element to show a

element (like a tooltip):

Hover over me to show the

element.

Example

p <
display: none;
background-color: yellow;
padding: 20px;
>

CSS — The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of another element.

Match the first

element

In the following example, the selector matches any

element that is the first child of any element:

Example

Match the first element in all

elements

In the following example, the selector matches the first element in all

elements:

Example

Match all elements in all first child

elements

In the following example, the selector matches all elements in

elements that are the first child of another element:

Example

CSS — The :lang Pseudo-class

The :lang pseudo-class allows you to define special rules for different languages.

In the example below, :lang defines the quotation marks for elements with lang=»no»:

Example

Some text A quote in a paragraph Some text.

More Examples

Add different styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.

Use of :focus
This example demonstrates how to use the :focus pseudo-class.

All CSS Pseudo Classes

Selector	Example	Example description
:active	a:active	Selects the active link
:checked	input:checked	Selects every checked element
:disabled	input:disabled	Selects every disabled element
:empty	p:empty	Selects every element that has no children
:enabled	input:enabled	Selects every enabled element
:first-child	p:first-child	Selects every elements that is the first child of its parent
:first-of-type	p:first-of-type	Selects every element that is the first element of its parent
:focus	input:focus	Selects the element that has focus
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects elements with a value within a specified range
:invalid	input:invalid	Selects all elements with an invalid value
:lang(language)	p:lang(it)	Selects every element with a lang attribute value starting with «it»
:last-child	p:last-child	Selects every elements that is the last child of its parent
:last-of-type	p:last-of-type	Selects every element that is the last element of its parent
:link	a:link	Selects all unvisited links
:not(selector)	:not(p)	Selects every element that is not a element
:nth-child(n)	p:nth-child(2)	Selects every element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every element that is the second element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every element that is the second element of its parent
:only-of-type	p:only-of-type	Selects every element that is the only element of its parent
:only-child	p:only-child	Selects every element that is the only child of its parent
:optional	input:optional	Selects elements with no «required» attribute
:out-of-range	input:out-of-range	Selects elements with a value outside a specified range
:read-only	input:read-only	Selects elements with a «readonly» attribute specified
:read-write	input:read-write	Selects elements with no «readonly» attribute
:required	input:required	Selects elements with a «required» attribute specified
:root	root	Selects the document’s root element
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all elements with a valid value
:visited	a:visited	Selects all visited links

All CSS Pseudo Elements

Selector	Example	Example description
::after	p::after	Insert content after every element
::before	p::before	Insert content before every element
::first-letter	p::first-letter	Selects the first letter of every element
::first-line	p::first-line	Selects the first line of every element
::marker	::marker	Selects the markers of list items
::selection	p::selection	Selects the portion of an element that is selected by a user

Источник

:link

The :link CSS pseudo-class represents an element that has not yet been visited. It matches every unvisited or element that has an href attribute.

Try it

Styles defined by the :link and :visited 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 :link rule before all other link-related rules, as defined by the LVHA-order: :link — :visited — :hover — :active . The :visited pseudo-class and :link pseudo-class are mutually exclusive.

Note: Use :any-link to select an element independent of whether it has been visited or not.

Syntax

Examples

By default, most browsers apply a special color value to visited links. Thus, the links in this example will probably have special font colors only before you visit them. (After that, you’ll need to clear your browser history to see them again.) However, the background-color values are likely to remain, as most browsers do not set that property on visited links by default.

HTML

a href="#ordinary-target">This is an ordinary link.a>br /> a href="">You've already visited this link.a>br /> a>Placeholder link (won't get styled)a> 

CSS

a:link  background-color: gold; color: green; > 

Источник

What You Should Know About CSS Link Pseudo-classes?

:hover is the pseudo-class appended to the a selector. So when a user hovers over the a tag, its font color will change to red.

Syntax

selector:pseudo-class  property: value; > 

There should be no space between the selector and the pseudo-class. It won’t work.
You can chain together as many pseudo-classes as you want

What CSS link Pseudo-classes do

:link : Selects links that have not been visited.

:visited : Selects links that have not been visited.

:hover : Selects links that have the mouse pointer over them

:active : A state where the user clicks on a link

:focus : When a user focuses on a link after clicking it.

The styles that can be applied to the :visited pseudo-class is limited due to the browser’s support for privacy. Sometimes disclosing links a user has visited can be insecure.

Chaining Pseudo-classes

Like most CSS classes, you can also chain link pseudo-classes. You can do this when you want a link in more than one state to behave a certain way.

For instance, you want to change the opacity to .9 of a visited link when a mouse pointer hovers on it.

a:visited:hover  opacity: 0.9; > // but an unvisited link to 0.7 a:link:hover  opacity: 0.7 > 

Order of CSS Link Pseudo-classes

If you know a bit of CSS, you probably know about specificity.

CSS specificity is how browsers determine what styles will be applied to an element i.e it determines the most relevant styles.

When two selectors match in specificity, the styles appearing last in the CSS stylesheet are applied.

a:hover color:red; > a:visited color:blue; > 

Maybe you would expect the visited link to change color to red on hover, but that won’t happen.

Because visited comes after hover, it will override the hover pseudo-class.

The correct way of writing the above code would be:

a:visited color:blue; > a:hover color:red; > 

The order goes from :link , :visited , :hover , :focus to :active

Always use both :focus and :hover to make it more accessible since not all users hover on the links.

That’s it! I hope you learned something new!

Important Links

Источник