welcome to tutorialfamily

css pseudo class

pseudo class define special state of an element.

Visited state, unvisited state, hover state, active state


pseudo class

  • visited state
  • unvisited state
  • hover state
  • active state
  • first child
  • last child

css states


						        
<!DOCTYPE html>
<html>
<head>
   <title>css tutorial</title>
<style>
a{ 
   font-size: 20px;
   margin: 10px;
}
/* unvisited link */
a:link {
  color: #ff0000;
}
/* visited link */
a:visited {
  color: green;
}
/* mouse over link */
a:hover {
  color: pink;
}
/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>
   <a href="#">my car</a>
</body>
</html>


Run

first child & last child


						        
<!DOCTYPE html>
<html>
<head>
   <title>css tutorial</title>
<style>
/* first child */
p:first-child {
  color: #ff0000;
}
/* last child */
p:last-child {
  color: #ff0000;
}
</style>
</head>
<body>
  <div>
     <p>my car</p>
     <p>my car</p>
     <p>my car</p>
     <p>my car</p>
  </div>
</body>
</html>


Run

Our Content