pseudo-class
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,
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>
Related Links
Why does sometimes the pseudo class is a:active and sometimes a.active?
Using :before to create icon including link