I have this code in my HTML file. I need to target second <tr> with class detail-row and within the <tr> I need to target the .k-grouping-row class for a <tr>.
How can I target this using CSS? I tried nth-child, but it didn't work with the class names.
<table>
<tr class="master-row" ></tr>
<tr class="detail-row" ></tr>
<tr class="master-row" ></tr>
<tr class="detail-row" >
<td class="k-detail-cell" colspan="5">
<div class="k-grid k-widget">
<div class="k-grid-header" >
<div class="k-grid-header-wrap >
<table role="grid">
<thead role="rowgroup">
<tr role="row">
<th class="k-group-cell k-header" scope="col"> </th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content k-auto-scrollable" style="height: 0px;">
<table role="grid">
<tbody role="rowgroup">
<tr role="row" class="k-grouping-row"></tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</table>
Using Kendo UI huh?
First things first you have a missing double quote in your code at line 10 ("k-grid-header-wrap").
Now for the CSS part, you could use nth-child like you described.
tr.detail-row:nth-child(4) .k-grouping-row{
background-color:blue;
}
As with #Johannes' answer, the nth-child is a 4 because your target is the 4th child of its parent. This means you must use that exact HTML or else the CSS will not work.
On the other hand you can use
tr.detail-row ~ tr.detail-row .k-grouping-row{
background-color:blue;
}
tr.detail-row ~ tr.detail-row ~ tr.detail-row .k-grouping-row{
background-color:inherit;
}
The ~ character looks for the next selector specified no matter what is on its way (as long as the selector is a sibling of your element).
You can use the nth-child selector, and select the k-grouping-row by its class:
tr:nth-child(2) {
color: lime;
}
.k-grouping-row {
color: blue;
}
<table>
<tr class="master-row">
<td>master row</td>
</tr>
<tr class="detail-row">
<td>detail row</td>
</tr>
<tr class="master-row">
<td>master row</td>
</tr>
<tr class="detail-row">
<td class="k-detail-cell" colspan="5">
<div class="k-grid k-widget">
<div class="k-grid-header">
<div class="k-grid-header-wrap >
<table role=" grid ">
<thead role="rowgroup ">
<tr role="row ">
<th class="k-group-cell k-header " scope="col "> </th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content k-auto-scrollable " style="height: 0px ">
<table role="grid ">
<tbody role="rowgroup ">
<tr role="row " class="k-grouping-row ">
<td>k-grouping-row</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</table>
The CSS selector would be
tr.detail-row tr.k-grouping-row { ... }
However, you probably want to address one or all cells in that row, so you'd have to add that
Addition: If the second row also contains a .k-grouping-row element, then you'd have to be more precise:
table > tr.detail-row:nth-of-type(4) tr.k-grouping-row { ... }
Related
I want to change the color for the entire table row (using CSS) when the table header has an attribute of commit="123". I've tried this:
[commit="123"] {
color:#aaffff;
background-color:#111111;
}
However, this only changes the table header (1). How can I select the entire table row (1 entry 1) in which the table header has commit set to "123"? Thanks!
[commit="123"] {
color: #aaffff;
background-color: #111111;
}
<table class="code">
<tbody>
<tr>
<th id="1" commit="123">1</th>
<td>
<i>entry 1</i>
</td>
</tr>
<tr>
<th id="2" commit="456">2</th>
<td>
<i>entry 2</i>
</td>
</tr>
</tbody>
</table>
Why not just apply the commit to the table rows instead of the table header? Unfortunately CSS does not currently support reverse selectors for parents.
[commit="123"] {
color: #aaffff;
background-color: #111111;
}
<table class="code">
<tbody>
<tr id="1" commit="123">
<th>1</th>
<td>
<i>entry 1</i>
</td>
</tr>
<tr id="2" commit="456">
<th>2</th>
<td>
<i>entry 2</i>
</td>
</tr>
</tbody>
Instead of adding commit to table headers (i.e.) th you need to write it in to achieve your requirement.
Hope this helps.
You could use the general sibling combinator (~) to select all following tds in the row.
This won't style the tr, there is no CSS selector that can do as you wish, but you could achieve a similar effect in this way.
[commit="123"],
[commit="123"]~td {
color: #aaffff;
background-color: #111111;
}
<table class="code">
<tbody>
<tr>
<th id="1" commit="123">1</th>
<td>
<i>entry 1</i>
</td>
<td>
<i>entry 1.2</i>
</td>
</tr>
<tr>
<th id="2" commit="456">2</th>
<td>
<i>entry 2</i>
</td>
<td>
<i>entry 2.2</i>
</td>
</tr>
</table>
I need to set a link on a picture. I have to set it up in tables, which I did. But I cannot understand why the picture is linking in full width. That means the background color is also a link. That link should only be on the picture.
If it was a div tag it could be solved with a wrapper, but I do not know how to solve that within tables?
My Example
This is my code:
<body>
<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner">
<!-- Row 1 -->
<table class="row collapse" >
<tbody>
<tr>
<th class="small-12 large-12 columns first">
<table>
<tr>
<th>
<img src="http://3.bp.blogspot.com/-Z4vZ7AsD6Bc/T_PNRK_9f2I/AAAAAAAAAH4/t3UZ3BQyqdE/s1600/shutterstock.jpg" alt="test" align="center" class="float-center" >
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<!-- Row 2 -->
<table class="row collapse bgcolor--blue">
<tbody>
<tr>
<th class="small-12 large-12 columns">
<table>
<tr>
<th>
<img src="http://24.media.tumblr.com/7a40daf7853d830815fb83f79752e94a/tumblr_mz2izkaidT1rfn9zxo4_500.png" alt="Fashion news" align="center" class="float-center">
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
I didn't notice this should happen. Try this CSS :
th {
text-align: center;
}
th a {
display: inline-block;
}
edit using #SpencerMay comment
How can I add the style text-decoration:line-through to the first span class="price" element in my table ?
I have the following HTML structure:
<table class="data-table" id="product-attribute-specs-table">
<colgroup>
<col width="25%">
<col>
</colgroup>
<tbody>
<tr class="first odd">
<th class="label">Style Number</th>
<td class="data last">2403</td>
</tr>
<tr class="even">
<th class="label">Style Name</th>
<td class="data last">Easy Option Berber</td>
</tr>
<tr class="odd">
<th class="label">Rating</th>
<td class="data last">3.5</td>
</tr>
<tr class="even">
<th class="label">Retail Price</th>
<td class="data last"><span class="price">$2.23</span></td>
</tr>
<tr class="odd">
<th class="label">Price</th>
<td class="data last"><span class="price">$1.44</span></td>
</tr>
<tr class="even">
<th class="label">Roll Price Begins At</th>
<td class="data last">125</td>
</tr>
<tr class="odd">
<th class="label">Face Weight</th>
<td class="data last">50</td>
</tr>
...
</tbody>
</table>
Note: I have reviewed the answers here, but they do not apply as my class is not in the same parent element:
CSS selector for first element with class
Example (doesn't work):
#product-attribute-specs-table tbody > tr td.data .price {text-decoration:line-through}
#product-attribute-specs-table tbody > tr td.data .price ~ tr td.data .price {text-decoration:none}
I should, also, note that class="price" is used several times in the page. I just need to target the first one inside the table.
You will need JS for this:
document.getElementById('product-attribute-specs-table')
.querySelector('span.price')
.classList.add('line-through');
.chartKeyListItem {
margin-left: 60px !important;
}
.chartKeyListItem ~ .chartKeyListItem {
margin-left: 0 !important;
}
if you are using Dom elements use this
event.target.className.split(" ")[0];
Using the classList property of DOM elements which return a DOMTokenList Object of classes(already split by space)
event.target.classList[0];
I have an HTML table and I want to hide a column if all the tds of the column are empty.
I used following css:
td.actor-custom-settings {
empty-cells: hide;
}
But it doesn't work becuase I have a header for this column.
<tr>
<th>Name</th>
<th class="actor-custom-settings"></th>
</tr>
Now I am using render-time algorithm to determine if there is no data in this column:
#if (Model.Config.Custom.Actors.All(x => x.CustomSettings.Count == 0))
{
<style>
.actor-custom-settings {
display: none
}
</style>
}
Entire generation code (for a reference, it's quite irrelevant for a question):
<table class="table">
<thead>
<tr>
<th>Name</th>
<th class="actor-custom-settings">Custom Settings</th>
<th></th>
</tr>
</thead>
<tbody class="table-body">
#foreach (var x in Model.Config.Default.Actors)
{
<tr>
<td><input type="text" class="form-control actor-name" value="#x.Name"></td>
<td class="actor-custom-settings">
#if (x.CustomSettings.Count > 0)
{
<table class="table table-bordered">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody>
#foreach (var pair in x.CustomSettings)
{
<tr>
<td class="actor-custom-key">#pair.Key</td>
<td class="actor-custom-value"><input type="text" class="form-control" value="#pair.Value"></td>
</tr>
}
</tbody>
</table>
}
</td>
<td>
<button class="btn btn-danger btn-xs table-button-change-state" onclick="deleteTableRow(event)">
<i class="fa fa-remove"></i>
</button>
</td>
</tr>
}
</tbody>
</table>
But I'm wondering if there is a pure CSS solution.
If I'm understading you correctly, then you simply need to edit your CSS rule to add a second selector to target the th elements with the .actor-custom-settings class and hide them if they're empty:
th.actor-custom-settings,td.actor-custom-settings{
empty-cells:hide;
}
Or you can simplify it to a single class selector:
.actor-custom-settings{
empty-cells:hide;
}
I've noticed when using ~ to select the siblings, the order that the rules occur in the stylesheet is causing them to overwrite one another.
What I would like is every .test after .ColorBlue to be blue and every .test after .ColorRed to be red.
The data is going to be pulled dynamically so the order of the colors will be constantly changing.
Additionally new data can be inserted dynamically so using jquery's "nextUntil" would be pretty impractical.
What am I doing wrong?
.ColorBlue, .ColorBlue ~ tbody.test {
background: blue;
}
.ColorRed, .ColorRed ~ tbody.test {
background: red;
}
<table>
<tbody class="ColorRed">
<tr>
<td>red</td>
</tr>
</tbody>
<tbody class="test ">
<tr>
<td>test</td>
</tr>
</tbody>
<tbody class="ColorBlue">
<tr>
<td>blue</td>
</tr>
</tbody>
<tbody class="test ">
<tr>
<td>≡</td>
</tr>
</tbody>
</table>
You can use the + Adjacent sibling selector to achieve this.
The ~ General sibling combinator will select all elements matching the selector, not just the first. It won't be overwritten by the subsequent rule as it is not more specific than the first rule.
.ColorBlue, .ColorBlue + tbody.test {
background: blue;
}
.ColorRed, .ColorRed + tbody.test {
background: red;
}
<table>
<tbody class="ColorRed">
<tr>
<td>red</td>
</tr>
</tbody>
<tbody class="test ">
<tr>
<td>test</td>
</tr>
</tbody>
<tbody class="ColorBlue">
<tr>
<td>blue</td>
</tr>
</tbody>
<tbody class="test ">
<tr>
<td>≡</td>
</tr>
</tbody>
</table>