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/
Related
I want to make table like this. A has 5row and B has 2.5row. I show another question about rowspan vlaue have to be integer. So I tried to revise totalrow is 6 and A is 6row , B is 3row, C is 1row and one is 2row. But I can't do like this image. If you can solve it, please talk to me.
Here's a basic example for you. You add the rowspan to the TD Tag and then on the subsequent rows, you have 1 less TD tag
table, tr, td { border:1px solid black; border-collapse: collapse }
<table>
<tr>
<td rowspan="2">Row Span 2</td>
<td>Normal Column</td>
</tr>
<tr>
<td>Normal Column</td>
</tr>
</table>
EDIT - Taking into account the fact that column B is 2.5 rows tall, and after review of the other answer, here is complete method, which uses both an extra table and rowspan
table, tr, td { border:1px solid black; border-collapse: collapse }
<html>
<body>
<table border=1 width=100% height=100%>
<tr>
<td rowspan="5">A</td>
<td rowspan="5" height=100%>
<table border=1 width=100% height="100%">
<tr>
<td>B1</td>
</tr>
<tr>
<td>B2</td>
</tr>
</table>
</td>
<td>C1</td>
</tr>
<tr>
<td>C2</td>
</tr>
<tr>
<td>C3</td>
</tr>
<tr>
<td>C4</td>
</tr>
<tr>
<td>C5</td>
</tr>
</table>
</body>
</html>
I want to change the color for the entire table row (using CSS) when the table header has an attribute of commit="123". I've tried this:
[commit="123"] {
color:#aaffff;
background-color:#111111;
}
However, this only changes the table header (1). How can I select the entire table row (1 entry 1) in which the table header has commit set to "123"? Thanks!
[commit="123"] {
color: #aaffff;
background-color: #111111;
}
<table class="code">
<tbody>
<tr>
<th id="1" commit="123">1</th>
<td>
<i>entry 1</i>
</td>
</tr>
<tr>
<th id="2" commit="456">2</th>
<td>
<i>entry 2</i>
</td>
</tr>
</tbody>
</table>
Why not just apply the commit to the table rows instead of the table header? Unfortunately CSS does not currently support reverse selectors for parents.
[commit="123"] {
color: #aaffff;
background-color: #111111;
}
<table class="code">
<tbody>
<tr id="1" commit="123">
<th>1</th>
<td>
<i>entry 1</i>
</td>
</tr>
<tr id="2" commit="456">
<th>2</th>
<td>
<i>entry 2</i>
</td>
</tr>
</tbody>
Instead of adding commit to table headers (i.e.) th you need to write it in to achieve your requirement.
Hope this helps.
You could use the general sibling combinator (~) to select all following tds in the row.
This won't style the tr, there is no CSS selector that can do as you wish, but you could achieve a similar effect in this way.
[commit="123"],
[commit="123"]~td {
color: #aaffff;
background-color: #111111;
}
<table class="code">
<tbody>
<tr>
<th id="1" commit="123">1</th>
<td>
<i>entry 1</i>
</td>
<td>
<i>entry 1.2</i>
</td>
</tr>
<tr>
<th id="2" commit="456">2</th>
<td>
<i>entry 2</i>
</td>
<td>
<i>entry 2.2</i>
</td>
</tr>
</table>
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 6 years ago.
I want the whole row to change background-color on hover. The HTML is really old and I must leave it as it is. So I need this done purely in CSS. No JavaScript nor JQuery. Once I hover on .GMDataRow td I also need to trigger (change background) on the same element in another td. The order of elements is same in both td's.
Here's the smaller skeleton of code so you understand what im talking about:
<table>
<tr>
<td>code here</td>
<td>code here</td>
</tr>
</table>
Those two tds have identical children elements and the most important, they have same <tr class="GMDataRow">. So I was thinking maybe it can be done with :nth-child(). I need your suggestions
JSFiddle:
And here's the real skeleton:
<table class="GMMainTable" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div class="GMBodyLeft">
<table>
<tr class="GMDataRow" >
<td>
xxx
</td>
</tr>
<tr class="GMDataRow">
<td>
xxx
</td>
</tr>
</table>
</div>
</td>
<td>
<div class="GMBodyMid">
<table>
<tr class="GMDataRow">
<td>
yyy
</td>
<td>
yyy
</td>
</tr>
<tr class="GMDataRow">
<td>
yyy
</td>
<td>
yyy
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
try this :
.hoverTable{
width:100%;
border-collapse:collapse;
}
.hoverTable td{
padding:7px; border:#4e95f4 1px solid;
}
.hoverTable tr{
background: #b8d1f3;
}
.hoverTable tr:hover {
background-color: #ffff99;
}
<table class="hoverTable">
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
<tr>
<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
</table>
I'm trying to solve a specific problem with CSS selectors. I have the foillowing HTML:
<table class="Layout">
<tr>
<td>
<table class="Region">
<tbody>
<tr>
<th align="left">Header 1</th>
</tr>
<tr>
<td>
<table class="SelectionTable">
<tbody>
<tr>
<td>Text 1</td><td>Text 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top"></td>
<td valign="top">
<table class="Region">
<tr>
<th align="left" colspan="2">Header 2</th>
</tr>
<tr>
<td>Text 1</td><td>Text 2</td>
</tr>
</table>
</td>
</tr>
</table>
What I need to do is select the first occurence of the class "Region" within the document, and then select the th element, which contains the text "Header 1" (there will only be 1 th element within these tables). My reason for this is so i can apply a background color to this element.
I currently have this css which applies background color to the th elements of the two "Region" tables:
TABLE.Region TH {background-color: #00A5DB;}
But I want to apply background-color: #BAD80A to only the first occurence of "Region"
I know I can achieve this using javascript and I know this is an old way of arranging elements on a page, but this is a change to a company intranet with many pages, so changing just the style sheet would be by far the quickest way of acheiving this, as I don't really have the time to make sweeping changes at the moment! We use IE11 as our main browser, so the answer can be quite specific if necessary.
Any help would be appreciated!
Thanks
You can use the first-child psuedo-selector on the td and then target the th inside .region.
Here's a demo:
td:first-child .Region th {
background-color: red;
}
<table class="Layout">
<tr>
<td>
<table class="Region">
<tbody>
<tr>
<th align="left">Header 1</th>
</tr>
<tr>
<td>
<table class="SelectionTable">
<tbody>
<tr>
<td>Text 1</td>
<td>Text 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top"></td>
<td valign="top">
<table class="Region">
<tr>
<th align="left" colspan="2">Header 2</th>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
</tr>
</table>
</td>
</tr>
</table>
/*Both work fine*/
table.Layout td:first-child th{
background: #555;
}
td:first-child th{
background: #555;
}
JSFiddle - http://jsfiddle.net/uL9uLLuf/
Here's my current fiddle:
http://jsfiddle.net/UjAQf/106/
For the Sport, Status, and Result headings and columns, I want to align center.
For the Pick, Genius, and Genius Credential heading and columns, I want to align left.
For the "picksHeading," I want to align left.
What's the most-efficient way to do this?
--
Code:
<div class="geniusPicks">
<table cellpadding="1" cellspacing="0">
<thead>
<tr id="picksHeading">
<th>Sport</th>
<th>Status</th>
<th colspan="2">Pick</th>
<th>Genius</th>
<th>Genius Credential</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr class="bigGap">
<td colspan="7"></td>
</tr>
<tr class="pickHeading">
<td colspan="7">blah</td>
</tr>
<tr class="pickBody">
<td rowspan="4">plah</td>
<td rowspan="4">flah</td>
<td rowspan="4">glah</td>
<td>vlah</td>
<td>mlah</td>
<td>nlah</td>
<td rowspan="4">jlah</td>
</tr>
<tr class="pickBody">
<td>clah</td>
<td>dlah</td>
<td>xlah</td>
</tr>
<tr class="pickBody">
<td>plah</td>
<td>slah</td>
<td>klah</td>
</tr>
<tr class="pickBody">
<td>qlah</td>
<td>wlah</td>
<td>zlah</td>
</tr>
<tr class="smallGap">
<td colspan="7"></td>
</tr>
<tr class="pickHeading">
<td colspan="7">blah</td>
</tr>
<tr class="pickBody">
<td rowspan="4">plah</td>
<td rowspan="4">flah</td>
<td rowspan="4">glah</td>
<td>vlah</td>
<td>mlah</td>
<td>nlah</td>
<td rowspan="4">jlah</td>
</tr>
<tr class="pickBody">
<td>clah</td>
<td>dlah</td>
<td>xlah</td>
</tr>
<tr class="pickBody">
<td>plah</td>
<td>slah</td>
<td>klah</td>
</tr>
<tr class="pickBody">
<td>qlah</td>
<td>wlah</td>
<td>zlah</td>
</tr>
<tr class="smallGap">
<td colspan="7"></td>
</tr>
</tbody>
</table>
</div>
CSS:
.geniusPicks {}
.geniusPicks table {width:100%; font-size:12px;}
.geniusPicks table tr#picksHeading {border:1px solid; background-color:red; height:30px;}
.geniusPicks table tr.pickHeading {border:1px solid;}
.geniusPicks table tr.pickBody td {border:1px solid;}
.bigGap td {height:19px;}
.smallGap td {height:10px;}
you can either add classes to the cells you'd like centered or this might work for you,
Working Example
CSS added:
.geniusPicks table th,
.geniusPicks table th+th+th+th+th+th,
.geniusPicks table .pickHeading+tr td,
.geniusPicks table .pickHeading+tr td+td+td+td+td+td+td {
text-align: center;
}
.geniusPicks table th+th+th,
.geniusPicks table .pickHeading+tr td+td+td {
text-align: left;
}
This CSS makes use of the Adjacent Sibling Selector in two places
.pickHeading+tr - this only targets the cells which come in the row tr which is an immediate sibling of the pickHeading row - which is your 7 celled row, this means the smaller rows the ones with only 3 celss never get targeted and are left to default to the left
td - targets every cell
td+td+td+td+td+td+td - targets every cell which has 6 others preceding it (7)
td+td+td - targets every cell which has 2 others preceding it (3,4,5,6,7)
so the last example in #2 above overrules for cells 3 4 5 & 6, but not 7 as the 2nd example above is more specific
It could probably be done with :nth-child to but this way is supported by IE7, and needs one less rule!