with the code below I found I'm confused with the definition of :nth-child
The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.
tr:nth-child(2n) {
background-color: gray;
}
table {
margin-left: 20px;
margin-right: 20px;
border-spacing: 0px;
border: thin solid black;
caption-side: bottom;
border-collapse: collapse;
}
td,
th {
border: thin dotted gray;
padding: 5px;
}
caption {
font-style: italic;
padding-top: 8px;
}
<table>
<caption>content</caption>
<tr>
<th>table head</th>
</tr>
<tr>
<td>111111</td>
</tr>
<tr>
<td>222222</td>
</tr>
<tr>
<td>333333</td>
</tr>
<tr>
<td>444444</td>
</tr>
<tr>
<td>555555</td>
</tr>
<tr>
<td>666666</td>
</tr>
</table>
and the 111111, 333333, 555555 become gray. nothing changed after I delete the caption tag, but 222222, 4444444, 666666 become gray after I removed the tr tag of table title. Isn't :nth-child suppose to count every element of its parent?
The problem here is that your HTML is invalid. tr elements must be wrapped within either a thead, tbody or tfoot element, and most browsers will automatically fix this for you by sticking them in a tbody.
Your HTML on these browsers will actually end up looking like this:
<table>
<caption>...</caption>
<tbody>
<tr>...</tr>
...
</tbody>
</table>
And thus, deleting the <caption> element will have no impact on the positioning of your tr elements.
If you inspect your <table> element, this is what you'll see:
Related
I have two css classes in a codebase and I'm unsure why one is being chosen over the other, I thought the specifity of my second one was stronger. Is anyone able to explain?
The CSS class that it's choosing is -
td, th, table { border-collapse: collapse; border: 1px solid #999; }
And the CSS that I want it to use is -
table.cancellation { border: none; }
I thought as the second one had a class selector it would have a stronger specificity, why am I wrong?
You're overwriting the style for the table, but not the cells.
In the first table, everything has a red border.
In the second table, the table has a blue border, but since border-collapse:collapse is set, the red of the td & td appear above it.
In the third table, border-collapse is set to separate and you can see that the table does truly have a blue border.
In the last table, the styles for td and th are also overwritten - giving a borderless table.
th,
td,
table {
border-collapse: collapse;
border: 1px solid red;
margin-bottom:1rem;// just for looks
}
table.table {
border-color: blue
}
table.separate{
border-collapse:separate;
}
table.none,
table.none th,
table.none td{
border:none
}
<table>
<tr>
<th>
Head
</th>
<td>
cell
</td>
</table>
<table class = "table">
<tr>
<th>
Head
</th>
<td>
cell
</td>
</table>
<table class = "table separate">
<tr>
<th>
Head
</th>
<td>
cell
</td>
</table>
<table class = "table none">
<tr>
<th>
Head
</th>
<td>
cell
</td>
</table>
CSS reads from top to bottom
if the class
td, th, table { border-collapse: collapse; border: 1px solid #999; }
is written after
table.cancellation { border: none; }
Then it will take the properties of the one that comes at the very last in your code!
If this isn't the case then you can use "border: none !important" as it has the highest rank among everything else
In case both of these methods don't work then I suggest you show me the bigger picture as in type in your related HTML and complete CSS of the div
How do we target the first matching descendant, but not all other descendants further down the tree? e.g.,
if the HTML looks like
<div class="wrapper">
<table>
<tbody>
<tr>
<!-- i want to target this td -->
<td>
<table>
<tbody>
<tr>
<!-- but not this one -->
<td>...</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
I've attempted the below, but it doesn't seem to work
.wrapper > table > tbody > tr > td {
...
}
Inherited properties, such as color, would effect the children of the td even if they are not matched by the rule. In this case, 2nd td is a child of the 1st td.
You can reset inherited properties by initial on the children of the matched element. You can also set other properties on any effect children.
Example with color:
.wrapper > table > tbody > tr > td {
color: red;
}
.wrapper > table > tbody > tr > td > * {
color: initial;
}
<div class="wrapper">
<table>
<tbody>
<tr>
<!-- i want to target this td -->
<td>
i want to target this td
<table>
<tbody>
<tr>
<!-- but not this one -->
<td>but not this one</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
Your css will only target direct td descendants of any direct tr descendants of any direct tbody descendants of any direct table descendants of any .wrapper classed elements.
However, keep in mind that descendants of those tds selected may inherit styles from a parent or at least appear to inherit them.
Below is an example to show that you can style them differently.
.wrapper > table > tbody > tr > td {
background: red;
padding: 4px;
color: white;
}
td {
background: blue;
padding: 10px;
color: yellow;
font-weight: 800;
}
#later-descendant {
background: white;
color: indigo;
padding: 3px;
font-weight: 300;
}
<div class="wrapper">
<table>
<tbody>
<tr>
<!-- i want to target this td -->
<td>
<table>
<tbody>
<tr>
<!-- but not this one -->
<td>yellow</td>
<td id='later-descendant'>indigo</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
I have different tables in my page which should have different border, cellpadding etc. I can create many classes like,
.pad5 td {padding:5px}
and then using,
<table class="pad5">
But if I use 'table' is css, the style is applied to all tables. How can I achieve the result?
You can try to add an ID to each table and in css make reference with this ID like:
CSS & HTML:
#table1 tr td {
padding: 5px;
border: 4px solid #888;
}
#table2 tr td {
padding: 5px;
border: 4px solid red;
}
<table id="table1">
<tr>
<td>first content</td>
<td>second content</td>
</tr>
</table>
<table id="table2">
<tr>
<td>first content</td>
<td>second content</td>
</tr>
</table>
declare classes for each type of styling you want to create, and assign to the <table> in the html via the class attribute
css
.table1 {
...
}
.table2 {
...
}
html
<table class="table1">
...
</table>
<table class="table2">
...
</table>
You can give your tables class names also
Example HTML:
<table class="mytable">
<tr>
<td>My cell</td>
</tr>
</table>
<table class="anothertable">
<tr>
<td>My cell</td>
</tr>
</table>
Example CSS:
.mytable {
border: 1px solid black;
}
.anothertable {
border: 1px solid red;
}
The first table will have a 1px solid black border and the second table will have a 1px solid red border.
I found that if I don't use table at all in CSS it works.
e.g.- .cell {border-spacing:10px}
give each of them seperate ids. classes are for css which will be applied to a bunch of different objects, ids are for css which will be applied to specific objects
<table id="first_table"></table>
I am trying to give my table td's a border-bottom apart from the last td. Where am I going wrong?
CSS
.rack {
border-left: 15px solid #959595;
}
.rack td {
border-bottom: 15px solid #f05f28;
width:100%;
}
.rack td:last-child {
border-bottom: none;
}
HTML
<table class="rack" width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
FIDDLE
The problem is you are misunderstanding how the :last-child selector works.
According to MDN:
The :last-child CSS pseudo-class represents any element that is the last child element of its parent.
What you are doing with .rack td:last-child is selecting the <td> that is the last child of it's parent <tr>, meaning all of them.
Simply select the <tr> that is the :last-child(or :last-of-type), then select it's child <td>:
.rack tr:last-child td {
border-bottom: none;
}
JSFiddle Demo
You should replace .rack td:last-child with .rack tr:last-child td. :last-child is applied to the last child relative to its respective parent element, so you want to select the td of the last tr.
I am trying to set the first column of the outer table (tbStudentPreference) with special styles...
But the problem is that it applies not only to the outer table column but also to the table inside the outer table.
I want to apply my style only to the outer container table. Please help.
<style>
#tbStudentPreference td:first-child {
font-weight: bold;
vertical-align: top;
width: 100px;
}
#tbStudentPreference {
vertical-align: top;
padding: 3px;
}
</style>
<table id='tbStudentPreference'>
<tr>
<td>xxxxx
</td>
<td>.....
</td>
</tr>
<tr>
<td>xxxxx
</td>
<td>.....
</td>
</tr>
<tr>
<td colspan='2'>
<table>
<tr>
<td>Inside Table
</td>
<td>.....
</td>
</tr>
<tr>
<td>Inside Table
</td>
<td>.....
</td>
</tr>
</table>
</td>
</tr>
</table>
I am trying to set the first column of the outer table..
You need to negate the inner table.
Also, the browser automatically adds a tbody for you, so it is not enough to use a child combinator on tr directly. You need to override that with a child-combinator on tbody. You then negate the inner table by using the presence of colspan attribute.
So, you select td which is a first-child among those which are not having a colspan attribute, direct descendant of tr which itself is a direct descendant of tbody which itself is direct descendant of your table. Like this:
#tbStudentPreference > tbody > tr > td:not([colspan]):first-child {...
The negation pseudo-class: https://developer.mozilla.org/en-US/docs/Web/CSS/:not
Snippet:
#tbStudentPreference { border: 1px solid gray; border-collapse: collapse; }
#tbStudentPreference td { border: 1px solid gray; }
#tbStudentPreference > tr > td:not([colspan]):first-child {
font-weight: bold; color: red;
}
#tbStudentPreference > tbody > tr > td:not([colspan]):first-child {
font-weight: bold; color: red;
}
<table id='tbStudentPreference'>
<tr><td>xxxxx</td><td>.....</td></tr>
<tr><td>xxxxx</td><td>.....</td></tr>
<tr><td colspan='2'>
<table>
<tr><td>Inside Table</td><td>.....</td></tr>
<tr><td>Inside Table</td><td>.....</td></tr>
</table>
</td></tr>
</table>