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>
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>
Is there any way to toggle (Show / Hide) table column or row with checkbox using CSS no JavaScript?
I've done the following code it does works with div but not with column or row
<label for="trigger">Toggle box</label>
<input id="trigger" type="checkbox">
<div class="box">
Harry I've got Toggled
</div>
<table>
<thead>
<tr>
<th colspan="2">The table header</th>
</tr>
</thead>
<tbody>
<tr >
<td class="box"> I am a column1, I've got same class but sadly did not get toggled! do you know why?</td>
<td> I am a column 2 I don't have any class</td>
</tr>
</tbody>
</table>
<style>
.box {
display: none;
}
#trigger:checked + .box {
display: block;
}
table,
td {
border: 1px solid #333;
}
thead,
tfoot {
background-color: #333;
color: #fff;
}
</style>
How can I toggle table column or row?
your selector is not correct, it should be #trigger:checked ~table .box
look first for a following sibling , then for the child of that sibbling if it stands inside.
.box {
display: none;
}
#trigger:checked ~ .box,
#trigger:checked ~table .box {
display: block;
}
table,
td {
border: 1px solid #333;
}
thead,
tfoot {
background-color: #333;
color: #fff;
}
<label for="trigger">Toggle box</label>
<input id="trigger" type="checkbox">
<div class="box">
Harry I've got Toggled
</div>
<table>
<thead>
<tr>
<th colspan="2">The table header</th>
</tr>
</thead>
<tbody>
<tr >
<td class="box"> I am a column1, I've got same class but sadly did not get toggled! do you know why?</td>
<td> I am a column 2 I don't have any class</td>
</tr>
</tbody>
</table>
I want the picture from div to be under the table so that after hover the content shows, the problem is i can't change html all elements should be the same size and be displayed as inline blocks
td {
display: block!important;
visibility: hidden
}
.hide:hover:nth-child(n)+table:nth-child(n) tbody tr td.td1 {
visibility: visible!important
}
.hide{width:100px; height:200px; display:inline-blocks;
}
tbody{width:100px; height:200px; display:inline-blocks;
}
<html>
<body>
<table>
<tbody>
<tr>
<td class="td1"></td>
<td class="td1"></td>
</tr>
</tbody>
</table>
<div id="more49042" class="hide" style="background-image:url("https://webkit.org/demos/srcset/image-src.png") !important">
</div>
<table>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div id="more5343" class="hide" style="background-image:url("https://assets.crowdsurge.com/datacapture/example/img/example_logo.png") !important">
</div>
</body>
</html>
Here is what I think you are trying to do. Please note that I added the html entity to ensure that the div shows up. You could probably just set a min-height on the element.
How the CSS works:
Since there will never be a case that I can think of where hovering over something that technically doesn't exist in the DOM is going to work, you want to look for a hover on the table, and then change the visibility of the .hide element after it.
.hide {
display: none;
}
table:hover+.hide {
display: inherit !important;
}
<table>
<tbody>
<tr>
<td>Lorem.</td>
<td>Quaerat.</td>
</tr>
</tbody>
</table>
<div class="hide" style="background-image:url('//placehold.it/300x300')"> </div>
I've been trying to make a colored table with even rows with class item a different color than the odd ones.
Please, see fiddle: http://jsfiddle.net/x7XT5/
HTML:
<table>
<tr class="item">
<td>1</td>
</tr>
<tr>
<td>info</td>
</tr>
<tr class="item">
<td>2</td>
</tr>
<tr>
<td>info</td>
</tr>
<tr class="item">
<td>3</td>
</tr>
<tr>
<td>info</td>
</tr>
<tr class="item">
<td>4</td>
</tr>
<tr>
<td>info</td>
</tr>
</table>
CSS:
table tr.item:nth-child(2n)
{
background-color: yellow;
}
table tr.item:nth-child(2n+1)
{
background-color: red;
}
How to make it work in css?
UPD1
<tr> without class item must be on white background.
<tr class="item">'backgrounds must be red/yellow on even/odd positions.
table tr
{
background-color: yellow;
}
table tr.item:nth-child(2n+1)
{
background-color: red;
}
update: Here you go:
table tr {
background-color: white;
}
table tr.item:nth-child(n)
{
background-color: red;
}
table tr.item:nth-child(4n+1)
{
background-color: yellow;
}
Try this. No need to set the nth child.
http://jsfiddle.net/x7XT5/2/
You could also use odd & eeven keywords.
Hey remove the class and check in your tr and css file
and create easily
Live demo http://jsfiddle.net/x7XT5/1/
and
second method is Live Demo http://jsfiddle.net/x7XT5/3/
Updated Live demo http://jsfiddle.net/x7XT5/5/
First, I think, you should use :nth-of-type instead of :nth-child, but
unfortunately, :nth-of-type doesn't work with classes, so I dont know any pure CSS solution.
You can always use:
table tr.item:nth-of-type(4n+3)
{
background-color: yellow;
}
table tr.item:nth-of-type(4n+1)
{
background-color: red;
}
Works for this example.