tutorials

:active

That's a pseudo-class, A pseudo-class is used to define a special state of an element; since it only has one colon. Like :hover :active and :focus.
Two colons represent a pseudo-element, A CSS pseudo-element is used to style specific parts of an element, it's common in websites, examples like ::before and ::after, are pseudo-elements.

A brief use of pseudo classes:

  <!DOCTYPE html>
  <html>
    <head>
      
    </head>
  
  <style>
  
   button {
  
  background-color: grey;
  width: 80px;
  transition-duration: 0.5s;
  border: none;
  
  }
  
  
  button:hover {
  
  background-color: #112233;
  width: 50px;
  transition-duration: 0.5s;
  border: none;
  
  }
  
  </style>
  <body>
  
  <button>Click me!</button>
  </body>
  </html>

A breif use of a pseudo-element:

  <!DOCTYPE html>
  <html>
    <head>
      
    </head>
  
  <style>
  
   button {
  
  background-color: grey;
  width: 80px;
  transition-duration: 0.5s;
  border: none;
  }
  
  
  button::after {
  
  content: "<>";
  color: red;
  
  }
  
  </style>
  <body>
  
  <button>Click me!</button>
  </body>
  </html>

Go back?