<!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.
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
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.
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
Common
table tr td
{
vertical-align:middle;
}
Custom
table.custom tr td
{
vertical-align:top;
}
When I use like this:
<table class="custom">
<tr>
<td>
<table>
<tr>
<td>this text align top, but I want to align middle
</td>
</tr>
</table>
</td>
</tr>
</table>
sub table behave like its parent. How can ignore parent element style?
One thing that you can do is adding the child selectors like so:
table.custom > tr > td { }
Then only the immediate children will match the style
You can use the > indicator to only target direct child elements
table.custom > tr > td
{
vertical-align:top;
}
However it should be noted that using a table within a table is generally not a good idea.
Note 2: this will not work in IE6.
table.custom tr td will select children at any level. The following DOM chains will all match
table.custom->tr->td
table.custom->tr->foo->td
table.custom->foo->tr->bar->td
Take a look at the CSS child selector >
http://www.w3schools.com/cssref/sel_element_gt.asp
http://css-tricks.com/child-and-sibling-selectors/
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;
}