I have the following CSS class selector which will select all <td> children of even <tr> children of <tbody> where <tr> belongs to any class ending in 2:
.table-striped > tbody > tr:nth-child(2n)[class$='2'] > td{
background-color: #FFF7C7;
}
What I would like to do is select all <td> children of even <tr> children of <tbody> where <tr> belongs to any class ending in an even number up to but not including 10. I hoped I could do something to the effect of:
.table-striped > tbody > tr:nth-child(2n)[class$=('2' || '4' || '6' || '8')] > td{
background-color: #FFF7C7;
}
So my question is, how do I implement an OR case in the class ends with selector?
For reference here is a sample of the HTML (I would like to select all <td> of the first two rows.):
<tbody>
<tr class="ctgry_2"><td>Data</td><td>Data</td><td>Data</td></tr>
<tr class="ctgry_6"><td>Data</td><td>Data</td><td>Data</td></tr>
<tr class="ctgry_3"><td>Data</td><td>Data</td><td>Data</td></tr>
</tbody>
With CSS you'd need to use , to separate each individual selector:
.table-striped > tbody > tr:nth-child(2n)[class$='0'] > td,
.table-striped > tbody > tr:nth-child(2n)[class$='2'] > td,
.table-striped > tbody > tr:nth-child(2n)[class$='4'] > td,
.table-striped > tbody > tr:nth-child(2n)[class$='6'] > td,
.table-striped > tbody > tr:nth-child(2n)[class$='8'] > td
This is quite verbose, and should be immediately apparent that you're probably making a poor selector choice, where you could just use classes on the appropriate elements.
Related
i want to retrieve the first element of the table element using css.
below is the html code,
<div class="wrapper">
<table>
<thead></thead>
<tbody>
<tr>first</tr> //want to access this
<tr>second</tr>
</tbody>
</table>
</div>
i tried this and works
div.wrapper table tbody tr:nth-of-type(1)
Wanted to know if there is some neater way to access it.
Given this code:
<div class="wrapper">
<table>
<thead></thead>
<tbody>
<tr>first</tr> //want to access this
<tr>second</tr>
</tbody>
</table>
</div>
You can use a CSS selector like this to refer to it:
div.wrapper > table > tbody > tr:first-of-type
You could also use any of these too:
div.wrapper > table > tbody > tr:nth-of-type(1)
div.wrapper > table > tbody > tr:nth-child(1)
div.wrapper > table > tbody > tr:first-child
<!DOCTYPE html>
<html>
<head>
<style>
tbody > tr {
color: grey
}
</style>
</head>
<body>
<table>
<thead>
<tr><th colspan="2">Favourite films</th></tr>
<tr><th>Title</th><th>Year</th></tr>
</thead>
<tbody>
<tr><td>The Shawshank Redemption</td><td>1994</td></tr>
<div>
<tr><td>Django Unchained</td><td>2012</td></tr>
<tr><td>Candyman</td><td>1992</td></tr>
</div>
</tbody>
</table>
Why do rows which are inside div become too grey? I wrote tbody > tr, not tbody tr, so only the first row, which is the direct children of tbody, should become grey.
From the manual :
Permitted content : zero or more <tr> elements.
So your browser is ignoring your div inside the <tbody> element
You can try the following
tbody > tr:first-of-type
Example
Also you can use :
tbody > tr:nth-child(1)
Example
To select the first row you can simply do this
tbody > tr:first-child
You need to remove that div inside of tbody since it is invalid
tbody > tr means first level of tr and not the first tr.Rest is all well explained.
Never put div inside tr,you can place it inside td if needed.
Need some help with CSS styling CSS experts!
Using bootstrap in which
they have the following defined in bootstrap.css:
.table > tbody > tr.active > td{
background-color:#f5f5f5;}
I'm trying to highlight a row in a table when a user clicks it- easy enough,
my html structure follows exactly and I have the active class being inserted to the html when I click the row but it is just not highlighting and the style does not get applied...
<div class="container">
<div class="row">
<div ng-class=".....">
<div id="firstTable" class="group-table-split-body">
<table class="table-bordered table-condensed table-hover col-md-12">
<thead>
<tbody>
<tr ng-repeat="item in items"
ng-mouseenter="..."
ng-mouseleave="..."
ng-click="onRowClick(item)">
<td class="col-md-12">{{item.name}}.....
</td>
</tr>
</tbody>
</table>
.......................
however, if I try it with just a random test style class it works, like:
.anything
{background-color:#f5f5f5;}
so if I try .anything, it highlights....
I'm using Firefox...any ideas??
What you need to do is:
First make sure your own css file is loaded AFTER bootstrap.min.css
(this way your rules has higher priority)
After that you can easily override that bootstrap style by copying the exact same rule and changing its properties.
for example in your css add:
.table > tbody > tr.active > td{
background-color:red;}
and you will see difference. Another way to do this is by creating more specific rule that will override the bootstrap rule for example, I assume your base element here with class "table" is actually table so you could do this:
table.table > tbody > tr.active > td{
background-color:blue;}
Easiest and fastest solution to this problem is by overriding the property with important rule. But this is by far the worst solution and you should try to avoid important as long as possible (it will create problems later on).
However if nothing seems to work you can do it like this:
.active {
background-color: red !important;
}
You have forgotten class table from your table :)
.table > tbody > tr.active > td{
background-color:#f5f5f5;}
where is the class "table" ?
make it this
table > tbody > tr.active > td{
background-color:#f5f5f5;}
My HTML code
<div id="myelement">
<table class="myclass">
<tbody>
<tr>
<td>something</td>
<td>
<table>
<tbody>
<tr> hari </tr>
</tbody>
</table>
</td>
</tr>
<tr>
foo
</tr>
</tbody>
</table>
</div>
Xpath solution
"//tbody[1]"
Problem
I am looking for a CSS expression which should select first tbody which is a direct child of table, not the one inside tr.
If I use the CSS as tbody, then it would select 2, but I am looking for a way to fix it here. I know table>tbody will work, I am looking for if any more is there or not. As in my case I can't use table>tbody.
tbody tr td:first-of-type {
color: red;
}
DEMO
td:first-of-type will works too.
:nth-of-type(1) and :first-of-type are the same. Docs
Try using the immediate child selector >:
.myclass > tbody
Or if you just want the first one inside that div, you can do:
#myelement:first-child tbody
Use the direct child selector >. It will only select elements that are a direct descendant of another element
.myClass > tbody
Make sure to specify the class of the table so that you don't select the table further down in the DOM
This selector below will select the first tbody inside the table with class myclass, and not the one inside the descendant tr.
table.myclass > tbody
I have a table whose second row ,first column contains another table. I want to set a background color to the parent table rows but it should not be applied to child table rows. For that I am trying use CSS Child-selector (>).But its not working ...Can anybody tel me the reason.
Here is my piece of code:
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<style>
table.tab > tr{
background:red;
}
</style>
</head>
<body>
<table class="tab">
<tr>
<td>asdf</td><td>afda</td><td>asdfdsa</td>
</tr>
<tr>
<td colspan="3">
<table>
<tr>
<td>afds</td><td>Trkaladf</td><td>inner Tab</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I think some browsers like to auto-render a tbody element nested between table and tr which will cause your direct-child selector to not work.
table.tab > tbody > tr, table.tab > tr{
background:red;
}
http://jsfiddle.net/vppXL/
However, if this content is for layout and not tabular data, you should not be using a table element.
Best thing to do is set your <thead> and <tbody> sections yourself, like so:
<table class="tab">
<thead>
<tr>
<td>asdf</td>
<td>afda</td>
<td>asdfdsa</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">
<table>
<tr>
<td>afds</td>
<td>Trkaladf</td>
<td>inner Tab</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
Then you can choose set your markup to target rows in your tbody, but not thead:
table.tab tbody {
background: red;
}
However, it's better to set your background-color on your <td> elements instead with:
table.tab > tbody > tr > td {
background: red;
}
There's a jsFiddle example here.
table.tab > tbody > tr indeed gives the style to only the first row.
If you take a look at the DOM with firebug, you can confirm it. The first row of the child table doesn't get styled the same way.
However, since your child table is inside a table row that has a red background, and the child table has no background specified, the child table will have no background - and thus you still see the red background "through" the child table.
Possible solution - styling the child table as well with a different background:
table.tab > tbody > tr {
background:red;
}
table.tab table > tbody > tr{
background:white;
}