I have this CSS code for my tables:
.table-hover>tbody>tr:hover {
background-color: #f36f25;
color:#FFFFFF;
}
i want to be able to make some rows not use this code on hover.
How can i make an exception for certain rows in my tables?
Give them something to identify them with (e.g. a class attribute), then use the negation pseudo-class selector (:not()) to filter them out:
<tr></tr>
<tr class="notThisOne"></tr>
<tr></tr>
.table-hover>tbody>tr:not(.notThisOne):hover {
...
}
That is possible using the :not() selector:
http://www.w3schools.com/cssref/sel_not.asp
You can for example assign class noHover to the elements you want to skip and exclude the class from your css:
.table-hover>tbody>tr:hover:not(.noHover) {
background-color: #f36f25;
color:#FFFFFF;
}
you can create a css for the row you don't want to affect
like
<table>
<tr><td class="test">1</td><td>a</td><tr>
<tr><td>2</td><td>b</td><tr>
<tr><td class="test">3</td><td>c</td><tr>
</table>
and add your css
.test{
background: blue;
}
This is basic but you can then make your own test
Related
I might be missing something really obvious, however consider the following code (tested in Edge and Chrome):
<head>
<style>
.table td { display:table-cell; }
.hide { display: none; }
</style>
</head>
<body>
<table class="table">
<tr>
<td class="hide">This is supposed to be hidden</td>
</tr>
</table>
</body>
Here is a JSFiddle demo as well.
Why is the <td> child ignoring the display:none?
Now, I know that, for example, removing the .table class or in-lining <td style="display:none"> will get me the desired outcome (hiding the cell).
I'm interested in understanding the logic of this behivour.
Why is the child ignoring the display:none?
Because .table td is more specific as .hide. You ran into a concept called css specifitiy.
Take a look here: https://specificity.keegan.st
The actual reason is,
You can't add both the display:table-cell; and display: none; to the same DOM property.
In this case, you're giving two different values for the same property where CSS gives the importance to the display:table-cell;
Check out the another answer given here which speaks about 'CSS Specificity'.
Two ways to overcome this issue.
One is adding the !important tag for the style which you want to apply that is a bad practice.
Another solution is adding visibility: hidden which will hide the element from the view.
It's because .table td { display:table-cell; } is the closest css selector to the td than .hide { display: none; } so you can solve this by adding td.hide { display:none; }
I have the following HTML ...
#searchResults td {
padding: 1px;
word-break: break-word;
}
.noBreaks {
word-break: normal;
}
<td class="noBreaks" align="center">MYWORD</td>
HOwever it seems like my "noBreaks" class is getting canceled out by the "#searchResults td" class. I would like the "noBreaks" class to take precendence (that is, have its rules respected instead of the other class). How can I make that class be used instead of the "searchResults td"?
use #searchResults .noBreaks. An ID with a tag name in CSS is creating higher specificity than a class name alone. Here is some documentation on CSS specificity https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
When you refer to an element in CSS, the more parent elements you name, the greater the specificity. It's not necessarily that you have an id overriding a class; although that would be true if we were talking about the same element.
Given:
<div id="searchResults">
<table>
<tr>
<td class="noBreaks" align="center">MYWORD</td>
</tr>
</table>
</div>
This CSS will yield blue text:
#searchResults {
color: red;
}
.noBreaks {
color: blue;
}
This CSS will yield red text:
#searchResults td {
color: red;
}
.noBreaks {
color: blue;
}
So you can see here that the level of specificity is defined by how many parent selectors you use in your CSS rule, not necessarily their type (class vs. id).
<table>
<tr class="here"><td><input type="text" readonly=readonly></td></tr>
<tr class="here"><td><input type="text" readonly=readonly></td></tr>
<tr class="here"><td><input type="text" ></td></tr>
</table>
td {
padding: 15px;
margin: 10px;
}
.here {
background-color: red;
}
http://jsfiddle.net/dZYEM/
How can i modify class .here that this working where child input has attribute readonly? I dont want modify html.
EDIT:
now i have: jsfiddle.net/dZYEM/2/
i would like receive: http://jsfiddle.net/dZYEM/3/
but without use style. I want receive this only with css.
There is no pure CSS way to do this as CSS does not have a has or contains selector.
But this can be done using one line of jQuery. And it's really fast.
$("tr.here:has(input[readonly='readonly'])").css('background', 'red');
Here is a working jsFiddle to try it - http://jsfiddle.net/T7hnR/2/
Hey you have two option
first is if your tr is last than apply this css
tr:last-child{
background:none;
}
Second is if your tr number is 3 than used to it.
tr:nth-of-type(3){
background:none;
}
Like here : http://jsfiddle.net/dZYEM/10/
CSS:
tr:nth-child(3n) {
background: none !important;
}
One could edit the inner element by makiung use of CSS2 selectors
E[foo="warning"] Matches any E element whose "foo" attribute value is exactly equal to "warning".
But this will not allow you to select the outer parent element.
Under either CSS2 or CSS3 this does not exist, and you would have to do it with the solutions provided with JavaScript/jQuery.
I have an HTML document where I have two different tables. One is class Alpha and one is class Beta. I want to assign this css to class Beta only...
td
{
border-style:solid;
border-top:thick double #ff0000;
}
I can not figure out how to assign this only to Beta. Does anyone know how?
Just apply the .beta class selector to the entire table and change your CSS code to apply a rule only to td decedents of .beta like this:
<table class="beta">
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
.beta td {
border-style:solid;
border-top:thick double #ff0000;
}
If you need to apply the rule to multiple elements within .beta simply add an additional selector like this:
.beta td,
.beta th {
border-style:solid;
border-top:thick double #ff0000;
}
Qapla'!
CSS lets you get specific with what elements rules are to be applied to. Just add this rule to the table.Beta td cell declaration and you're done.
table.Beta td
{
border-style:solid;
border-top:thick double #ff0000;
}
Hi guys I have a table like that?
<table>
<colgroup>
<col class="selected">
<col>
</colgroup>
<tbody>
<tr>
<td>lorem</td>
<td>lorem</td>
</tr>
</tbody>
</table>
and my styles are:
col.selected {
background-color: #f3f3f3; /*for selected column*/
}
table tbody tr:nth-of-type(2n+2){
background-color:#fafafa; /*zebra effect*/
}
all works great however the zerba style owerites col selection style. Any ideas how to avoid that so the selected column will be using style from col rather than nth child ?
The problem is that the selector for the zebra background has a higher specificity than the col selector. Either give the col selector a higher specificity, or give the tr selector a lower one (or both). If they're equal, order of rules in your CSS matters.
table colgroup col.selected {
background-color: #f3f3f3; /*for selected column*/
} /* specificity: 13 */
table tr:nth-of-type(2n+2){
background-color:#fafafa; /*zebra effect*/
} /* specificity: 12, will be overridden */
As far as I know, you can't. The best work-around may to be dynamically render some CSS that highlights the correct column. To highlight the second column of a table, for example, you could use:
table tbody tr td:nth-child(2) {
background-color:red;
}
Example here:
http://jsfiddle.net/ChrisPebble/tbLrv/
Your code looks fine other than your col in the html doesn't have a selected class applied. Could this be your problem on the actual page (I relise you've only posted a code sample).