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
Related
i want to apply css before p tag td. other td should be not effected
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>heading</td>
<td>some data</td>
<td><p class="may-class">Date</p></td>
</tr>
</table>
What it sounds like you are looking for is a parent selector, which CSS doesn't contain (yet...)
http://css-tricks.com/parent-selectors-in-css/
What I would do is apply a class to the td that you want to style. If you can't access the HTML than maybe you can style the p tag inside of the td with a direct child selector:
td > p { ... }
Refer to this question for ways to style it using Javascript:
Is there a CSS parent selector?
When the td with the p-class is always the only and last element of the tr you can use :last-child css styling.
Like:
tr td:last-child {
color:red;
}
EDIT:
It doesnt work with CSS. CSS cant get the parent of an element. Use jQuery/javascript instead:
jQuery('.may-class').parent().addClass('someClass');
I have:
<table id="table_id" >
<tr>
<td><img src="http://images1.png""></td>
<td><a href="http://x.com" >xx</a></td>
<td><a href="http://y.com" >yy</a></td>
<td><a href="http://z.com" >zz</a></td>
</tr>
</table>
and selector to change the link color and style
Why this one works
#table_id td:nth-of-type(2) a
{
color:#fff;
text-decoration:none;
}
but not this one?
#table_id td a:nth-of-type(2)
{
color:#fff;
text-decoration:none;
}
It all can be explained if we define what these CSS selectors are doing.
First selector (working):
#table_id td:nth-of-type(2) a
Translates to:
Find me any element that has the id table_id. Anywhere under that, then find me the second occurence that is a <td> Then find me an <a> anywhere under that.
This selector matches because:
<[**table id="table_id"**]>
<tr>
<td><img src="http://images1.png""></td>
<[**td**]><[**a**] href="http://x.com" >xx</a></td>
<td><a href="http://y.com" >yy</a></td>
<td><a href="http://z.com" >zz</a></td>
</tr>
</table>
Second selector (not working):
#table_id td a:nth-of-type(2) a
Translates to:
Find me any element that has the id table_id and then under that, find me any occurence of <td>, then under that, the second occurence of the type <a>. Finally, find an <a> under that.
This doesn't match because:
<[**table id="table_id"**]>
<tr>
<[**td**><img src="http://images1.png""></td>
<[**td**]>
<a href="http://x.com" ></a>
<[**a**] href="this matches. because it's the second nth-type">
<[**a**] href="this is the actual element you'd be selecting with that selector."></a>
</a>
</td>
<[**td**]><a href="http://y.com" >yy</a></td>
<[**td**]><a href="http://z.com" >zz</a></td>
</tr>
</table>
First we look at #table_id td:nth-of-type(2). With #table_id as the parent, td:nth-of-type(2) targets the 2ND TD child. That is, it targets
<td><a href="http://x.com" >xx</a></td>
But #table_id td a:nth-of-type(2) looks at td as the parent, and therefore targets the 2ND A child. However, every a in your code is the 1ST child of it's td, and therefore is not targeted.
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/
For the longest time I was styling my elements in this way.
table .class tr, th{
}
Today I had some insane css related bugs and it occurred to me that it may have worked in the past by accident and in fact what it is doing is not selecting tables of a certain class but selecting tables followed by elements of a certain class.
I kind of assumed that css would just ignore the space between table and .class. But does it?
table.class tr, th{
}
Would this work differently? I can't believe I didn't think about this before! (embarrassed)
Thanks!
table .class tr selects this:
<table>
<tbody class="class">
<tr></tr>
</tbody>
</table>
While table.class tr selects this:
<table class="class">
<tr></tr>
</table>
You answered it in your question:
table .class tr, th... selects a tr inside a .class element inside a table and a th.
table.class tr, th... selects a tr inside a table with the class "class" and a th.
The space makes a difference.
With the space, you are selecting another element in between the table and the tr (perhaps a thead or tbody?)
Without the space, you are selecting a table with the class class.
BTW, I am not sure you want this, but the , th means "also give these same styles to all ths".
table.foo selects tables with the class foo.
table .foo selects all elements that have the class foo, and are inside a table.
So your selector before:
table .class tr, th selects all trs that are inside an element which has class class and is inside a table, as well as all ths on the page.
table .class tr would select a tr:
<table>
<tbody class="class">
<tr></tr>
</tbody>
</table>
but nothing:
<table class="class">
<tr></tr>
</table>
While table.class tr would select a tr:
<table class="class">
<tr></tr>
</table>
AND a tr:
<table class="class">
<tbody>
<tr></tr>
</tbody>
</table>
But nothing:
<table>
<tbody class="class">
<tr></tr>
</tbody>
</table>
I have the following CSS which isn't working for me.
table.fields tr > td:first-child { padding-right: 50px; }
The HTML is like the following:
<table class="fields">
<tbody>
<tr>
<td> text... </td>
<td> another td elem... </td>
</tr>
</tbody>
</table>
I want to apply the padding to the first <td> element but not the second.
This was posted before stevebot fixed the question. Leaving my post here for the sake of its comments.
Your table has no fields class. Change it to this and your CSS selector should pick it up.
<table class="fields">
As discussed in the comments of the first answer, my lucky guess ended up solving the problem:
Use: table.fields tr > tr instead of table.fields tr > td:first-child
P.S: As I said, it might have been worth trying, and it was! Lucky me haha!