css
.table-striped > tbody > tr:nth-child(1) > td,
.table-striped > tbody > tr:nth-child(1) > th {
background-color: #4289A9;
font-weight:800;
color:white;
font-size:12px;
}
html
<table class="table table-striped">
<tr >
<td class="h6" >text change according to css </td>
<td class="h6" >text font style not changed </td>
</tr>
</table>
Using Bootstrap 3. Strangely the first td changes according to the CSS but 2nd td font style does not change, is the CSS missing something?
Related
I'm facing a problem with css about changing a class inside an hover element.
I have a simple table with a "text-success" class in a column, and also, I have an css on "tr:hover" to change the table row "background-color". The problem is the "text-success" is not well shown over the "background-color" hover, so I would like to chnage the color "text-success" only when the row is hovered. It is possible to do by CSS only?
Here the example
<div class="d-flex">
<table style="width:100%;" class="table tablaDashboard">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Mark</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td> {{user['name']}} </td>
<td> {{user['age']}} </td>
<td class="text-success"> {{user['mark']}} </td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<style>
.tablaDashboard tbody tr:hover { background:blue; }
.tablaDashboard tbody tr:hover .text-success{ color:OTHER-COLOR; } /*Doesn't work*/
.tablaDashboard tbody tr:hover > .text-success{ color:OTHER-COLOR; } /*Doesn't work*/
.tablaDashboard tbody tr:hover td .text-success{ color:OTHER-COLOR; } /*Doesn't work*/
.tablaDashboard tbody tr:hover td > .text-success{ color:OTHER-COLOR; } /*Doesn't work*/
</style>
Thanks a lot!!
I don't understund your code run with :
.tablaDashboard tbody tr:hover { background:blue; }
.tablaDashboard tbody tr:hover .text-success{ color:#ffffff; }
see it on CodePen :
https://codepen.io/alexis-g/pen/OJMjPJq
How do we target the first matching descendant, but not all other descendants further down the tree? e.g.,
if the HTML looks like
<div class="wrapper">
<table>
<tbody>
<tr>
<!-- i want to target this td -->
<td>
<table>
<tbody>
<tr>
<!-- but not this one -->
<td>...</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
I've attempted the below, but it doesn't seem to work
.wrapper > table > tbody > tr > td {
...
}
Inherited properties, such as color, would effect the children of the td even if they are not matched by the rule. In this case, 2nd td is a child of the 1st td.
You can reset inherited properties by initial on the children of the matched element. You can also set other properties on any effect children.
Example with color:
.wrapper > table > tbody > tr > td {
color: red;
}
.wrapper > table > tbody > tr > td > * {
color: initial;
}
<div class="wrapper">
<table>
<tbody>
<tr>
<!-- i want to target this td -->
<td>
i want to target this td
<table>
<tbody>
<tr>
<!-- but not this one -->
<td>but not this one</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
Your css will only target direct td descendants of any direct tr descendants of any direct tbody descendants of any direct table descendants of any .wrapper classed elements.
However, keep in mind that descendants of those tds selected may inherit styles from a parent or at least appear to inherit them.
Below is an example to show that you can style them differently.
.wrapper > table > tbody > tr > td {
background: red;
padding: 4px;
color: white;
}
td {
background: blue;
padding: 10px;
color: yellow;
font-weight: 800;
}
#later-descendant {
background: white;
color: indigo;
padding: 3px;
font-weight: 300;
}
<div class="wrapper">
<table>
<tbody>
<tr>
<!-- i want to target this td -->
<td>
<table>
<tbody>
<tr>
<!-- but not this one -->
<td>yellow</td>
<td id='later-descendant'>indigo</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
I'm trying to change the border-top color of Bootstrap table.
HTML
<table class="table">
<thead>
<tr>
<td>Parent</td>
</tr>
</thead>
<tbody>
<tr>
<td>Mama</td>
</tr>
</tbody>
</table>
CSS I've tried
table > tr{
border-top: black;
}
table > tr > td{
border: 1px solid red !important;
}
FIDDLE
https://jsfiddle.net/o9b17p2d/43/
As seen in the fiddle.
I'd like to change the color of the line between Parent & Mama.
You have placed a wrong code.Try this
.table td, .table th{
border-color: black;
}
Try this in your css.
thead{
border-bottom: 2px solid #6c5ce7;
}
https://jsfiddle.net/o9b17p2d/45/
I hope it will help
You have used a wrong selector in table > tr > td { and table > tr {
because thead is direct children for table and no tr.
so, change like this:
table > thead > tr > td {
border-bottom: 1px solid red !important;
}
table > thead > tr > td {
border-bottom: 1px solid red !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<table class="table">
<thead>
<tr>
<td>Parent</td>
</tr>
</thead>
<tbody>
<tr>
<td>Mama</td>
</tr>
</tbody>
</table>
So that you dont effect all other tables in your page/site.
The easiest way to do this - is to give the element an id, and then target it in CSS using the id.
#no-top-border-td {
border-top: none
}
<td id="no-top-border-td">Mama</td>
or you could add that as a style to the actual element
<td style="border-top: none" />
both of these have a high priority when the CSS is applied.
You can also use border-bottom property for row in thead.Add this code in css
.table thead tr td{
border-bottom:1px solid red;
}
I am trying to change a glyphicon color when I hover the table row. The following CSS changes all of the other td's font color except the glyphicon. I am using bootstrap 3.
CSS:
.table-custom-hover > tbody > tr:hover {
background-color: #DD4814;
color: #fff;
}
HTML:
<tr>
<td></td>
</tr>
Try something like this. Target a .
.table-custom-hover > tbody > tr:hover a,
.table-custom-hover > tbody > tr:hover {
background-color: #DD4814;
color: #fff;
}
<td></td>
Use <i> for the icon and wrapped it with <a> this way:
<tr>
<td a href="#">Test</td>
<td><i class="glyphicon glyphicon-cog"></i></td>
</tr>
I could do this with Javascript but I how would I go about achieving this with CSS only:
<table>
<tr>
<td>
Hover me
</td>
</tr>
<tr>
<th id="info">
Info
</th>
</tr>
</table>
All I want is when the anchor link gets hovered on, the table header "info" gets affected. And these are what I've tried to no avail:
a:hover #info
{
text-decoration: underline;
}
a:hover table tr > th#info
{
text-decoration: underline;
}
What did I miss?
You can't do this by selecting the link but you can target the parent tr
This is because there is no parent selector or previous sibling selector
tr:hover + tr th#info {
text-decoration: underline;
background: red;
}
a {
display: inline-block
}
<table>
<tr>
<td>
Hover me
</td>
</tr>
<tr>
<th id="info">
Info
</th>
</tr>
</table>