How to overwrite css in responsive site

[newcoder1010]

Hi,

I created a views table page. I like to have different background colors for devices which are minimum 993px.

I wrote this css. It works for even rows but not for odd rows.

@media (min-width: 993px){

.view-xpress .odd{ background-color: #DCDCDC;}
.view-xpress .even{ background-color: #F5F5F5;}

Then, I inspected in chrome and I see this code overwriting the odd rows:

media = 'all'
.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
background-color: black;}
}

How can i force to change to my code so i get my colors?

Thanks.

[Ingolme]

The most specific selector is the ony that gets chosen.

 

That selector is so specific that the only way to override it would be to add an ID attribute to the element. You probably should change the selector to not be so specific.

 

The direct child selector is more specific than the descendant selector, the more parts a selector has the more specific it is.

[newcoder1010]

I do appreciate your time but I am sorry that I could not follow you. I use a tool for UI not able to give any selector if. Instead, can I fix using css?

[dsonesuk]

You don't need id, from what i can see you are targetting <tr> elements, while bootstrap targets <td> element so it will have higher precedence over your code, if you target the same you should be able to overrule bootstrap

 

.views-xpress.table-striped .odd td{ background-color: #DCDCDC;}

Edited February 14, 2016 by dsonesuk

[newcoder1010]

I added this code and it did not work:

.view-xpress-vehicles-inventory-in-atlantic-city-nj.table-striped .odd td{ background-color: #DCDCDC;}

I guess this is overwriting by this:

.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {    background-color: black;}

Then, I simply copied this code and just changed the color and that also did not work as below:

 

.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {    background-color: red;}

[dsonesuk]

reasons will not work

1).view-xpress-vehicles-inventory-in-atlantic-city-nj.table-striped .odd td{ background-color: #DCDCDC;}

 

no such element exists with classes 'view-xpress-vehicles-inventory-in-atlantic-city-nj' and 'table-striped'

 

2, 3 does not exist anymore so can't comment

 

Edit: all css NOT in media queries that are usually for default styling should be placed ABOVE ALL media queries.

Edited February 15, 2016 by dsonesuk