We have a generic css style defined like this:
.table-container table tr:hover td {
background-color: #eaeaea;
}
This is used for all tables across application. However, I have to override it for a particular table on specific rows. I am attaching new css style at each <tr class=‘edited’> with this definition:
.edited {
background-color: #f8cbad;
}
But, when hovering over the row, it is using generic hover style, and I am not able to override it.
Can you please suggest how to override it so that I see same background color as edited style even on hovering the row?
I tried with following and tweaking, but didn’t work.
.table-container table tr:hover .edited td {
background-color: #eaeaea;
}
Ok, I have figured out after some trial. Answering to help others:
Defining hover for the specific style class did the trick:
.edited {
background-color: #f8cbad;
}
.edited:hover {
background-color: #f8cbad !important;
}
Related
First time here, and was hoping that someone would be able to help with an issue I’ve been dealing with. I’ve had specific details not to modify the original CSS, and instead told to create a new CSS that contains specific overrides for the original CSS. How would I go about doing that efficiently?
Any help would be appreciated. Thanks!
css are applied is a given order. Here are few examples
Case 1: overide default color for a div
div#foo {
color: blue; /* This one is applied to <div id="foo"></div> */
}
div {
color: red;
}
Case 2: css which is loaded at last will be on top.
div {
color: red;
}
div {
color: blue; /* This one is applied to <div id="foo"></div> */
}
case 3: important takes first place
div {
color: red !important;
}
case 4: multiple important
div {
color: red !important;
}
div {
color: yellow !important; /* This will be applied */
}
Include your css file after original css file. Add your custom class in html and use it to override original code.
Don't use !important property it create issue in responsive style.
I am trying to remove the background color of a tr element on a table with Material Design Lite.
I'm using Sass.
This is the code causing the effect:
.mdl-data-table tbody tr:hover {
background-color: #FFFFFF !important;
}
This is the code I'm using with no positive results:
.mdl-data-table tbody tr:hover{
tr:hover .no-hover{
background-color: #FFFFFF !important;
}
}
What am I missing to achieve the behavior I require?
You're targetting:
tr:hover .no-hover {
background-color: #FFFFFF !important;
}
That's looking for a table row with a child with the class no-hover (presumably the table cell). The background colour is actually being applied to the row itself.
I believe what you're looking for instead is:
tr.no-hover:hover {
background-color: #FFFFFF !important;
}
Which targets a row with the class no-hover.
Hope this helps!
I had the same problem and solved a little bit different with same result:
.no-hover tbody tr:hover {
background-color: #FFFFFF !important;
}
and put the class 'no-hover' in the table tag.
I have the following situation :
.table_green {
background: #B4E391;
}
.data_table tbody tr:hover {
background-color: #fff;
cursor: pointer;
}
.unclickable_table tbody tr:hover {
background-color: inherit;
cursor: default;
}
Now the tr originaly is green color, and i want when a table has class='data_table unclickable_table' set, that on hover on a tr that has table_green class, the background-color property won't change and stay green, but inherit doesn't seem to work
Example html :
<table class='data_table unclickable_table'>
<tbody>
<tr class='table_green'>
<td>Untill it goes Click!</td>
</tr>
</tbody></table>
Or this fiddle : http://jsfiddle.net/nyDNc/1/
Any help?
This is a solution, hopefully one that will work within your structure cause it depends on how you're styling your table elements.
inherit won't work because it is inheriting from the table which has a background of none. Instead you can have the tr set and change the colour of the td on hover, so that it has a context to inherit from.
See the working example here on JSFiddle.
The CSS is:
.table_green {
background: #B4E391;
}
.data_table tbody tr:hover td {
background-color: #fff;
cursor: pointer;
}
.unclickable_table.data_table tbody tr:hover td {
background-color: inherit;
cursor: default;
}
Why do you add a second class in order to override the effect the first class has. Why don't you just remove the 'data_table' classes on the rows you don't want the effect on.
i'm not sure i understand You very well, but
DEMO IS HERE:
http://jsfiddle.net/nyDNc/1/
I have this page http://www.beatinganger.com/guildford/course-dates
On the thead of the table I have several headings that are links, that are the color of the main container css (red), however I can't seem to change it to white as the main containers css is automatically chosen, disregarding the css I have created.
This is the css I have. thead a color is showing as #9D2B2A and not white.
#left_container a {
text-decoration: none;
color: #9D2B2A;
}
thead a {
color: white;
}
th a {
color: white;
}
You're suffering from specificity - http://eriestuff.blogspot.com/2007/11/css-cascade-what-defenition-takes.html
The id of #left_container is more specific than th or thead, so it takes priority.
Use #left_container th a or #left_container thead a to see your styles take effect.
Because you have an id selector on the container it is more specific than thead a which is a more general selector it is using the container one. Try putting the #left_container before thead a and th a.
#left_container a {
text-decoration: none;
color: #9D2B2A;
}
#left_container thead a {
color: white;
}
#left_container th a {
color: white;
}
id selector + type selector is more specific than two type selectors, so that rule wins in the cascade chain.
You need to make your selectors more specific (or use the one-shot sledgehammer of an abomination that is !important).
It's because that "#left_container a" have a higher priority
you can see css-priority-order-tips-tricks
I use the following CSS to apply a top border to the last-child row of various tables:
.mytabs tr:last-child {
border-top:1px solid #000;
font-weight:bold;}
Now what I need to do is to override this style for one particular table. How can I override this style in one specific instance? Thanks.
You can wrap it a custom div id name example <div id="customFormat"></div> or give the table an id <table id="customFormat"></table>
In CSS, you can specify the custom styling just for that 1 table.
#customFormat {
border-bottom: 1px solid rgba(69,54,37,0.2);
}
Give a class specific table or to the last row of specific table and apply style
table.<specific_table> tr:last-child {
...your style
}
or
.mytabs tr.<specific_row> {
..your style}