I have a div that has one paragraph and one table.
I want to change the font-size of the paragraph using the :not() selector.
I tried the following, but it failed to select table element with this selector.
div :not(table){font-size:5px;}/*not working*/
<div><p>....</p><table>....</table></div>
https://codepen.io/nur49/pen/eYBvOZG
You want to select the child of the div that is not the table, so you can use the > selector on the div
div > :not(table)
Here's the snippet:
body{
width: 100%;
background-color: #7df3e0;
font-size: 24pt;
}
div > :not(table){
font-size: 5px;
}
<div>
<p>paragraph</p>
<table border="1">
<thead>
<tr class="trr">
<th>Roll</th>
<th>Name</th>
<th>GPA</th>
</tr>
</thead>
<tbody>
<tr>
<th>01</th>
<th>Nur</th>
<th>5.0</th>
</tr>
<tr>
<th>02</th>
<th>prothomalo</th>
<th>5.0</th>
</tr>
<tr>
<th>03</th>
<th>Nur</th>
<th>5.0</th>
</tr>
<tr>
<th>04</th>
<th>Nur</th>
<th>5.0</th>
</tr>
</tbody>
</table>
</div>
This might helps you.
div >*:not(table){font-size:5px;}
Related
I have the following code:
<table>
<colgroup>
<col class="left">
<col>
</colgroup>
<thead>
<tr>
<th scope="col">HTML tag</th>
<th scope="col">Use</th>
</tr>
</thead>
<tbody>
<tr>
<td>table</td>
<td>Creates the table element</td>
</tr>
<tr>
<td>thead</td>
<td>Wraps the heading section</td>
</tr>
<tr>
<td>tbody</td>
<td>Wraps the main body of the table</td>
</tr>
<tr>
<td>tfoot</td>
<td>Wraps the footer of the table</td>
</tr>
<tr>
<td>tr</td>
<td>Creates a row</td>
</tr>
<tr>
<td>th</td>
<td>Creates a heading cell</td>
</tr>
<tr>
<td>td</td>
<td>Creates a data cell</td>
</tr>
</tbody>
</table>
And the following CSS rule:
.left {
font-family: monospace;
font-weight: bold;
}
The CSS isn't changing the column's font style and there are no other font-family or font-weight rules in the stylesheet. When I use the inspector and hover over the col it marks the whole column as affected by the CSS rule. I'm sure it's something really simple and stupid, but I can't seem to find the problem.
Because elements are not descendant of the element, they won't inherit colgroup styles.
If the table doesn't use a colspan attribute, use the td:nth-child(an+b) CSS selector per column, where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the style can be used.
If the table does use a colspan attribute, the effect can be achieved by combining adequate CSS attribute selectors like [colspan=n], though this is not trivial.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col
.left {
font-family: monospace;
font-weight: bold;
color: red;
}
td:nth-child(1) {
font-family: monospace;
font-weight: bold;
color: blue;
}
<table>
<colgroup>
<col class="left">
<col>
</colgroup>
<thead>
<tr>
<th scope="col">HTML tag</th>
<th scope="col">Use</th>
</tr>
</thead>
<tbody>
<tr>
<td>table</td>
<td>Creates the table element</td>
</tr>
<tr>
<td>thead</td>
<td>Wraps the heading section</td>
</tr>
<tr>
<td>tbody</td>
<td>Wraps the main body of the table</td>
</tr>
<tr>
<td>tfoot</td>
<td>Wraps the footer of the table</td>
</tr>
<tr>
<td>tr</td>
<td>Creates a row</td>
</tr>
<tr>
<td>th</td>
<td>Creates a heading cell</td>
</tr>
<tr>
<td>td</td>
<td>Creates a data cell</td>
</tr>
</tbody>
</table>
Regards
You can apply only these 4 properties border, background, width and visibility to <col> and <column-group> elements. It is because of the W3 specification.
Reference - https://www.w3.org/TR/CSS21/tables.html#columns
I have a problem with my direct descendant selector. Look at a simple example:
.myDiv > table tr:first-child td {
font-weight: bold;
text-align: center;
}
<div class="myDiv">
<table style="width:100%">
<tr>
<td style="width:37%">Revenue & Cost</td>
<td style="width:43%">Name</td>
<td style="width:20%">Income</td>
</tr>
<tr>
<td>column 1</td>
<td colspan="2">
<table id="tableChild" width="100%">
<tr>
<td>child 1 - Should NOT bold</td>
<td>child 2 - Should NOT bold</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
As you can see, it will effect table id tableChild. I expect to get a bold font on the first row on the first table.
Here is my JSFiddle
First, finish defining the table correctly:
<table>
<thead>
<tr> TITLE ROW HERE </tr>
</thead>
<tbody>
CONTENT ROWS HERE
</tbody>
</table>
Then your CSS selector becomes:
.myDiv>table>thead>tr>td {
...
}
The browser fills in your missing table elements:
Try this:
.myDiv > table > tbody > tr:first-child td
https://jsfiddle.net/85t8qm5r/3/
If I have the HTML below I want to find a single CSS class definition that will effect the outermost table but not the sub tables. Without changing the HTML can I get .myClass to do this:
I was playing around with the not selector but couldn't get it to work.
.myClass tr td div :not(table) {
background-color: red;
}
<body>
<div class="myClass">
<table>
<tr>
<td>
<div>My</div>
</td>
</tr>
<tr>
<td>
<div>
<table>
<tr>
<td>Hello</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div>
<table>
<tr>
<td>World</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
No you cannot do this with pure css without changing your html.
You can do it with jQuery or by simply putting the 'My' inside of a span, because text is not accesible by a selector.
But in all fairness your question was partly answered by #Pangloss. To access the outer table, just use >. Your problem lies in the fact that on the 2nd and 3rd rows, you still have the outer table present. Your question should actually be something like "What's the selector for an element that does not have a specific child type", and then you would find that you cannot target a parent of an element on css yet.
The first cell is the first div inside the first tr, we can target this using the following:
tr:first-child div:first-child{
background:red;
}
Full snippet:
tr:first-child div:first-child {
background: red;
}
<body>
<div class="myClass">
<table>
<tr>
<td>
<div>My</div>
</td>
</tr>
<tr>
<td>
<div>
<table>
<tr>
<td>Hello</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div>
<table>
<tr>
<td>World</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
I want to set style for <td> tag, I am designing table in a page. I want to give different styles for upper and lower cells, is that possible to set <style> which only do work on down side <td> tags.
Please Help.
Yes, you either give a class to lower <td> tags and then inside <style> you can set their style. or you can use this css selector without giving your <td> elements a class.
Here is a representation of what I just said:
<table id="table1">
<tr>
<td>1</td>
<td class="lowertd">2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td class="lowertd">2</td>
<td>6</td>
</tr>
</table>
<style>
#table1 tr td:last-child {
background-color: green;
}
.lowertd {
background-color: silver;
}
#table1 tr td:nth-child(1) {
background-color: blue;
}
</style>
For your requirement you need to create a css class and reference it by
<td class="someclass" ........... >
although you want to add this class, only for elements for which you need styling.
and in CSS under <style> , define css attributes. Something like below
<style>
.someclass{
property: value;
.
.
.
}
</style>
Hope this solves your problem.
I got the answer...
Just set the particular rows in any tag like <thead>, <tbody> or <tfoot>
<table id="table1">
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>6</td>
</tr>
</tbody>
</table>
then set style
<style>
table thead td
{
border:none;
}
</style>
You can style the first 10 <td> tags differently by using the nth-of-type selector and then setting a style for those elements:
td:nth-child(-n+10) { text-decoration: underline; }
jsfiddle
For this Bootstrap styled table, I want the three columns (Sub1, Sub2, Sub3) widths to grow and align with their corresponding columns in the nested table.
http://jsfiddle.net/jamesholcomb/r55Zc/
Instead of using a nested <table>, simply use the rowspan attribute on the first column. Borders (and some padding) can be removed with some creative CSS (example):
CSS
th { text-align: center; }
tbody td {
border-width: 0 !important;
padding-top:0 !important;
}
tbody tr th ~ td {
border-top-width: 1px !important;
padding-top:8px !important;
}
tbody tr td:first-of-type {
border-left-width: 1px !important;
}
HTML
<div class="row">
<div class="span*">
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th colspan="3">Col1</th>
</tr>
<tr>
<th></th>
<th>Sub1</th>
<th>Sub2</th>
<th>Sub3</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3">Row1</th>
<td>[-01234543333545]</td>
<td>[4567]</td>
<td>[1]</td>
</tr>
<tr>
<td>[1]</td>
<td>[456.789]</td>
<td>[2]</td>
</tr>
<tr>
<td>[0]</td>
<td>[1]</td>
<td>[0000789.0123]</td>
</tr>
</tbody>
</table>
</div>
</div>
If you want the entire row to highlight correctly, I suggest you tweak your table as others have suggested. However, instead of creating multiple trs and giving the td a rowspan of 3 (which causes row highlighting problems), just list the data in the td as an unordered list and make some adjustments to the css.
Table:
<div class="row">
<div class="span*">
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th colspan="3">Col1</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Sub1</td>
<td>Sub2</td>
<td>Sub3</td>
</tr>
<tr>
<td>Row1</td>
<td><ul><li>[-01234543333545]</li><li>[1]</li><li>[0]</li></ul></td>
<td><ul><li>[4567]</li><li>[456.789]</li><li>[1]</li></ul></td>
<td><ul><li>[1]</li><li>[2]</li><li>[0000789.0123]</li></ul></td>
</tr>
</tbody>
</table>
</div>
</div>
CSS:
td > ul {
list-style-type:none;
margin:0;
}
Here is the updated fiddle forked from #Mr.Alien's suggestions.