newcoder1010 Posted February 13, 2016 Share Posted February 13, 2016 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. Link to comment Share on other sites More sharing options...
Ingolme Posted February 13, 2016 Share Posted February 13, 2016 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. Link to comment Share on other sites More sharing options...
newcoder1010 Posted February 13, 2016 Author Share Posted February 13, 2016 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? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 14, 2016 Share Posted February 14, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
newcoder1010 Posted February 14, 2016 Author Share Posted February 14, 2016 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;} Link to comment Share on other sites More sharing options...
dsonesuk Posted February 15, 2016 Share Posted February 15, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now