CODEWITHSUNDEEP
css
George Irimiciuc
George Irimiciuc

Reputation: 4633

Writing less code

I have this

/* unvisited link */
a.underl:link {
    color: #000000;
    text-decoration: none;
}

/* visited link */
a.underl:visited {
    color: #000000;
    text-decoration: none;
}

/* mouse over link */
a.underl:hover {
    color: #ff6213;
    text-decoration: underline;
}

/* selected link */
a.underl:active {
    color: #ff0003;
    text-decoration: underline;
}

What I want to do is define another class underl2, but the difference would be that I change only the color of the link. All the other remain unchanged. How can I do this without having to copy and paste the other things and rename them to a.underl2 ?

Upvotes: 0

Views: 69

Answers (3)

user238801
user238801

Reputation:

Adding a class like the accepted answer is one solution and probably the fastest if you don't want to change lots of your CSS but if you need .underl2 a lot I would change the CSS.

a.underl, a.underl2 {
    text-decoration: none
}

a.underl:link, a.underl:visited, a.underl2:visited {
    color: #000
}

a.underl2:link {
    color: #ccc
}

a.underl:hover, a.underl:active, a.underl2:hover, a.underl2:active {
    text-decoration: underline
}

a.underl:hover, a.underl2:hover {
    color: #ff6213
}

a.underl:active, a.underl2:active {
    color: #ff0003
}

Upvotes: 2

p1xelarchitect
p1xelarchitect

Reputation: 289

Or... you could do this:

/* unvisited link */
a.underl:link {
    color: #000000;
    text-decoration: none;
}

a.underl2:link {
    color: red;
    text-decoration: none;
}

/* visited link */
a.underl:visited, a.underl2:visited{
    color: #000000;
    text-decoration: none;
}

/* mouse over link */
a.underl:hover, a.underl2:hover{
    color: #ff6213;
    text-decoration: underline;
}

/* selected link */
a.underl:active, a.underl2:active{
    color: #ff0003;
    text-decoration: underline;
}

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074425

This is one of the (many) weaknesses of CSS: You can't say "Inherit this rule, and then change it slightly." You can in Less, Sass, and similar CSS extensions/pre-processors, but not CSS itself.

In a pure CSS environment, if there's some structural way you can identify the elements that you want to have the new class, you can define the rule with the new color underneath those rules (so it supercedes them if there's equivalent specificity). So for instance, if you want the new color on a.underl that are descendants of .foo:

.foo a.underl {
    color: theNewColor;
}

If you can't do it structurally, the closest you can come is to define the color in a new rule using a class (again underneath those rules), and add that class to the relevant elements.

Upvotes: 4

Related Questions