Having the following table, is it possible to set a particular style for tr:first-child, when :first-child of previous tr has a different class? On the example table I want round corners on rows 2 and 4, but not on row 5 (since row 4 first child has the same class that row 5 first child).
<html>
<head>
<style type="text/css">
table { width: 100%; }
.a { background-color: red; }
table > tbody > tr:first-child > td.a:first-child {
border-top-left-radius: 10px;
}
</style>
</head>
<body>
<table>
<tr><td colspan=2>title</td></tr>
<tr><td class=a>sadsf</td><td class=a>adsfs</td></tr>
<tr><td class=b>sadsf</td><td class=b>adsfs</td></tr>
<tr><td class=a>sadsf</td><td class=a>adsfs</td></tr>
<tr><td class=a>sadsf</td><td class=a>adsfs</td></tr>
</table>
</body>
</html>
Short answer: No
You can reference CSS Selectors here.
Long Answer:
Let's simplify your title first:
I want to style an element, but only if that elements immediate preceding neighbor’s first child does not have the same class.
This is easily accomplishable with javascript, but let’s pretend you can’t use javascript and you have a little freedom with your class declarations.
The first thing you should do is give each parent element a unique class name (I would choose the same as the children). So in this example it would be <tr class=“a”> and so forth.
Then we can style every :first-child with the effect you want (in this case, border-radius).
Later we can use css selectors to target every element, that has an adjacent sibling with the same class name (see docs) and we will revert or remove the style just placed on it.
Here's a fiddle using li elements as demo and below in the snippet you will see another example using table elements.
tr {
color: orange;
}
tr.a > td.a:first-child,
tr.b > td.b:first-child,
tr.c > td.c:first-child {
color: aqua; /* style all first-children*/
}
tr.a + tr.a > td.a:first-child,
tr.b + tr.b > td.b:first-child,
tr.c + tr.c > td.c:first-child {
color: orange; /*revert the styling on select elemets*/
}
<table>
<tr class="a">
<td colspan="2">class-a</td><!--should be styled-->
</tr>
<tr class="b">
<td class="b">class-b</td><!--should be styled-->
<td class="b">class-b</td>
</tr>
<tr class="c">
<td class="c">class-c</td><!--should be styled-->
<td class="c">class-c</td>
</tr>
<tr class="b">
<td class="b">class-b</td><!--should be styled-->
<td class="b">class-b</td>
</tr>
<tr class="b">
<td class="b">class-b</td><!--should NOT be styled-->
<td class="b">class-b</td>
</tr>
<tr class="c">
<td class="c">class-c</td><!--should be styled-->
<td class="c">class-c</td>
</tr>
<tr class="b">
<td class="b">class-b</td><!--should be styled-->
<td class="b">class-b</td>
</tr>
<tr class="c">
<td class="c">class-c</td><!--should be styled-->
<td class="c">class-c</td>
</tr>
<tr class="c">
<td class="c">class-c</td><!--should NOT be styled-->
<td class="c">class-c</td>
</tr>
</table>
Related
The MDN page on colgroup indicates that col width is deprecated, however I have not found an alternative when colspan is involved, and you need to specify the width of a "colspanned" column.
Below is a rather minimalistic snippet to illustrate the issue, for a table with three columns and two rows. The middle column is never explicited with a "td" elements.
With a colgroup, it is possible to specify its width, and then everything is well. Without colgroup, the HTML rendering engine is unable to solve the equation, and column widths render incorrectly.
table {
border-collapse: collapse;
}
.w100 { width: 100px; background-color: red }
.w200 { width: 200px; background-color: green }
<!DOCTYPE html>
<html>
<body>
With colgroups
<table>
<colgroup>
<col style="width:100px">
<col style="width:100px">
<col style="width:100px">
</colgroup>
<tbody>
<tr>
<td class="w100">A
<td class="w200" colspan="2">B
<tr>
<td class="w200" colspan="2">C
<td class="w100">D
</tbody>
</table>
<p></p>
No colgroups
<table>
<tbody>
<tr>
<td class="w100">A
<td class="w200" colspan="2">B
<tr>
<td class="w200" colspan="2">C
<td class="w100">D
</tbody>
</table>
</body>
</html>
The official solution is using :nth-child in CSS.
.table_8 td:nth-child(1) {
text-align: right;
width: 32px;
}
But this is very unpractical!
In my opinion, col width should be de-deprecated.
It is supported by all browsers, as far as I can see.
https://caniuse.com/?search=col%20width
In my CSS, I have an entry:
.isenabled {
font-weight:bold;
background-color:lightyellow
}
In the HTML, I have:
<table>
<tr>
<td class="isenabled">This is enabled</td>
<td>This isn't</td>
</tr>
</table>
This works as intended. What I'd like to do is:
<table>
<tr class="isenabled">
<td>This is enabled</td>
<td>So is this</td>
</tr>
<tr>
<td class="isenabled">This is enabled</td>
<td>This isn't</td>
</tr>
</table>
But this doesn't work as it stands (both the cells have the default background). What should I do instead?
[EDIT]
I've made the desired behaviour more explicit.
Use following style
tr.isenabled > td, td.isenabled {
font-weight: bold;
background-color: lightyellow
}
<table>
<tr class="isenabled">
<td>This is enabled</td>
<td>So is this</td>
</tr>
</table>
.isenabled is catching the element with class "isenabled".
that's why when you add class to 'td' it works.
<table>
<tr>
<td class="isenabled">This is enabled</td>
<td>This isn't</td>
</tr>
</table>
if you are adding class to 'tr' element the css properties will be applied to 'tr' but you want it to be applied on 'td'.
'>' is used for immediate child after the the selected element
so if you write "tr > td" as selected it will select all 'td' which are immediate child of any 'tr' in html document.
so you can do like this
tr.isenabled > td {
font-weight: bold;
background-color: lightyellow
}
it will select all 'td' which is immediate child of any element with class "isenabled".
Here is the more information about css selectors https://www.w3schools.com/cssref/css_selectors.asp.
I have a table that I want to select the very first TH only if it contains a caption. I thought it might be something like this:
.myTable caption + tr th:first-child
{
/* stuff */
}
It's instead selecting nothing. Is this a bug in CSS or just my logic?
See my JSFiddle: https://jsfiddle.net/ukb13pdp/1/
.objectTable th:first-child
{
background-color: blue;
color: white;
}
.objectTable caption + tr th:first-child
{
background-color: red;
}
<table class='objectTable'>
<caption>Caption Table</caption>
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<br/><br/>
<span>No Caption Table</span>
<table class='objectTable'>
<tr>
<th>C</th>
<th>D</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
The cause here is exactly the same as the one described in this related question about the use of child selectors with tr. The problem is that tr elements are made children of an implicit tbody element, so what ends up being the sibling of the caption is that tbody and not the tr:
.myTable caption + tbody th:first-child
As an aside, if your th elements reside in a header row they should ideally be contained in a thead element and the data rows contained in explicit tbody element(s):
<table class=myTable>
<caption>Table with header group</caption>
<thead>
<tr><th>Header<th>Header
<tbody>
<tr><td>Row 1<td>Row 1
<tr><td>Row 2<td>Row 2
</table>
And selected using
.myTable caption + thead th:first-child
You're forgetting about the <tbody> element which wraps the <tr> element. Even though not specified in your (otherwise invalid) HTML, the <tbody> element is automatically implemented by the browser as a way of validating this, so instead of:
<caption>
<tr>
You end up with:
<caption>
<tbody>
<tr>
As seen in this element inspector capture below:
To select the very first <tr> element after a <caption> element, you can instead use:
caption + tbody tr:first-child {
...
}
JSFiddle demo.
My xpath is: /html/body/div/table/tbody/tr[2]/td[4]
I need to get an CSS to use it in jsoup selector.
I found a comparison between xpath and css: here, and it's said in their example (Second <E> element anywhere on page) that I can't do it. Xpath xpath=(//E)[2] CSS N\A.
Maybe I can't find what I'm looking for. Any ideas?
Here's the html I'm trying to parse (I need to get values: 1 and 3):
<div class=tablecont>
<table width=100%>
<tr>
<td class=header align=center>Panel Color</td>
<td class=header align=center>Locked</td>
<td class=header align=center>Unqualified</td>
<td class=header align=center>Qualified</td>
<td class=header align=center>Finished</td>
<td class=header align=center>TOTAL</td>
</tr>
<tr>
<td align=center>
<div class=packagecode>ONE</div>
<div>
<div class=packagecolor style=background-color:#FC0;></div>
</div>
</td>
<td align=center>0</td>
<td align=center>0</td>
<td align=center>1</td>
<td align=center>12</td>
<td align=center class=rowhead>53</td>
</tr>
<tr>
<td align=center>
<div class=packagecode>two</div>
<div>
<div class=packagecolor style=background-color:#C3F;></div>
</div>
</td>
<td align=center>0</td>
<td align=center>0</td>
<td align=center>3</td>
<td align=center>42</td>
<td align=center class=rowhead>26</td>
</tr>
</table>
</div>
While an expression like (//E)[2] can't be represented with a CSS selector, an expression like E[2] can be emulated using the :nth-of-type() pseudo-class:
html > body > div > table > tbody > tr:nth-of-type(2) > td:nth-of-type(4)
Works good for me.
//Author: Oleksandr Knyga
function xPathToCss(xpath) {
return xpath
.replace(/\[(\d+?)\]/g, function(s,m1){ return '['+(m1-1)+']'; })
.replace(/\/{2}/g, '')
.replace(/\/+/g, ' > ')
.replace(/#/g, '')
.replace(/\[(\d+)\]/g, ':eq($1)')
.replace(/^\s+/, '');
}
Are you looking for something like this:
http://jsfiddle.net/YZu8D/
.tablecont tr:nth-child(2) td:nth-child(4) {background-color: yellow; }
.tablecont tr:nth-child(3) td:nth-child(4) {background-color: yellow; }
One should learn how to write css selectors, but a for a quick fix, try: cssify
For example, I put in your xpath and it spit out: html > body > div > table > tbody > tr:nth-of-type(2) > td:nth-of-type(4)
Try it out.
I used a table. I applied CSS ID table-4.
Following the html code:
<table border='0' width='100%' id='table-4'>
<tr><td>Date</td><td>Headline</td></tr>
<tr><td>29 DEC</td><td>Dead</td></tr>
<tr><td>30 DEC</td><td>Hit</td></tr>
<tr><td>02 JAN</td><td>Leg</td></tr>
</table>
Here is the style.css:
#table-4 { background-color: #F2F2F2;}
So the whole table's background color is #F2F2F2, but I want a different color for the first row where Date and Headline goes, so how could I modify my CSS for this thing?
You can use :first-child for this. Write like this:
#table-4 tr:first-child{
background:red;
}
Check this http://jsfiddle.net/cbK8J/
#JonathandeM.'s comment is correct. Pop <thead> and <tbody> tags in there, and change the <td> tags in the <thead> row to <th> tags (because HTML says what things are, and they're headings):
<table border='0' width='100%' id='table-4'>
<thead>
<tr><th scope="col">Date</th><th scope="col">Headline</th></tr>
</thead>
<tbody>
<tr><td>29 DEC</td><td>Dead</td></tr>
<tr><td>30 DEC</td><td>Hit</td></tr>
<tr><td>02 JAN</td><td>Leg</td></tr>
</tbody>
</table>
Then the CSS to make the heading row have a different background colour is:
#table-4 thead tr {
background-color: green;
}
you can do this:
HTML:
<td class="whatever">Date</td><td class="whatever">Headline</td>
css:
.whatever { color: #a9a9a9 }
<tr> will do the row, <td> will do the cells.
You have to add id to first tr tag:
<table border='0' width='100%' id='table-4'>
<tr id ="r1" ><td>Date</td><td>Headline</td></tr>
<tr><td>29 DEC</td><td>Dead</td></tr>
<tr><td>30 DEC</td><td>Hit</td></tr>
<tr><td>02 JAN</td><td>Leg</td></tr>
</table>
and then add another css line:
#table-4 #r1 { background-color: blue;}
it will give you blue color
Or you can simply modify only the Html file, no change in css
<table border='0' width='100%' id='table-4'>
<tr><td bgcolor='red' >Date</td><td bgcolor='red'>Headline</td></tr>
<tr><td>29 DEC</td><td>Dead</td></tr>
<tr><td>30 DEC</td><td>Hit</td></tr>
<tr><td>02 JAN</td><td>Leg</td></tr>
</table>