How can you select the first and the last TD in a row?
tr > td[0],
tr > td[-1] {
/* styles */
}
You could use the :first-child and :last-child pseudo-selectors:
tr td:first-child,
tr td:last-child {
/* styles */
}
This should work in all major browsers, but IE7 has some problems when elements are added dynamically (and it won't work in IE6).
You can use the following snippet:
tr td:first-child {text-decoration: underline;}
tr td:last-child {color: red;}
Using the following pseudo classes:
:first-child means "select this element if it is the first child of its parent".
:last-child means "select this element if it is the last child of its parent".
Only element nodes (HTML tags) are affected, these pseudo-classes ignore text nodes.
You could use the :first-child and :last-child pseudo-selectors:
tr td:first-child{
color:red;
}
tr td:last-child {
color:green
}
Or you can use other way like
// To first child
tr td:nth-child(1){
color:red;
}
// To last child
tr td:nth-last-child(1){
color:green;
}
Both way are perfectly working
If you use sass(scss) you can use the following snippet:
tr > td{
/* styles for all td*/
&:first-child{
/* styles for first */
}
&:last-child{
/* styles for last*/
}
}
If the row contains some leading (or trailing) th tags before the td you should use the :first-of-type and the :last-of-type selectors. Otherwise the first td won't be selected if it's not the first element of the row.
This gives:
td:first-of-type, td:last-of-type {
/* styles */
}
You can use
table tr td:first-child { css here
}
for First Child and
table tr td:last-child { css here
}
for last Child.
Related
I already have the following CSS in my stylesheet which adds a counter to each row for all tables in the app:
tbody {
counter-reset: rowNumber;
}
tbody tr {
counter-increment: rowNumber;
}
tbody tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
I now have one table that I don't want to add the counter to, i.e., disobey the CSS rule, out of the scores of tables that the site generates. Would I need to put a unique class name for those three table elements for those tables I want to obey those rules, and then change the CSS accordingly? Ugh. Just thought there may be a way of saying, 'don't follow the css on this table' for this situation.
You could add a class to the tables that should ignore the counter styles (e.g., no-counter). Then alter your styles like so:
table:not(.no-counter) tbody {
counter-reset: rowNumber;
}
table:not(.no-counter) tbody tr {
counter-increment: rowNumber;
}
table:not(.no-counter) tbody tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
So tables that should not have counters would look like this:
<table class="no-counter">
...
</table>
More info about :not here.
The best solution would be to apply styles additively. That is, add a class to all your tables, then change the CSS:
.mytable tbody {}
.mytable tbody > tr {}
and so on. You will almost always encounter <table>s where you do not want the specific, site-wide styles, and then it's as trivial as leaving the mytable class from the table element.
If you can't do that, another option is the :not() selector: Exclude all tables with a class plain:
table:not(.plain) tbody {}
I have a table, in tr I have 7 th in it. I want to set display: none for the third child of tr and just for that one!
How can I set this style?
Use :nth-child selector with constant expression as a param to hide both td and th in the third column:
td:nth-child(3), th:nth-child(3) {
display: none;
}
Demo.
If you are using JQuery, you can do something like this:
$('tr').find('td:eq(3)').hide();
Or, with css you can do:
tr > td:nth-child(3) {display: none;}
Use the nth-of-type CSS selector to just stylize just the third tr element of a table element td of ID #table, like so:
#table > tr:nth-of-type(3) {
display: none
}
<tr style="display:none;">
I have a dynamically generated table and I need to style differently the 5th cell from the first row of that table.
I´m able to style the first row via:
//table.css
.mytable tbody tr:first-child { whatever styles I define.. }
Or the 5th column via:
.mytable tbody td:nth-child(5) { whatever styles I define.. }
I tried to combine this two selectors so that the cell in the 1st row, 5th column is different but without success. How can I achieve this?
You can simply use the below selector
Demo
Demo 2 (Multiple Rows)
.mytable tbody tr:first-child td:nth-child(5) {
/* Styles goes here */
}
Explanation : The above selector selects 5th td element which is nested under 1st tr element which is further nested under tbody which is further nested under ANY element having class .mytable but obviously, tbody will be used inside a table but if you want to make it specific, you can change this .mytable to table.mytable
Or you can use
.mytable tbody tr:nth-child(1) td:nth-child(5) {
/* Styles goes here */
}
Explanation: Same as above, using nth instead of first-child
I am having trouble finding the correct CSS selector, the structure I have looks like this:
<div>
</div>
<div>
</div>
<div>
</div>
I would like to style the a element of the first div
I have tried with this selector but with no luck
div:first-child a{}
first-child should work absolutely well, you can try
div:nth-of-type(1) a { /* Or div:first-child a */
color: red;
}
The above selector will select all 1st div element and will apply color to all a which are inside 1st div
Demo
If you are willing to style 1st occurrence of a in every div tag than you need to use
div a:nth-of-type(1) { /* Or div a:first-child */
color: red;
}
Here every 1st a will be selected in every div tag
Last but not the least if you want to select 1st a only in 1st div than use the below selector
div:nth-of-type(1) a:nth-of-type(1) { /* Or div:first-child a:first-child */
color: red;
}
Note: If still the above selectors doesn't work, than the possibility
is either some rule is more specific than the rules you are declaring,
or !important is used somewhere, or (least chances) you are testing
on older browsers
Your own example is working too.
http://jsfiddle.net/7Pea3/
div:first-child a {
color: #f00;
}
The first div will be selected and all a recive the color #CCC. I don't understand why this isn't working.
div:first-child a {
color: #CCC;
}
Else test this solution, that selects the first div and styles the first a tag in the div:
div:first-child a:first-child(1) {
color: #CCC;
}
Else you have problems with the :first-child selector use the :nth-of-type({ number expression | odd | even }) selector.
I have a table structure, where I can't access jsp file to add class files. I have to manage it through CSS. In this case, I need to apply background color for first table all th's. Not to nested table th's. How can we do this with CSS? Example : http://jsfiddle.net/qdDnJ/
As per i understand may you can write like this:
tr th{
background:red;
}
tr table th{
background:none;
}
Check this http://jsfiddle.net/qdDnJ/2/
Distinguish first table's th from the second table's th.
Edited after comment:
See here, http://jsfiddle.net/qdDnJ/25/
I have assumed that div is parent container of first table.
You can replace it with table's parent.
e.g. If body is parent, css should be,
body > table > tbody > tr > th {
background-color:red;
}
You could do this:
table th:first-child {
background: red;
}
table table th:first-child {
background: none;
}
I would just give the outer table a class and use this:
table.class-name th:first-child {
background: red;
}
Every body tried many things to achieve the target as per the question.
but as per the HTML we can just write the following css and avoid child th to get background-color..
in this solution we do not need any id and class or any thing accept the .gap class. Even if this class is not there we can apply the css.
check the demo
HERE is the CSS with .gap class
table th {background-color:red;}
table td.gap tr th {background:none;}
HERE is the CSS without .gap class
table th {background-color:red;}
table td tr th {background:none;}
The simplest way I know is to use the child selector
#yourtableId > tbody > tr > th { background: red; }
Demo