As part of our payment system there is an automatically generated notice that indicates monthly recurring payments. This is outputted on the page like this:
and is made up of the following elements:
#order_review > .shop_table > thead > tbody > tr > td
There are 4 blocks that all use the 'td' element so I've tried using parent:last-child to select the td element that contains the date (the one I'm trying to style). I have also tried:
#order_review .shop_table tbody tr:last-child {
and
#order_review .shop_table thead tbody tr td:last-child {
still no luck unfortunately. Here is a screenshot of Console:
Related
I have a question about the Vuetify3 DataTables:
The icons and checkboxes are transparent, I can't change the property of this and i wish to change the headers of title with other color.
Someone can help me to resolve this?
Here is my code:
<v-data-table
v-model:items-per-page="itemsPerPage"
:headers="donner.headers"
:items="donner.content"
item-key="name"
class="blue-header"
show-select
>
</v-data-table>
<style>
.blue-header th {
background-color: blue;
};
</style>
The initial header background color is set by this declaration:
.v-data-table .v-table__wrapper > table > thead > tr > td,
.v-data-table .v-table__wrapper > table > thead > tr th,
.v-data-table .v-table__wrapper > table tbody > tr > td,
.v-data-table .v-table__wrapper > table tbody > tr th {
background: rgb(var(--v-theme-surface));
}
These selectors give a high specificity, that you need to match in your declaration.
Your blue-header class lands on the element with the v-data-table class, so this should do it:
.v-data-table.blue-header .v-table__wrapper > table > thead > tr th,
.v-data-table.blue-header .v-table__wrapper > table tbody > tr th {
background-color: blue;
}
Alternatively, you can pull out the crowbar and do background-color: blue !important;, but it is not really necessary in this case.
Icons Resolves:
I just forget to install the icons on my project.
So it's done now
" npm install #mdi/font -D "
Now my problem is to change the background of headers.
I'm not well versed in CSS, but I understand the basic idea of specificity (or so I think). Recently I was trying to override the table CSS of Bootstrap 3, which was defined for each cell like so (this is a partial bit, the part that was effective on the inspected element):
.table > tbody > tr.danger > td, .table > tfoot > tr.danger > td {
background-color: #ddd;
}
I was trying to override the background color of the entire row that contained that cell, with this:
table#results > tbody > tr.highlighted {
background-color: #ffd15b;
}
Which, as I understand it, has higher specificity due to the ID. However it wasn't working at all, until I introduced the child td in my CSS:
table#results > tbody > tr.highlighted > td {
background-color: #ffd15b;
}
Why didn't my first attempt work? I tried in both Safari and Chrome (latest versions)
Your problem is not CSS specificity, but merely the background of the cell ( <td> ) hiding the background of the row (<tr>) behind it.
Try adding border-collapse property to the parent table like below
table#results { border-collapse: collapse;}
I have a class called 'table-green-hover' which when set on a table makes it so that the hover colour is LightGreen instead of the usual bootstrap colour
.table-green-hover > tbody > tr:hover > td,
.table-green-hover > tbody > tr:hover > th { background-color: LightGreen; }
However for 2 specific rows in my table (with a class of 'logout-hover') I want those to be a completely different colour, I thought of doing it as
.logout-hover > tr:hover > td { background-color: LightBlue; }
Though it doesn't seem to be doing anything at all, when I hover over those 2 specific rows they still show with the LightGreen.
Edit based on OP's comment:
.table-green-hover tr.logout-hover:hover > td { background-color: LightBlue; }
Old answer:
.logout-hover > tbody > tr:hover > td { background-color: LightBlue; }
The reason is because
.table-green-hover > tbody > tr:hover > th (1 class, 3 elements) is more specific than .logout-hover > tr:hover > td (1 class, 2 elements), and thus got higher priority.
I am currently often using in my CSS things like
table.form > tbody > tr > td > input[type=text],
table.form > tbody > tr > td > input[type=password],
table.form > tbody > tr > td > textarea ,
table.form > tbody > tr > td > select {width: 300px;}
Is this a correct way to do it with respect to minimal CSS output size? Is there any way to group those elements without having to reiterate their entire parent structure, something along the lines of
table.form > tbody > tr > td >
(input[type=text],input[type=password],textarea,select) {width: 300px;}
?
Using mozilla Firefox and Webkit based web browsers, you could use :any() pseudo-class to target a group of elements at once.
The :any() pseudo-class lets you quickly construct sets of similar
selectors by establishing groups from which any of the included items
will match. This is an alternative to having to repeat the entire
selector for the one item that varies.
Mozilla Developer Network
Syntax
:-moz-any( selector[, selector]* )
:-webkit-any( selector[, selector]* )
In this particular case:
/* For FF 4+ */
table.form > tbody > tr > td > :-moz-any(input[type=text],input[type=password],textarea,select) {width: 300px;}
/* For Chrome 12+, Safari 5.1.3+ */
table.form > tbody > tr > td > :-webkit-any(input[type=text],input[type=password],textarea,select) {width: 300px;}
EXAMPLE HERE
This is an experimental technology that is in progress to be standardized in CSS Selectors Level 4 under the name :matches().
I have a dynamically generated table and I need to style differently the 5th cell from the first row of that table.
I´m able to style the first row via:
//table.css
.mytable tbody tr:first-child { whatever styles I define.. }
Or the 5th column via:
.mytable tbody td:nth-child(5) { whatever styles I define.. }
I tried to combine this two selectors so that the cell in the 1st row, 5th column is different but without success. How can I achieve this?
You can simply use the below selector
Demo
Demo 2 (Multiple Rows)
.mytable tbody tr:first-child td:nth-child(5) {
/* Styles goes here */
}
Explanation : The above selector selects 5th td element which is nested under 1st tr element which is further nested under tbody which is further nested under ANY element having class .mytable but obviously, tbody will be used inside a table but if you want to make it specific, you can change this .mytable to table.mytable
Or you can use
.mytable tbody tr:nth-child(1) td:nth-child(5) {
/* Styles goes here */
}
Explanation: Same as above, using nth instead of first-child