/* Basic table setup */
table {
font: 1em sans-serif;
border-collapse: collapse;
border-spacing: 0;
}
/* All <td>s within a <table> and all <th>s within a <table>
Comma is not a combinator, it just allows you to target
several selectors with the same CSS ruleset */
table td, table th {
border : 1px solid black;
padding: 0.5em 0.5em 0.4em;
}
/* All <th>s within <thead>s that are within <table>s */
table thead th {
color: white;
background: black;
}
/* All <td>s preceded by another <td>,
within a <tbody>, within a <table> */
table tbody td + td {
text-align: center;
}
/* All <td>s that are a last child,
within a <tbody>, within a <table> */
table tbody td:last-child {
text-align: right
}
/* All <th>s, within a <tfoot>s, within a <table> */
table tfoot th {
text-align: right;
border-top-width: 5px;
border-left: none;
border-bottom: none;
}
/* All <td>s preceded by a <th>, within a <table> */
table th + td {
text-align: right;
border-top-width: 5px;
color: white;
background: black;
}
/* All pseudo-elements "before" <td>s that are a last child,
appearing within elements with a class of "with-currency" that
also have an attribute "lang" with the value "en-US" */
.with-currency[lang="en-US"] td:last-child::before {
content: '$';
}
/* All pseudo-elements "after" <td>s that are a last child,
appearing within elements with the class "with-currency" that
also have an attribute "lang" with the value "fr" */
.with-currency[lang="fr"] td:last-child::after {
content: ' €';
}