Why does sometimes the pseudo class is a:active and sometimes a.active?

I see that in some templates the a:active pseudoclass is written a.active (with a Dot instead of Colon... Is it a class? Why would someone make a pseudocalls a class?... Is it really a good-practice? I'm sorry if this question is too simple to you, it's just the literature I read didn't give answer for that specific question I know have... Thanks,

Solution

a.active is not a pseudoclass. It's just a class active applied to the element. Someone might add the class when some element is active, and it doesn't have to be analog with the :active pseudoclass.

Active is such a common term that it may mean anything. It doesn't have to be related at all to a link being in an 'active' state.

In some cases they would be related, but someone may add a class because the pseudoclass isn't fit for the purpose.

For instance, one might want to show something (like a hint) when an element is hovered, but not hide it immediately when it is unhovered. So to do that, one can add a class when the element is hovered, and set a timer to remove it when the element is unhovered so there is a small delay.

The reason why you won't find this in literature is because they are essentially unrelated.

As requested, I've added a little snippet that shows the simplicity of the pseudoclass and the flexibility of adding your own classes.

$(function(){
  // NONJS: Set a class from Javascript, so you can add different styling based on having JS or not.
  $('body').removeClass('nonjs').addClass('js');
  
  // The actual hover code for delayed hovering.
  $('.text.delayed').hover(
    
    // When hovered, add the class.
    function (){ $(this).addClass('hovered'); },
    
    // When unhovered, remove the class after a little time.
    function (){ 
       var element = this; 
       setTimeout(function(){
           $(element).removeClass('hovered');
         }, 2000);
    }
    
  );
});

.text {
  position: relative;
}

.hint {
  display: none;
  position: absolute;
  background-color: yellow;
  top: 10px;
  left: 10px;
}

/* Simple hints are just shown on hover, hidden when unhovered. */
.simple:hover .hint,
/* delayed hints are shown as long as they have the hovered class. */
.js .delayed.hovered .hint,
/* NONJS: Fallback for non-javascript situation, make delayed hint behave like simple hint using pure CSS. */
.nonjs .delayed:hover .hint
{
  display: inline-block;
}

<body class='nonjs'>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="text simple">Simple. Hover for more information
  <div class="hint">This is a simple hint which disappears immediately when unhovered.</div>
</div>

<div class="text delayed">Delayed. Hover for more information
  <div class="hint">This is a delayed hint which will remain visible for 2 seconds and is then hidden using Javascript.</div>
</div>
  
</body>