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/
Related
I'm trying to write a custom style for a website and am running into a bit of trouble. The following bit of code appears a lot, and I need to remove the float attribute of the span. There are other spans on the page inside <td> elements with floats that must stay untouched, and CSS doesn't have any parent selectors. I can't edit the html in anyway or add any Javascript. What can I do?
<table class="forum_post box vertical_margin" id="post00001">
<tbody>
<tr class="colhead-dark">
<td colspan="2">
<span style="float: left">
<a class="post_id" href="stuff.com">text</a>
</span>
</td>
</tbody>
</table>
.box > tbody > tr > td > span { float: none !important; }
This says:
Find all
spans that are the direct descendant (child) of a...
td which is a child of a...
tr which in turn is a child of...
tbody and finally it being the one and only child of...
table
OR maybe ...
span[style*="float"] { float: none !important; }
This says:
Any span with an attribute of style containing the word float.
rel *=[external]
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');
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;
}
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!