How do I add a hover to the following:
table.pvtTable tr th, table.pvtTable tr th
I want it added to the final "th" element.
If I do:
table.pvtTable tr th, table.pvtTable tr th:hover
everything here is applied by default.
Thanks
It will work for the last th :
table.pvtTable tr th:last-child
And the same element with :hover selector :
table.pvtTable tr th:last-child:hover
Related
So I want every table for my website to have the same bootstrap styling with
class="table table-striped table-hover "
However I don't really want to go into every table and put this in in case I want to change it in future. Is there a way for me to just set,
.table{
/*Inherit all these classes*/
}
You'd need to use LESS or SASS and make a mix-in for this. If you can't use LESS/SASS, you could overwrite .table as follows if you absolutely needed to, using something like this (pulled from BS 3.2):
/* .table-stripe styling */
.table > tbody > tr:nth-child(odd) > td,
.table > tbody > tr:nth-child(odd) > th{
background-color: #f9f9f9;
}
/* Default .table-hover behavior */
.table > tbody > tr:hover > td,
.table > tbody > tr:hover > th {
background-color: #f5f5f5;
}
/* .table-hover styling for "active".
Repeat this block for Success, Info, Warning, Danger, etc.
using your preferred colors */
.table > tbody > tr > td.active:hover,
.table > tbody > tr > th.active:hover,
.table > tbody > tr.active:hover > td,
.table > tbody > tr:hover > .active,
.table > tbody > tr.active:hover > th {
background-color: #e8e8e8;
}
You potentially could try combining all the rules from the
table table-striped table-hover
classes into one class, but you also need to capture the rulesets targeted by table table-striped table-hover child and descendant selectors also.
So in the end you will end up creating way more work for yourself.
e.g. if you look at the boostrap CSS source here - https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L255
.table {
border-collapse: collapse !important;
}
.table td,
.table th {
background-color: #fff !important;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #ddd !important;
}
}
these sub rules would also need to be rewritten.
I've shown 3 CSS rules.
If you do a search for the term .table in the bootstrap CSS there are 318 instances which would need to be resolved.
You could reduce that by compiling your own LESS or SASS, but you will still have to deal with the child and descendant issue.
Possible solution
If you have a decent text editor, that using live templates or something like emmet, just create a short cut like tab+ which the text editor expands out to table table-striped table-hover
I have a CSS provided which contains following code
table.exm_table tbody tr.odd td{
background-color:#ffffff;
}
I'm not sure what should it style. Will be background color set at the td element in following structure?
<table class="exm_table">
<tbody>
<tr class="odd">
<td>Is this an selected element?</td>
</tr>
</tbody>
</table>
EDIT:
Actually I've overlooked second part of the CSS:
table.exm_table tbody tr:nth-child(odd) td,
table.exm_table tbody tr.odd td
Which caused my confusion why code haven't been working...
Your HTML is was incorrect but otherwise the CSS will work and targets the td. Note that in your (original) example there is no table-row <tr>. You'll see it works with the corrected mark-up:
<table class="exm_table">
<tbody>
<tr class="odd">
<td>Is this an selected element?</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/8zan1jyf/
As you can see, your CSS selector does address the td - or more specifically:
any td within a tr (that has the classname 'odd') within a tbody within a table (that has the classname 'exm_table')
There's probably no need to be quite that specific ;)
UPDATE
Since you've edited your question here's some further info about the alternating row style that seems to be confusing you.
table.exm_table tbody tr:nth-child(odd) td uses the nth-child selector to get tds in alternate rows.
table.exm_table tbody tr.odd td simply selects all tds within trs that have the classname 'odd'. (It's this classname that may be confusing because it has nothing to do with odd/even in itself and could just as easily be called 'bob')
Here's a demo to help clarify: http://jsfiddle.net/8zan1jyf/8/
/* to style ALL tds */
table.exm_table tbody tr td {background-color:pink;}
/* to style EVERY-OTHER td */
table.exm_table tbody tr:nth-child(odd) td {background-color:red;}
/* to style td WHERE THE PARENT TR HAS THE CLASSNAME 'odd' (nothing to do with actual odd/even ordering) */
table.exm_table tbody tr.odd td {background-color:blue;}
/* to style td WHERE THE PARENT TR HAS THE CLASSNAME 'bob' */
table.exm_table tbody tr.bob td {background-color:green;}
your initial css targets td and sets background to white (#fff)
you can just target classes directly
.exm_table {
background-color:#ffffff;
}
.odd {
background-color:#eeeeee;
}
Look at this fiddle: http://jsfiddle.net/czz2ejfw/1
Style for my table:
td {
color: #669;
}
tbody tr:hover {
color: red;
}
The text color should be red when we hover. In fact, if you look at developer tools you see that red should be applied. But incredibly, it displays as #669. WTH?
This is consistent across Firefox, Chrome, Safari, and Opera.
It isn't more specific. It matches a different element.
td { color: #669; } overrides the default stylesheet (which is probably something like td { color: inherit; }) because author stylesheets override browser stylesheets.
If you want to match the td when the tr is hovered, then you need to mention the td in the selector (e.g. with a descendant combinator).
tbody tr:hover td {}
<tr> is getting the color:red; but there is nothing there to be styled red.
Instead you would need to do this, which applies red to all <td> cells that are children of the parent <tr>:
tbody tr:hover {
background-color: yellow;
}
tbody tr:hover td {
color: red;
}
JS Fiddle Demo
As actually already said in a comment, the td is a child of the tr, so although the background of the tr changes, if you can't see it anywhere because none of the td's are transparent you won't get anywhere. The correct solution thus is to either make the td's transparent (default) and instead style the tr's always, or use tr:hover td{} to override the styles of the td instead of styling the tr.
Update that part of your CSS to this and it will work:
tbody tr:hover {
background-color: yellow;
}
tbody tr:hover td{
color: red;
}
Red is higher priority in your version because it is specific for td the tbody tr is not that specific
I have a HTML table, with <thead> + <tbody> + <tfoot>. I need to show <tfoot> only when <tbody> has no rows. I know how to do it with JS/jQuery, but maybe there is a pure CSS solution?
Use :empty
Demo (Show tfoot when tbody has no rows)
table tbody:empty + tfoot {
display: table-footer-group;
}
table tbody + tfoot {
display: none;
color: red;
}
Hide tfoot when tbody has some content
table tbody:not(:empty) + tfoot {
display: block;
}
table tbody + tfoot {
display: none;
color: red;
}
Demo 2
Explanation:
Too many revisions, I just wanted to provide 2 selectors, first is table tbody:empty + tfoot which will select tfoot if the tbody IS EMPTY, and the second one is table tbody:not(:empty) + tfoot which will select tfoot if tbody IS NOT empty.
Note: I am using + which is an adjacent selector, so as you see, I
have tfoot element, after the tbody element, if it is before
tbody than you need to use JS or jQuery as you select reverse in
CSS. Also, make sure you use display: table-footer-group; as pointed by Mr Lister for tfoot element and not display: block;
I’m afraid it can be done with CSS only in the case that the tbody element is completely empty and does not contain even whitespace. For example,
<tbody>
</tbody>
is not empty, as it contains a linebreak (it has a text node child containing a line break). The :empty selector matches only elements that have no children at all.
If you can count on having the tbody element strictly as <tbody></tbody> when it has no rows, you can use
tbody:not(:empty) + tfoot {
display: none;
}
I'm styling a table and I'm using various first-child, nth-child and last-child declarations such as the below:
.thankYouTable tbody tr td:first-child,
.thankYouTable tbody tr td:nth-child(4),
.thankYouTable tbody tr td:nth-child(6),
.thankYouTable tbody tr td:nth-child(7),
.thankYouTable tbody tr td:nth-child(8)
{
border-right:1px solid #fff;
}
Is there a way for me to shorten this syntax? Its just out of curiosity really as I've had to do this quite a bit and it makes the stylesheet quite "messy". Whilst I can understand it, it may take others in future longer to decipher this. Is there a "best practice" for doing this kind of thing or is what I've done ok? (Realise this may be subjective so feel free to not answer this part).
For example would this not work:
.thankYouTable tbody tr td:first-child,
.thankYouTable tbody tr td:nth-child(4),(6),(7),(8)
{
border-right:1px solid #fff;
}
And I'm talking about pure CSS here, not using any kind of script.
The only way i can see you shorten it down is by using equation:
[..]
.thankYouTable tbody tr td:nth-child(4), //fourth element
.thankYouTable tbody tr td:nth-child(n+6) //every element after and including the 6th element
[..]