[RESOLVED]How to apply css class to gridview selected row

I have this style as a test on my aspx page

    background-color: green;


Then I have a gridview defined like this

                                    <asp:GridView ID="gvShop" runat="server" CssClass="table table-striped table-bordered table-condensed" AutoGenerateColumns="False" DataKeyNames="ItemID" DataSourceID="SqlDataSource1">
                                            <asp:BoundField DataField="ItemName" HeaderText="Membership" SortExpression="ItemName" />
                                            <asp:BoundField DataField="ItemPrice" DataFormatString="{0:C}" HeaderText="ItemPrice" SortExpression="ItemPrice" />

<SelectedRowStyle CssClass="selectedRowStyle" /> </asp:GridView>

Notice the SelectedRowStyle asks for the css style.

The first time I tried it I was delighted with such a simple solution. Then I found that it only works on alternate rows!

So is there a way to have this work on any row the user selects?

I know I could just set the background color in the SelectedRowStyle element of the gridview but that would defeat my purpose of having all styling entirely controlled by css that I can put into one file.

EDIT: Actually I just tried it with SelectedRowStyle and it still only works on alternate rows. What gives?

Are you sure that your ‘selectedRowStyle’ isn’t actually conflicting with your Alternating Row Styles (assumingly being applied by your table-striped CSS class)? You might try using the Developer Tools (F12) within your browser and inspecting one of your
"selected" rows to see all what styles are being applied to the elements.

Any additional code that you could provide (either markup or your actual CSS styles) might be useful.

Thanks for the tip. When I turned off bootstrap.css it worked fine. Doesn’t look too good though.

Here’s a section of that file I think includes the relevant classes

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #dddddd;
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #dddddd;
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
.table > tbody + tbody {
  border-top: 2px solid #dddddd;
.table .table {
  background-color: #ffffff;
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
  padding: 5px;
.table-bordered {
  border: 1px solid #dddddd;
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #dddddd;
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: #f5f5f5;
table col[class*="col-"] {
  position: static;
  float: none;
  display: table-column;
table td[class*="col-"],
table th[class*="col-"] {
  position: static;
  float: none;
  display: table-cell;

CSS issues like this can be tricky and this might actually be the result of some conflicting styles (which would explain why Bootstrap might be "fighting" with your existing code). You might want to tinker around with the order that you are loading
these particular CSS references as precendence is given to those that appear later.

For instance, if you have all of your styles within a file called "Site.css" and you load it AFTER "Bootstrap.css", it will override any styles that were contained in Bootstrap that target the same elements. Likewise, if you reversed these, Bootstrap would
override properties of your "Site.css" file.

If you are planning on using Bootstrap, I would let it handle the styling and just override some properties that you needed. I couldn’t recommend using the Developer Tools (F12) enough for situations like this in your browser. Using a browser like Google
Chrome, you would simply need to right-click on a specific element in your page and choose "Inspect Element" to see all of the styles that are being applied to it (and you can change them in real time).

Additionally, you might try making your "selected" style more specific to ensure it is targeted properly :

/* Ensure that any elements with the "selectedRowStyle" beneath the "#gvShop" element are green */
#gvShop .selectedRowStyle
    background: green;

or if you didn’t want to use an ID, you could apply all of your classes :

/* Ensure that any elements with the "selectedRowStyle" beneath the your table */
.table.table-striped.table-bordered.table-condensed .selectedRowStyle
    background: green;

The solution was to keep tinkering with the developer tools.

I did not spot the exact thing that was causing it but saved some time by swapping out the particular bootstrap theme for another that was very similar that didn’t cause the same problem.

Leave a Reply