CODEWITHSUNDEEP
classcss
Furkan Gözükara
Furkan Gözükara

Reputation: 23800

Can this CSS class written in shorter, better way?

Can you write this CSS class in a shorter way? Thank you.

.MessageTitle a, .MessageTitle a:visited, .MessageTitle a:active, .MessageTitle a:hover,.MessageSender a, .MessageSender a:visited, .MessageSender a:active, .MessageSender a:hover
{
    text-decoration: none;
    outline: none;
     display:block;
    vertical-align: middle;
    text-align: center;
    color: Black;
    line-height:30px;    
}

.MessageTitle a:active, .MessageTitle a:hover,.MessageSender a:active, .MessageSender a:hover
{
    text-decoration: underline;
}

Upvotes: 1

Views: 156

Answers (3)

graphicdivine
graphicdivine

Reputation: 11211

.MessageTitle a,
.MessageSender a
{   text-decoration: none;
    outline: none;
    display:block;
    vertical-align: middle;
    text-align: center;
    color: Black;
    line-height:30px;    
}

.MessageTitle a:active,
.MessageTitle a:hover,
.MessageSender a:active,
.MessageSender a:hover
{
    text-decoration: underline;
}

.MessageSender a:visited,
.MessageSender a:visited
{
    text-decoration: none;
}

You should probably also include :focus. I would also use :link.

In practice, for proper DRY brevity, simplicity and UX consistency, I would declare all these styles globally on the bare a selector, so more like this:

a:link
{   text-decoration: none;
    outline: none;
    color: Black }

a:active,
a:hover,
a:focus
{   text-decoration: underline}

a:visited
{   text-decoration: none}

.MessageTitle a,
.MessageSender a
{   
    display:block;
    vertical-align: middle;
    text-align: center;
    line-height:30px;    
}

Upvotes: 1

Seth
Seth

Reputation: 6260

You could apply a single class to the anchor so you aren't defining the same groups twice.

.messageLink, .messageLink:visited {
    color: #000;
    display:block;
    line-height:30px;
    outline: none;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
}

.messageLink:active, .messageLink:hover { text-decoration:underline; }

Upvotes: 2

Eddie
Eddie

Reputation: 700

The really short way would be to look at Less CSS. www.lesscss.org

Upvotes: 1

Related Questions