Say I have a header and a list of 10 rows. How would I change the text color of rows 1-3 using a pseudo class?
tr:nth-child(odd) {
background-color: #a9cdeb;
}
tr td:last-child{
font-style: italic;
}
tbody tr: {
color: #FF0004;
}
Here is a Fiddle
You should try this.
tr:nth-child(3), tr:nth-child(4), tr:nth-child(5){
color: red;
}
Demo
If my understanding is right, You can try this
tr:nth-child(odd) td{ /* select odd rows cell */
color: #fff; /* applied white color */
}
OR you can try this
tr:nth-child(-n+5) td{ /* this will include <th> rows so i have used -5 */
color: blue;
}
Updated Demo
Demo
You may try this
tr:nth-child(3),tr:nth-child(4),tr:nth-child(5){
color:red;
font-family: cursive;
}
It change both font and color.
DEMO
You can try this:
tr:nth-child(-n+5) td {
background-color: #a9cdeb;
}
Demo
Related
I have the current alignment when i inspect the elements in my current page.
html body #root div div div div div div div div div.section-wrapper div.section-content table.selection tbody tr td span span.validate-check
when i click on the last one, the one i intend to apply scss to span.validate-check
This is the little message on the right side of inspect screen
*, *::before, *::after {
box-sizing: inherit;
}
I am still unable to access the element via the combination below:
.selection{
...
tbody{
tr{
td{
>span{
background-color: red; < === this works apply the color
.span.validate-check {
color: blue < this is what i want but not working
}
}
}
}
}
}
}
I would appreciate any suggestion.
the selector is wrong
.selection{
...
tbody{
tr{
td{
>span{
background-color: red; < === this works apply the color
.validate-check {
color: blue; < remove the .span just use the class name
}
}
}
}
}
}
}
also check the semicolon
Remove the . before span in .span.validate-check
.selection{
...
tbody{
tr{
td{
>span{
background-color: red;
span.validate-check {
color: blue
}
}
}
}
}
}
}
I am experiencing errors when loading an html/css file. Here are the contents of the file:
<div style="overflow-x:auto;">
<table>
a bunch of tr/td ...
</table>
</div>
table {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00008B;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
I see two errors: First, the horizontal scrollbar doesn't appear. Second, the even-numbered lines are the same background color as the odd-numbered lines. This behavior is consistent between IE 11 and Chrome 69.
What have I done wrong? How do I fix it?
You need to fix a couple of things:
On the table element, you can try setting it to display:inline-table; so that the width of the table won't be limited by the parent container. Add min-width:100%; if needed, and remove width:100%; to let it grow.
For the alternate background colors, for rows, apply tr:nth-child(even) {...} or tr:nth-child(even) td {...}; for columns, use td:nth-child(even) {...}
If you also have thead and/or tfoot and you only want to apply the colors to tbody, makes use to add tbody tr:nth-child(even) etc.
In addition:
You don't have to use <table>, other options:
Flexbox: .container {display:inline-flex;}
Inline-blocks: .container {white-space:nowrap;} .item {display:inline-block; vertical-align:top; white-space:normal;}
CSS table: .container {display:inline-table;} .item {display:table-cell;}.
Of course, either way you choose, keep the wrapper <div style="overflow-x:auto;"> there as needed.
I have the CSS below:
table.Table12 { border:1px solid blue; }
table.Table12 td { border:1px solid blue; width:200px;}
table.Table12 a:link{ font-weight: bold;}
and the html code below:
<table class="Table12" align="right">
<tr><td>test1</td>
<td>test2</td></tr>
<tr><td>test3</td>
<td>test4</td></tr>
</table>
All work fine and I set all table to bold font;
I just need to change the font of "test3" to normal font in CSS;
Is this possible??
try this in css:
table.Table12 td:nth-child(3) { font-weight: normal; }
forget it... didnt take in account the last line of your css code.
this one works fine:
table.Table12 tr:nth-child(2) td:nth-child(2) a { font-weight: normal; }
more details about nth-child syntax you can find here: How can I get the second child using CSS?
Nik's answer is right, you don't need to add that in the HTML, instead, you add it to the CSS. Should be added to the end.
Like so:
table.Table12 { border:1px solid blue; }
table.Table12 td { border:1px solid blue; width:200px;}
table.Table12 a:link{ font-weight: bold;}
/*Solution*/
table.Table12 td:nth-child(2) { font-weight: normal; }
That will work right away.
You can also add a class to it and you can recycle it for later use:
.normal-font{font-weight: normal}
And then in your html:
<table class="Table12" align="right">
<tr><td>test1</td>
<td>test2</td></tr>
<tr><td>test3</td>
<td>test4</td></tr>
</table>
I have a mockup here
http://jsfiddle.net/Q77RZ/
Without bootstrap everything is OK. How can I override the bootstrap settings?
You just need to make it a little more specific:
table.table tbody td.red-background {
color: black;
background-color: red;
font-size: 30px;
}
Demo here.
just change the importance of that css rule so it doesn't get overwritten.
.red-background {
color: black;
background-color: red !important;
font-size: 30px;
}
Demo: http://jsfiddle.net/Q77RZ/4/
I want to have my table rows highlighted on mouse over, but I have yet to find a way to do it that isn't using Javascript. Is this not possible in CSS?
I've tried this:
tr:hover {
background: #000;
}
But that doesn't work. Using td:hover works, but I want to change the background colour of the whole table row.
Is there a pure CSS/HTML way to do it, or am I going to have to resort to Javascript?
<tr>s themselves are very hard to access with CSS, try tr:hover td {background:#000}
You could try:
tr:hover {
background-color: #000;
}
tr:hover td {
background-color: transparent; /* or #000 */
}
JS Fiddle demo.
I had the same problem:
tr:hover { background: #000 !important; }
allone did not work, but adding
tr:hover td { background: transparent; }
to the next line of my css did the job for me!!
My problem was that some of the TDs already had a background-color assigned and I did not know that I have to set that to TRANSPARENT to make the tr:hover work.
Actually, I used it with a classnames:
.trclass:hover { background: #000 !important; }
.trclass:hover td { background: transparent; }
Thanks for these answers, they made my day!! :)
This will work:
tr:hover {
background: #000 !important;
}
If you want to only apply bg-color on TD then:
tr:hover td {
background: #c7d4dd !important;
}
It will even overwrite your given color and apply this forcefully.
tr:hover td.someclass {
background: #EDB01C;
color:#FFF;
}
only someclass cell highlight
tr:hover td {background-color:#000;}
You can give the tr an id and do it.
tr#element{
background-color: green;
cursor: pointer;
height: 30px;
}
tr#element:hover{
background-color: blue;
cursor: pointer;
}
<table width="400px">
<tr id="element">
<td></td>
</tr>
</table>
its easy . Just add !important at the end of your css line :
tr:hover { background: #000 !important; }
Try it
<!- HTML -->
<tr onmouseover="mOvr(this,'#ffa');" onmouseout="mOut(this,'#FFF');">
<script>
function mOvr(src,clrOver) {
if (!src.contains(event.fromElement)) {
src.bgColor = clrOver;
}
}
function mOut(src,clrIn) {
if (!src.contains(event.toElement)) {
src.bgColor = clrIn;
}
}
</script>