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

Источник

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; > 

Источник

: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

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

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!

Источник

Читайте также:  Javascript динамическое изменение страницы
Оцените статью