If I have a table with ID tableProducts and it's style is defined in products.css like this:
#tableProducts {
border-collapse:collapse;
}
How do I format the CSS rule so that any td, tr, or p within tableProducts will inherit the CSS rules so that any other table with a different ID will not inherit the rules defined like so:
#tableProducts tr, td {
text-align:center;
}
The text-align works properly however other tables on the page are applying the tr, td rules defined above.
I am aware that I could simply define a class for the elements <tr> and <td> to use, but I am trying to better my understanding of CSS.
The reason other tables inherit the styles is because the second selector after the comma targets all the <td> elements in the page, in other words you should limit the scope of your selector by prefixing it with #tableProducts, like so:
#tableProducts tr, #tableProducts td {
text-align: center;
}
NOTE: it's a good practice to put each selector in a new line, this helps you a lot with clarity and makes your code much more readable, it's also a bad practice to use IDs in your CSS, use classes instead, also when trying to name your classes make sure they contain only lowercase letters, numbers and hyphens, so the best answer to your question would be:
.table-products tr,
.table-products td {
text-align: center;
}
Hope it helped : )
You need to replace ...
#tableProducts tr, td {
text-align:center;
}
... with ...
#tableProducts tr, #tableProducts td {
text-align:center;
}
Explanation
Selector #tableProducts tr, td applies to all elements that match one of these two selectors :
#tableProducts tr
td
This means that selector #tableProducts tr, td will apply to ALL td elements.
Selector #tableProducts tr, #tableProducts td applies to all elements that match one of these two selectors :
#tableProducts tr
#tableProducts td
Replacing #tableProducts tr, td with #tableProducts tr, #tableProducts td therefore means that your selector no longer applies to all td elements, but only to td elements inside #tableProducts, which is what you're going for!
Try,
#tableProducts tr,#tableProducts td{
text-align:center;
}
https://jsfiddle.net/0qvm6tc6/
#tableProducts > tr, td {
text-align:center;
}
#tableProducts tbody tr td{
text-align:center;
}
Related
This question already has answers here:
What do commas and spaces in multiple classes mean in CSS?
(9 answers)
Closed 4 years ago.
I found a simple way to show a thin border around a html table:
https://www.w3schools.com/css/css_table.asp
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
Now I want to apply this only to all tables with class "foo".
I tried this, but this does not work:
table.foo {
border-collapse: collapse;
}
table.foo, th, td {
border: 1px solid black;
}
This changes the style of all td tags. But I want only the td tags directly below a "foo" table.
What is the right way to do this?
Make CSS selection like...
table.foo, table.foo th, table.foo td {
....
Also here is a quick check for selectors.
https://www.w3schools.com/cssref/css_selectors.asp
Comma separator mean will apply style separately
Use:
table.foo td
Then will apply to all td under table with class foo
The space mean descendant of any level.
I'm not a CSS expert but I believe my code should work (?).
I can make my code work without applying any class, but sometimes I need to restrict some tables from inherit a class.
JSFiddle working without applying a class in the <table>.
JSFiddle not working while applying a class in the <table>.
As #panther already said, you have a bed selector.
However, if you want to use that style for the table that has only .responsiveTable class, then you'll have to use this selector:
.responsiveTable,
.responsiveTable thead,
.responsiveTable tbody,
.responsiveTable tfoot,
.responsiveTable th,
.responsiveTable td,
.responsiveTable tr {
display: block
}
Which looks quite nesty. So I'd recommend you use a CSS preprocessor, like SASS where the selector would look like:
.responsiveTable{
thead, tbody, tfoot, th, td, tr{
display: block
}
}
Which would generate the above selector.
On the 3rd line there is bad selector. The correct one is
.responsiveTable, thead, tbody, tfoot, th, td, tr
Your didin't work because commas missing and .responsiveTable table doesn't exist. Just table.responsiveTable.
in the not working one you forgot the commas int the css:
.responsiveTable,table,thead,tbody,tfoot,th,td,tr {
display: block
}
I have a CSS provided which contains following code
table.exm_table tbody tr.odd td{
background-color:#ffffff;
}
I'm not sure what should it style. Will be background color set at the td element in following structure?
<table class="exm_table">
<tbody>
<tr class="odd">
<td>Is this an selected element?</td>
</tr>
</tbody>
</table>
EDIT:
Actually I've overlooked second part of the CSS:
table.exm_table tbody tr:nth-child(odd) td,
table.exm_table tbody tr.odd td
Which caused my confusion why code haven't been working...
Your HTML is was incorrect but otherwise the CSS will work and targets the td. Note that in your (original) example there is no table-row <tr>. You'll see it works with the corrected mark-up:
<table class="exm_table">
<tbody>
<tr class="odd">
<td>Is this an selected element?</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/8zan1jyf/
As you can see, your CSS selector does address the td - or more specifically:
any td within a tr (that has the classname 'odd') within a tbody within a table (that has the classname 'exm_table')
There's probably no need to be quite that specific ;)
UPDATE
Since you've edited your question here's some further info about the alternating row style that seems to be confusing you.
table.exm_table tbody tr:nth-child(odd) td uses the nth-child selector to get tds in alternate rows.
table.exm_table tbody tr.odd td simply selects all tds within trs that have the classname 'odd'. (It's this classname that may be confusing because it has nothing to do with odd/even in itself and could just as easily be called 'bob')
Here's a demo to help clarify: http://jsfiddle.net/8zan1jyf/8/
/* to style ALL tds */
table.exm_table tbody tr td {background-color:pink;}
/* to style EVERY-OTHER td */
table.exm_table tbody tr:nth-child(odd) td {background-color:red;}
/* to style td WHERE THE PARENT TR HAS THE CLASSNAME 'odd' (nothing to do with actual odd/even ordering) */
table.exm_table tbody tr.odd td {background-color:blue;}
/* to style td WHERE THE PARENT TR HAS THE CLASSNAME 'bob' */
table.exm_table tbody tr.bob td {background-color:green;}
your initial css targets td and sets background to white (#fff)
you can just target classes directly
.exm_table {
background-color:#ffffff;
}
.odd {
background-color:#eeeeee;
}
Is it possible to simplify the following css rule so that I do not have to duplicate the class selector .simpleTable.cellBorders for all elements (td and th)?
.simpleTable.cellBorders td, .simpleTable.cellBorders th {
border: 1px #ccc solid;
}
The idea is that td and th cells have a border if the table has the classes simpleTable and cellBorders assigned like:
<table class="simpleTable cellBorders">
<tr><th>My Header</th> ... </tr>
<tr><td>Some cell</td> ... </tr>
</table>
You can certainly use the universal selector (*) together with the child selector (>), as there is no other valid element besides th and td that could be inside a tr:
.simpleTable.cellBorders tr>* {
border: 1px #ccc solid;
}
Note that putting another child selector between .simpleTable.cellBordersand tr will not work as expected, as browsers (at least Firefox) will add a tbody element between the table element and its tr elements, as defined by the HTML 4.01 standard as well as the HTML5 standard:
Tag omission in text/html:
A tbody element's start tag can be omitted if the first thing inside the tbody element is a tr element, and if the element is not
immediately preceded by a tbody, thead, or tfoot element whose end tag
has been omitted. (It can't be omitted if the element is empty.)
look this :
.simpleTable tr > *{
border: 1px #ccc solid;
}
Hi I would like to select only the first <td> (td with the text "label") of every row in a table, if you have a simple html like:
<table>
<tr><td>label</td> <td>value</td></tr>
<tr><td>label</td> <td>value</td></tr>
<tr><td>label</td> <td>value</td></tr>
</table>
I would like to assign for example a width of 10% only to the first <td></td> group with selector I DONT want to use a class.
I have tried the follow selectors:
table.widget tr:first-child td{
width:10%;
border:0;
}
But that selector only will pick the first td of the first tr no all the TD's so I tried
table.widget tr td:first-child{
max-width:10%;
}
Of course what I got is the selection of the first child of the TD. NOT the td itself
it's possible to accomplishing this?
Your second selector is actually correct:
http://tinker.io/40f64
table.widget tr td:first-child {
background: orange;
}
To select the first child of each td, the selector would be like so:
table.widget tr td :first-child { /* note the space after the td */
// styles
}
It should be noted, however, that the OP's sample table does not have the widget class applied to it.
If your table is expressing a collection of key/value pairs, placing your label text within a th might be more appropriate:
http://tinker.io/40f64/1
table.widget th {
background: orange;
}
<table class="widget">
<tr><th>label</th> <td>value</td></tr>
<tr><th>label</th> <td>value</td></tr>
<tr><th>label</th> <td>value</td></tr>
</table>
One way:
table tr td:first-of-type {
background: lemonchiffon;
}
http://jsfiddle.net/PRrq5/2/
Try this:
table tr td:first-child { color: red; }
Fiddle: http://jsfiddle.net/74MFH/1/