Login
  • CSS
  • CSS Pseudo-class

CSS Pseudo-class

CSS Pseudo-classes

 

What are 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

Mouse Over Me

 

Syntax

The syntax of pseudo-classes:

selector:pseudo-class {
  property: value;
}

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

a.highlight:hover {
  color: #ff0000;
}

Hover on

 

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

element:

 

Example

div:hover {
  background-color: blue;
}

Simple Tooltip Hover

Hover over a

element to show a

element (like a tooltip):

Hover over me to show the

element.

Tada! Here I am!

Example

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

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

p:first-child {
  color: blue;
}

Match the first element in all

elements

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

elements:

Example

p i:first-child {
  color: blue;
}

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

p:first-child i {
  color: blue;
}

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


This example demonstrates how to add other styles to hyperlinks.


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

Test Yourself With Exercises

Exercise:

Set the background-color to red, when you mouse over a link.

 

All CSS Pseudo Classes

Selector Example Example description
  a:active Selects the active link
  input:checked Selects every checked element
  input:disabled Selects every disabled element
  p:empty Selects every

element that has no children
  input:enabled Selects every enabled element
  p:first-child Selects every

elements that is the first child of its parent
  p:first-of-type Selects every

element that is the first

element of its parent
  input:focus Selects the element that has focus
  a:hover Selects links on mouse over
  input:in-range Selects elements with a value within a specified range
  input:invalid Selects all elements with an invalid value
  p:lang(it) Selects every

element with a lang attribute value starting with "it"
  p:last-child Selects every

elements that is the last child of its parent
  p:last-of-type Selects every

element that is the last

element of its parent
  a:link Selects all unvisited links
  :not(p) Selects every element that is not a

element
  p:nth-child(2) Selects every

element that is the second child of its parent
  p:nth-last-child(2) Selects every

element that is the second child of its parent, counting from the last child
  p:nth-last-of-type(2) Selects every

element that is the second

element of its parent, counting from the last child
  p:nth-of-type(2) Selects every

element that is the second

element of its parent
  p:only-of-type Selects every

element that is the only

element of its parent
  p:only-child Selects every

element that is the only child of its parent
  input:optional Selects elements with no "required" attribute
  input:out-of-range Selects elements with a value outside a specified range
  input:read-only Selects elements with a "readonly" attribute specified
  input:read-write Selects elements with no "readonly" attribute
  input:required Selects elements with a "required" attribute specified
  root Selects the document's root element
  #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
  input:valid Selects all elements with a valid value
  a:visited Selects all visited links

All CSS Pseudo Elements

Selector Example Example description
  p::after Insert content after every

element
  p::before Insert content before every

element
  p::first-letter Selects the first letter of every

element
  p::first-line Selects the first line of every

element
  ::marker Selects the markers of list items
  p::selection Selects the portion of an element that is selected by a user

 
CSS Pseudo-class
Login
ADS CODE