CODEWITHSUNDEEP
cssasp.net-mvchtml.actionlink
PrimeTSS
PrimeTSS

Reputation: 2713

mvc html.actionlink css class

Cant seem to get a class to over write the inherited styles for a:link

@Html.ActionLink("Back to List", "Index", null, new { @class = "htmlactionlink" })

CSS

a:link, a:visited,
a:active, a:hover 
{
    color: #333;
}

.htmlactionlink {
    color: red;
}

Doesn't effect the style of the element?

If I apply a inline style, it works.

Upvotes: 1

Views: 3907

Answers (2)

Radim Köhler
Radim Köhler

Reputation: 123861

The answer is in understanding the CSS: 6.4.3 Calculating a selector's specificity. Small Extract

A selector's specificity is calculated as follows:

  1. count 1 if the declaration is from is a 'style' attribute ..
  2. count the number of ID attributes in the selector (= b)
  3. count the number of other attributes and pseudo-classes in the selector (= c)
  4. count the number of element names and pseudo-elements in the selector (= d)

Other words:

  1. inline declaration style=""
  2. #myId {}
  3. .htmlactionlink {}
  4. a {}

The point 3. says, that the same value for precedense is applied to class and pseudo-class (see more in w3schools.com)

It means, that calculation for

a:link is { a=0, b=0, c=1, d=1}

while 

.htmlactionlink is { a=0, b=0, c=1, d=0}

And that's why the a:link statement takes the precedence, because it takes 1 point for class and one for element name.

NOTE:

from my perspective the most correct solution is the

.htmlactionlink:link, .htmlactionlink:visited ... {
    color: red;
}

In that case, we do get {c=2, d=0}, we do not count on the order as with a simple A.htmlactionlink {c=1, d=1}

Upvotes: 3

AliRıza Adıyahşi
AliRıza Adıyahşi

Reputation: 15866

try

a:link, a:visited,
a:active, a:hover 
{
    color: #333;
}

a.htmlactionlink 
{
    color: red;
}

DEMO

Upvotes: 0

Related Questions