Lets say I have the following table:
<table style="width:500px">
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
Now if I use the first-child selector to apply a style to the first TD, is there anyway I can have it ignore the td that has the colspan (even though of course this is the first-child)?
table tr td:first-child{
width:100px;
}
I would be happy to give the td with the colspan it's own class name if there was then a way I could modify my selector to say apply to first child except when the class name is x?
use :not([attr="val"])
table tr td:first-child:not([colspan="#NUMBER OF COLSPAN"]){
width:100px;
}
Try this:
table tr td:first-child:not(.ignore) {
width:100px;
}
(Where you give the td that you want to ignore a class of "ignore")
Why not just give the class the opposing property?
table tr td:first-child{
width:100px;
}
.your_class {
width:auto !important;
}
One simple way is to just add a class to the first TD that you actually want to select:
<table style="width:500px">
<tr>
<td class='selectable'>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
Then hit it with:
table tr td.selectable {
width: 100px;
}
Alternatively, you could try jQuery and put a class name of "ignoreMe" on the row you don't want affected with:
$('table tr td:first-child').not('.ignoreMe').css({width:100});
For your example you can use :not([colspan]) which ignores the any td with colspan defined. Something like this:
table tr td:first-child:not([colspan]){
width:100px;
}
Related
In my CSS, I have an entry:
.isenabled {
font-weight:bold;
background-color:lightyellow
}
In the HTML, I have:
<table>
<tr>
<td class="isenabled">This is enabled</td>
<td>This isn't</td>
</tr>
</table>
This works as intended. What I'd like to do is:
<table>
<tr class="isenabled">
<td>This is enabled</td>
<td>So is this</td>
</tr>
<tr>
<td class="isenabled">This is enabled</td>
<td>This isn't</td>
</tr>
</table>
But this doesn't work as it stands (both the cells have the default background). What should I do instead?
[EDIT]
I've made the desired behaviour more explicit.
Use following style
tr.isenabled > td, td.isenabled {
font-weight: bold;
background-color: lightyellow
}
<table>
<tr class="isenabled">
<td>This is enabled</td>
<td>So is this</td>
</tr>
</table>
.isenabled is catching the element with class "isenabled".
that's why when you add class to 'td' it works.
<table>
<tr>
<td class="isenabled">This is enabled</td>
<td>This isn't</td>
</tr>
</table>
if you are adding class to 'tr' element the css properties will be applied to 'tr' but you want it to be applied on 'td'.
'>' is used for immediate child after the the selected element
so if you write "tr > td" as selected it will select all 'td' which are immediate child of any 'tr' in html document.
so you can do like this
tr.isenabled > td {
font-weight: bold;
background-color: lightyellow
}
it will select all 'td' which is immediate child of any element with class "isenabled".
Here is the more information about css selectors https://www.w3schools.com/cssref/css_selectors.asp.
I'd like to select all of the child td elements of the second child of a tbody element. Here is the selection I am trying to achieve:
<table>
<thead></thead>
<tbody>
<tr></tr>
<tr>
<td>I want to select this td</td>
<td>And this one</td>
</tr>
</tbody>
</table>
tbody:nth-child(2) > td
{
//insert rules
}
However this is not working. Does CSS3 support selecting children of pseudoclasses? If not, any advice on how to achieve the above selection would be greatly appreciated.
Thanks for you input.
tr:nth-child(2) does what you asked for:
tr:nth-child(2) {
color: red;
<table>
<thead></thead>
<tbody>
<tr>
<td>not me</td>
<td>And not me</td>
</tr>
<tr>
<td>I want to select this td</td>
<td>And this one</td>
</tr>
</tbody>
</table>
tbody:nth-child(2) > td won't work because only <tr> elements can be children of <tbody> elements.
to select all second td try it:
td:nth-child(2)
{
//
}
but if you wan't to select all td in the second child you can try :
tr:nth-child(2)
{
//
}
Yes you can mix pseudo-selectors and the child selector (did you notice your typo on child?):
.a-class:nth-child(2n) > .child-class
table {
border-collapse: collapse;
border : 1px solid #e2e2e2;
}
caption, th, td {
text-align: left;
line-height: 1.4;
padding: 8px;
}
tr {
border-bottom: 1px solid #ccc;
vertical-align: top;
}
<table>
<caption>Optional table caption.</caption>
<thead>
<tr class="heade_class">
<th>#</th>
<th style="display:table-cell">First Name</th>
<th style="display:table-cell">Last Name</th>
<th style="display:none">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td style="display:none">#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td style="display:none">#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td style="display:none">#twitter</td>
</tr>
</tbody>
</table>
code here is just example here note that th and tr are dynamically set with the values.
hi guys i wan to select only last th of the which having the style"display:table-cell" property only
now i have tried little bit with using last-child
here i can get the all th with the style"display:table-cell" property only but could not find last th among them
using only css
.heade_class th[style*="display: table-cell"]:last-child {
}
In short, you cannot do this with CSS alone.
The Problem
First of all, spaces are important. You cannot have a space after th and the style attribute must match exactly the same as the style defined in the HTML. So for it to be valid it should be as follows:
.heade_class th[style*="display:table-cell"]
However, you still won't get what you want because last-child doesn't work as you think. In order for it to match it must be the last child, not just the last element that matches your other specification.
So if you consider this:
.heade_class th[style*="display:table-cell"]:last-child
What it means is as follows:
Is a th element
And the style attribute contains display:table-cell
And it is the last child element
For this you will notice none of your elements match all three conditions and that is why it doesn't work.
Other Options
Some other options, but they are probably not quite what you are looking for:
You could try nth-last-child as follows, but it relies on you knowing how many elements are going to be hidden after it, which probably isn't what you want:
.heade_class th[style*="display:table-cell"]:nth-last-child(2)
An alternative, depending on how you render your HTML, would be to either omit the hidden ones completely, or change the hidden ones to td. If you change them to td then you can use last-of-type like so:
.heade_class th:last-of-type
But you may want to check the browser support for that before using it.
I have a table that I want to select the very first TH only if it contains a caption. I thought it might be something like this:
.myTable caption + tr th:first-child
{
/* stuff */
}
It's instead selecting nothing. Is this a bug in CSS or just my logic?
See my JSFiddle: https://jsfiddle.net/ukb13pdp/1/
.objectTable th:first-child
{
background-color: blue;
color: white;
}
.objectTable caption + tr th:first-child
{
background-color: red;
}
<table class='objectTable'>
<caption>Caption Table</caption>
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<br/><br/>
<span>No Caption Table</span>
<table class='objectTable'>
<tr>
<th>C</th>
<th>D</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
The cause here is exactly the same as the one described in this related question about the use of child selectors with tr. The problem is that tr elements are made children of an implicit tbody element, so what ends up being the sibling of the caption is that tbody and not the tr:
.myTable caption + tbody th:first-child
As an aside, if your th elements reside in a header row they should ideally be contained in a thead element and the data rows contained in explicit tbody element(s):
<table class=myTable>
<caption>Table with header group</caption>
<thead>
<tr><th>Header<th>Header
<tbody>
<tr><td>Row 1<td>Row 1
<tr><td>Row 2<td>Row 2
</table>
And selected using
.myTable caption + thead th:first-child
You're forgetting about the <tbody> element which wraps the <tr> element. Even though not specified in your (otherwise invalid) HTML, the <tbody> element is automatically implemented by the browser as a way of validating this, so instead of:
<caption>
<tr>
You end up with:
<caption>
<tbody>
<tr>
As seen in this element inspector capture below:
To select the very first <tr> element after a <caption> element, you can instead use:
caption + tbody tr:first-child {
...
}
JSFiddle demo.
I know of the selector :not() but it doesn't work, like tr:not(tr:first-child):hover. I want to style the other trs but not the first one, because it holds the headings. How can I do this without using an id or class?
You can only use simple selectors in :not(), try
tr:not(:first-child)
http://jsfiddle.net/mowglisanu/Sn7Uw/
Another option would be to use the th element which is specifically represents the header cell in a table.
Example
<table>
<thead>
<tr>
<th>Number</th>
<th>element</th>
</tr>
</thead>
<tbody>
<tr>
<td>4.1.1</td>
<td>html</td>
</tr>
<tr>
<td>4.2.1</td>
<td>head</td>
</tr>
</tbody>
</table>
Use the adjacent sibling combinator. As a bonus, it's a bit more widely supported than :not()
TR + TR { background-color: silver; }
TR + TR:hover { background-color: green; }
http://jsfiddle.net/ETYQN/2/
Put your headers in a <thead> and your stylable rows in the <tbody> then use:
tbody tr:hover { background: red }
and it won't matter what the contents is.
http://jsfiddle.net/stevemarvell/we4a6/