I have set up the following example: http://jsfiddle.net/SXEty/
<style>
table td, th { padding: 8px; text-align: left; }
table td:nth-child(1) { color: red; }
table td { color: blue }
</style>
...
<table>
<tr><th>Name</th><th>Age</th><th>City</th></tr>
<tr><td>Bob</td><td>27</td><td>Los Angeles</td></tr>
<tr><td>Charlie</td><td>34</td><td>San Diego</td></tr>
<tr><td>Daniel</td><td>41</td><td>San Francisco</td></tr>
</table>
I'm curious why the first column is colored as red instead of blue.
In my CSS, I set every first child to color "red". But then my next line of CSS sets every element to color "blue". Wouldn't the second line of CSS (color: blue) override the previous line (color: red)? Or is it that the nth-child property has precedence? If it does have precedence, is this true for all browsers?
Because td:nth-child(1) is more specific than just td.
There's a great overview of CSS specificity with a Star Wars theme that I suggest
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Because table td:nth-child(1) is a more specific selector, it will have precedence over table td even if the latter is declared later.
What's interesting is if you target a parent ID with table td, everything will turn blue - even if table td:nth-child(1) is declared later in the CSS sheet.
http://jsfiddle.net/mLrAf/2/
Related
Essentially, I'm setting a background on nth rows and cols in a table using CSS. Is it possible to style the intersecting cells in a different color?
I have the following CSS that styles the rows and cols of the table:
table.stats tbody tr:nth-child(even) {
background: #e4eae3;
}
table.stats tr td:nth-child(even), table.stats tr th:nth-child(even) {
background: #ccddbb;
}
Worst case, I could set the classes to individual cells in my server side code accordingly and style those...
You could try being just a bit more specific with your selectors. You're changing each column you want, and each row you want, and all you'd have to do is to set the column within the cells. So for example, something like:
table.stats tbody tr:nth-child(even) td:nth-child(even) { ... }
The markup below aligns SAMPLE TEXT to the left.
To me, it seems like it should be aligned to the right. The class that aligns to the right is declared after the one that aligns left. And the class that aligns to the right is even referenced last. So why does the class that aligns to the left win?
CSS
.table {
width: 100%;
}
.table td {
text-align: left;
}
.cell {
text-align: right;
}
HTML
<table class="table">
<tr>
<td class="cell">
SAMPLE TEXT
</td>
</tr>
</table>
Please see my jsFiddle Example.
The .table td selector has a higher specificity. CSS specificity rules are kind of weird... IDs weigh more than class names, which weigh more than tag names.
The specificity rules, in a nutshell:
For each tag name, add 1.
For each class name, add 10.
For each ID, add 100.
The higher values will always override the lower ones. In the case of a tie, the last rule loaded wins.
I highly recommend reading the actual CSS specification on specificty.
There are four levels:
inline-styles, !important (a)
IDs (b)
classes, pseudo-classes, attribute selectors (c)
element, pseudo-elements (d)
For every selector, add one to it's respective letter category:
#foo.bar baz -> a=0, b=1, c=1, d=1
#fizz#buzz -> a=0, b=2, c=0, d=0
a trumps b trumps c trumps d.
If there's a tie the second one wins:
#foo #bar baz
#fizz #buzz baz <-- same specificity, this one wins
styles of text-align by .table td will win over the text-align applied by cell
.table td specificity is (1-1) :
(10 x 1 class selector) + (1 x 1 element selector)
.cell specificity is (1-0) :
(10 x 1 class selector)
for .cell to win, it has to have a specificity higher than the others. It can also be equal to others but it has to be declared after the others of the same level.
read more about inheritance and specificity
If you do
.table {
width: 100%;
}
.table td {
text-align: left;
color: Yellow;
background-color: Red;
}
td.cell {
text-align: right;
}
it will right align http://jsfiddle.net/VTrEE/4/
I have a very simple html page:
<table>
<tr><th>header1</th><th>header2</th></tr>
<tr><td>item1</td><td>item2</td></tr>
<tr><td>item3</td><td>item4</td></tr>
</table>
With some simple css:
tr {
border:1px solid blue;
}
I would expect this to put a border around the trs but it doesn't put a border around it at all. How do I get a border around the tr?
Add table { border-collapse: collapse; }.
From the CSS2 specification:
In [the border-collapse: separate model], each cell has an individual border. [...] Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements).
Your code works, if you want a border just on the row.
However, if you are looking to have the border everywhere, you will need to do this:
tr, td, th{
border:1px solid blue;
}
Example: http://jsfiddle.net/jasongennaro/83VjH/
Borders can be added to rows of table by adding border to <td> and <th> elements [This is basically a CSS trick to achieve (hack!) that as borders cannot be added to <tr> and <tbody> elements of table]. Add following styles to your CSS to get borders around rows or headers or table cells.
table {
border-collapse: collapse;
}
table td, table th {
border: solid white;
}
td {
border-color: red (just an example, can be as per your requirement);
}
Explanation:
border-collapse rule is added to whole table. It can have two other possible properties separate (default) and inherit. For their respective effects refer https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
Second rule i.e. adding border property to <td> (for data cells) and <th> (for header cells) is a must. If you don't add it, borders will not show up. In this rule border-color is white, it can be some other color of your choice instead of white. Basically, this rule will activate the borders around table cells and since the color is white nothing will show up.
And finally, add the color of your choice. This rule can be more specific to apply border to one <td> or a class of <td>.
Is there a way to set the color of the spacing in a table? For example I want a color for the row that contains the th elements and a different color for the row that contains td elements.
You can use the first-child selector to have the first row colored with different color:
tr { background-color: lime; }
tr:first-child { background-color: yellow; }
Live example: http://jsfiddle.net/JACxc/
I have an ordinary HTML table:
<table>
<tr>
<td class="first-column-style">FAT</td>
<td>...</td>
</tr>
<tr>
<td class="first-column-style">FAT</td>
<td>...</td>
</tr>
</table>
I want to apply CSS style to every table cell (td) in a particular column. Is it possible to do that without applying the class/style attribute to every table cell in that column, and without JavaScript?
2015 answer, and based on the first-child answer but MUCH cleaner.
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child
td:nth-child(1) { /* first column */ }
td:nth-child(2) { /* second column */ }
td:nth-child(3) { /* third column */ }
Super clean code
Additionally to Sean Patrick Floyd's solution you can combine :first-child with the adjacent sibling selector + (also not supported by IE6):
td:first-child { /* first column */ }
td:first-child + td { /* second column */ }
td:first-child + td + td { /* third column */ }
/* etc. */
Use the <col> tag and style it following this guide. This way you only need to add a class (or inline style specification) to the <col> element instead of each <td> in the table.
Caveats:
Any row or cell styling will supersede column styling.
The <col> tag only supports styling border, background, width and visibility (and their derivatives, such as background-color).
The border declaration does not work unless the <table> has border-collapse: collapse;, and the behavior is inconsistent between browsers.
The visibility declaration does not work properly in Chrome due to a known bug.
Well for the first and last columns you can use the :first-child and :last-child pseudo class:
/* make the first cell of every row bold */
tr td:FIRST-CHILD{
font-weight:bold;
}
/* make the last cell of every row italic */
tr td:LAST-CHILD{
font-style:italic;
}
Reference:
:first-child and :last-child
The following allows you to style columns at table level, and can be used in a more general way to the previous examples, as you don't have to make assumptions about the styles applied to a given column index within the style sheet itself.
I agree that the <col> approach is best if it fits your needs, but the range of styles is very limited.
The sample styles column 1, 2, & 4 with a grey text style.
HTML
<table class="example col1-readonly col2-readonly col4-readonly">
CSS
.example.col1-readonly tr td:nth-child(1),
.example.col2-readonly tr td:nth-child(2),
.example.col3-readonly tr td:nth-child(3),
.example.col4-readonly tr td:nth-child(4) {
color:#555;
}
This is an old post.
But I had the same question.
Found this to be working:
<!DOCTYPE html>
<html>
<head>
<style>
tr:nth-child(3)>td:nth-child(2){background: red;}
</style>
</head>
<table>
<tr><td></td><td>A</td><td>B</td><td>C</td></tr>
<tr><td>1</td><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>2</td><td>A2</td><td>B2</td><td>C2</td></tr>
<tr><td>3</td><td>A3</td><td>B3</td><td>C3</td></tr>
</table>
</html>
This style setting sets the background color to red in the third row and second column,