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

Categories

HOME
httparty
checkstyle
codenvy
ggplot2
pagination
google-spreadsheet
hessian
vxml
web-hosting
polling
spin
jquery-ui-sortable
minecraft-forge
java.util.logging
automatic-ref-counting
radgridview
comsol
dynatrace
atlassian
internationalization
replication
windows-xp
ksh
imagemap
href
roslyn
resourcebundle
direct3d11
mount
interbase
syntax-highlighting
firebase-analytics
user-defined-functions
hard-drive
jpad
nohup
z-notation
sim-card
apns-php
verifiable-c
linq-to-objects
apriori
tcc
knime
importerror
ntvs
globalize
netbeans6.8
dbcontext
launchctl
identification
insight
bluez
remedy
page-replacement
arules
monkey
vibrate
swingworker
javafx-css
cvxpy
gets
model-associations
udpclient
hadoop-partitioning
httpruntime.cache
directdraw
iokit
fuelcms
binomial-theorem
dock
amiga
cwrsync
canvg
cosine-similarity
rickshaw
lambda-architecture
functional-java
menubar
conditionaltagsupport
ora-06550
unit-of-work
kaleidoscope
scmmanager
frameworkelementfactory
uimanageddocument
subproject
workflow-services
winmain
rmdir
presentation-layer
commerceserver2007
isapi-extension
zend-rest
django-piston
complex-event-processing
business-model

Resources

Encrypt Message