How to override the default css class using c#

Question

I am developing a page where a list of people are sorted randomly. The page consists of a series of gridviews containing names with a checkbox. When i click on the checkbox and click submit button, the particular row should be colored. My issue is that I am unable to override the css of the gridviews.

This is the gridview css:

.GridCss
{
    margin: 0px;
    padding: 0px;
    width: 260px;
    height:700px;
    box-shadow: 10px 10px 5px #888888;
    border: 1px solid #ffffff;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left-radius: 0px;
    border-bottom-left-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    -webkit-border-bottom-right-radius: 0px;
    border-bottom-right-radius: 0px;
    -moz-border-radius-topright: 0px;
    -webkit-border-top-right-radius: 0px;
    border-top-right-radius: 0px;
    -moz-border-radius-topleft: 0px;
    -webkit-border-top-left-radius: 0px;
    border-top-left-radius: 0px;
}
.GridCss table
{
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
.GridCss tr:last-child td:last-child
{
    -moz-border-radius-bottomright: 0px;
    -webkit-border-bottom-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.GridCss table tr:first-child td:first-child
{
    -moz-border-radius-topleft: 0px;
    -webkit-border-top-left-radius: 0px;
    border-top-left-radius: 0px;
}
.GridCss table tr:first-child td:last-child
{
    -moz-border-radius-topright: 0px;
    -webkit-border-top-right-radius: 0px;
    border-top-right-radius: 0px;
}
.GridCss tr:last-child td:first-child
{
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
.GridCss tr:hover td
{
    background-color: #e5e5e5;
}
.GridCss th
{
    vertical-align: middle;
    background: -o-linear-gradient(bottom, #ffffff 5%, #e5e5e5 100%);
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #e5e5e5) );
    background: -moz-linear-gradient( center top, #ffffff 5%, #e5e5e5 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#e5e5e5");
    background: -o-linear-gradient(top,#ffffff,e5e5e5);
    background-color: #ffffff;
    border: 1px solid #ffffff;
    border-width: 0px 1px 1px 0px;
    text-align: left;
    padding: 7px;
    font-size: 14px;
    font-family: Arial;
    font-weight: normal;
    color: #000000;
}
.GridCss td
{
    vertical-align: middle;
    background: -o-linear-gradient(bottom, #ffffff 5%, #e5e5e5 100%);
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #e5e5e5) );
    background: -moz-linear-gradient( center top, #ffffff 5%, #e5e5e5 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#e5e5e5");
    background: -o-linear-gradient(top,#ffffff,e5e5e5);
    background-color: #ffffff;
    border: 1px solid #ffffff;
    border-width: 0px 1px 1px 0px;
    text-align: left;
    padding: 7px;
    font-size: 12px;
    font-family: Arial;
    font-weight: normal;
    color: #000000;
}
.GridCss tr:last-child td
{
    border-width: 0px 1px 0px 0px;
}
.GridCss tr td:last-child
{
    border-width: 0px 0px 1px 0px;
}
.GridCss tr:last-child td:last-child
{
    border-width: 0px 0px 0px 0px;
}
.GridCss tr:first-child td
{
    background: -o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );
    background: -moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2");
    background: -o-linear-gradient(top,#cccccc,b2b2b2);
    background-color: #cccccc;
    border: 0px solid #ffffff;
    text-align: center;
    border-width: 0px 0px 1px 1px;
    font-size: 14px;
    font-family: Arial;
    font-weight: bold;
    color: #000000;
}
.GridCss tr:first-child:hover td
{
    background: -o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );
    background: -moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2");
    background: -o-linear-gradient(top,#cccccc,b2b2b2);
    background-color: #cccccc;
}
.GridCss tr:first-child td:first-child
{
    border-width: 0px 0px 1px 0px;
}
.GridCss tr:first-child td:last-child
{
    border-width: 0px 0px 1px 1px;
}

I am applying css class to the selected row through c#

row.CssClass = "blue";

where blue css class is (which i created by just changing the background in .GridCss td)

.blue 
{     
vertical-align: middle;
background: -o-linear-gradient(bottom, #ffffff 5%, #e5e5e5 100%);
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8880C5), color-stop(1, #3C49AB) );
background: -moz-linear-gradient( center top, #ffffff 5%, #e5e5e5 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#e5e5e5");
background: -o-linear-gradient(top,#ffffff,e5e5e5);
background-color: #ffffff;
border: 1px solid #ffffff;
border-width: 0px 1px 1px 0px;
text-align: left;
padding: 7px;
font-size: 12px;
font-family: Arial;
font-weight: normal;
color: #FFF;
}

Button click event code:

 protected void btnSubmit_Click(object sender, EventArgs e)
        {
            GridView[] _grdArray = { GridView1, GridView2, GridView3, GridView4, GridView5 };
            foreach (GridView gridview in _grdArray)
            {
                foreach (GridViewRow row in gridview.Rows)
                {
                    if (row.RowType == DataControlRowType.DataRow)
                    {
                        CheckBox chkRow = (row.Cells[0].FindControl("chkCtrl") as CheckBox);
                        if (chkRow != null && chkRow.Checked)
                        {
                           row.CssClass = "blue";
                        }
                    }
                }
            }           
        }

But it is showing only the original style. When I check through the browser the particular row has been assigned the class blue (tr class="blue"). I even tried to assign css to individual cells in the row but no change is observed. How can I achieve that.

Answer 1

Please check the selector precedence section in https://stackoverflow.com/tags/css/info.

Your definition has less precedence that .GridCss tr, to solve this you should use at least tr.blue as:

tr.blue 
{     
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8880C5), color-stop(1, #3C49AB) );
   //same as .GridCss 
}

Furthermore I do not like to use !important as it can be very confusing in reading code or further change/refactoring.

Answer 2

or You can do it like :

add RowDataBound event to Your GridView and then

protected void gvDocsVerPrev_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        //Get data row view
        DataRowView drview = e.Row.DataItem as DataRowView;
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            CheckBox chkbox= e.Row.FindControl("chkbox") as CheckBox ;
            if (chkbox.Selected)
            {
                e.Row.CssClass = "blue";
            }
        }
    }

Answer 3

try !important in css class

.blue 
{     
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8880C5), color-stop(1, #3C49AB) ) !important;
   //same as .GridCss 
}