I need to add some custom CSS to the Angular Bootstrap UI Datepicker, which has been relatively easy so far. I've wrapped the uib-datepicker element in a div, and then use that div's id to alter this specific calendar.
HTML
<div class="modal-body confirmContent" id="calendarModal">
<uib-datepicker id="datepickerWeek" ng-model="selectedWeek" class="well well-sm" datepicker-options="datepickerWeekConfig"></uib-datepicker>
</div>
CSS
#calendarModal > .well > table thead tr th button:hover,
#calendarModal > .well > table tbody tr td button:hover,
#calendarModal > .well > table tbody tr td button.btn-info.active,
#calendarModal > .well > table tbody tr td button.btn-info.active:focus{
background-color: #155f8e;
}
However now I need to highlight an entire tr based on when the .btn-info class becomes .active:focus. I've researched the :has psuedo-class, however I don't think I'm getting the syntax right. Essentially what I want is something like this:
#calendarModal > .uib-datepicker > .uib-monthpicker > tbody tr:has(> td button.btn-info.active:focus)
Unfortunately this solution must be CSS-only. jQuery is verboten and since this is a third-party plugin I don't own the HTML in a view/partial somewhere. Any help/suggestions would be greatly appreciated.
Related
So I am trying to write a Stylish style to remove the black background of avatars on a forum I frequent (they put a black background so transparencies are black instead of white so stand out from the forum, which I dislike).
By copying the selector with the Chrome inspect tool I have isolated the needed argument to this
#mainpostcontent > table > tbody > tr > td > table.forumline > tbody > tr:nth-child(XX) > td:nth-child(1) > span > table > tbody > tr > td {
background: none !important;
}
Where the XX above is a number. Since the numbering changes whether a user has an avatar or not, I have to saturate the style with about 200 individial lines like so
#mainpostcontent > table > tbody > tr > td > table.forumline > tbody > tr:nth-child(1) > td:nth-child(1) > span > table > tbody > tr > td {
background: none !important;
}
#mainpostcontent > table > tbody > tr > td > table.forumline > tbody > tr:nth-child(2) > td:nth-child(1) > span > table > tbody > tr > td {
background: none !important;
}
#mainpostcontent > table > tbody > tr > td > table.forumline > tbody > tr:nth-child(3) > td:nth-child(1) > span > table > tbody > tr > td {
background: none !important;
}
and so on.
Is there a way I can select all of these with a single selector or is it a limitation of CSS that prevents me wildcarding the first tr:nth-child(2) entry?
Edit: I can't find the accept answer button, this was the answer:
"Could you just remove the nth-child argument of > tr:nth-child(3) > so that it becomes > tr >? – S. Walker"
it makes more sense to add a class or id to the element for which you want to alter the styles. anyway upload your html for better understanding of the problem
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 want to make on my simple site next feature. I have table where data is placed.
<tr><td>some data<label>edit</label> <label>delete</label></td><td>some data</td></tr>
I want next: Text in label is invisible normally, but when I hover TABLE ROW (not label exactly) all labels in this row become visible.
I know how to do this on HOVER LABEL (all what I need it to add style for table > tbody > tr> td > label : hover and style for same, but without hover), but what I have to do to make this feature?
update (solved):
css:
.table tbody > tr > td label{
opacity: 0;
}
.table tbody > tr > td:hover label{
opacity: 1;
}
use this:
jsFiddle
.table tbody > tr > td:hover > label{
opacity: 1;
}
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
[..]