CODEWITHSUNDEEP
htmlcss
kaze
kaze

Reputation: 4359

Override CSS selector for some elements

I have a html-page which I would like to style (using IE9).

The following code:

<style type="text/css">
    #komponenter select,
    #komponenter input
    {
         width: 180px;
         box-sizing:content-box; 
    }

    .special_box { width: 50px; height: 150px; }
</style>

... snipp ...

<div id="col2" class="kolumn">

    @Html.LabelFor(model => Model.Verksamhetskod)
    <br />
    @Html.TextBoxFor(model => Model.Verksamhetskod)
    <br />

    @Html.Label("Lat/Long")
    @Html.TextBoxFor(m => m.LatitudTecken)
    @Html.TextBoxFor(m => m.Latitud)
    @Html.TextBoxFor(m => m.LongitudTecken)
    @Html.TextBoxFor(m => m.Longitud)
    <br />

    @Html.Label("3 Överväganden:")
    <br />
    @Html.TextBoxFor(m => m.Overvagande)
    <br />

    @Html.Label("1 Ingångsvärden:")
    <br />
    @Html.TextBoxFor(m => m.Ingangsvarde, new { @class = "special_box" })
    <br />
</div>

The html renders fine, the problem is that the .special_box width gets overridden by the css-statements above (the height works fine). I've tried putting the class first in the style section, but it did'nt make any difference.

Upvotes: 0

Views: 2244

Answers (2)

Joseph
Joseph

Reputation: 119877

the css above have a higher specificity (1-0-1) than your .specialbox (0-1-0). to raise it, you have to "be more specific":

/*here we add a few more selectors to .special_box to be more specific*/
#komponenter input.special_box (1-1-1)
//   1-0-0 for #komponenter
//   0-0-1 for input
// + 0-1-0 for .special_box
// = 1-1-1

or just override the styles you want to take effect with !important

#komponenter input.special_box{
    width: 50px !important;   /*override width*/
    height: 150px;
}

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123417

it's a matter of specificity: try this instead (assuming .special_box is an input element)

#komponenter select,
#komponenter input
{
     width: 180px;
     box-sizing:content-box; 
}

#komponenter input.special_box {
     width: 50px; height: 150px; 
}

a rule like #komponenter input has a specificity of 101 (1 id, 0 classes, 1 element)
while .special_box has a specificity of 10 (1 class, 0 elements)

see http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ for more info

Upvotes: 1

Related Questions