This is my table and i like to select all td-s that contains a link.
This selector select all links in td, but i like to style td not link:
#wp-calendar > tbody > tr > td > a:link
My html table:
<table id="wp-calendar">
<tbody>
<tr>
<td colspan="5" class="pad"> </td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td><td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td><td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
</tbody>
</table>
You cannot select an element in CSS based on its children or contents (other than whether its contents are :empty)
You will need to resort to using Javascript, e.g. in jQuery this can be done via, e.g. :has
$( "td:has(a)" )
Related
I'm trying to target a particular <th> within the table below and only that particular <th>
The <th> in question is the <th>Abilities</th> under located after the <th>Weapons</th>
There will be multiple of these in the larger dataset but being able to target in this smaller set of data would be ideal test.
I know :nth-child, :nth-of-type aren't able to help here due to their selector limitations, but is there a way to do so at all?
I'm very much a novice coder and this code is an output from an app with zero support from the developer anymore so highly unlikely the core coding design will ever change.
I also using an external stylesheet which I'd hope the code if there is any would sit in there.
<table cellspacing="-1">
<tr>
<th>Psyker</th>
<th>Cast</th>
<th>Deny</th>
<th>Powers Known</th>
<th>Other</th>
</tr>
<tr>
<td class="profile-name">Primaris Librarian</td>
<td>2</td>
<td>1</td>
<td>Smite, 2 Librarius</td>
<td>-</td>
</tr>
</table>
<table cellspacing="-1">
<tr>
<th>Unit</th>
<th>M</th>
<th>WS</th>
<th>BS</th>
<th>S</th>
<th>T</th>
<th>W</th>
<th>A</th>
<th>Ld</th>
<th>Save</th>
</tr>
<tr>
<td class="profile-name">Primaris Librarian</td>
<td>6"</td>
<td>3+</td>
<td>3+</td>
<td>4</td>
<td>4</td>
<td>5</td>
<td>4</td>
<td>9</td>
<td>3+</td>
</tr>
</table>
<table cellspacing="-1">
<tr>
<th>Weapon</th>
<th>Range</th>
<th>Type</th>
<th>S</th>
<th>AP</th>
<th>D</th>
<th>Abilities</th>
</tr>
<tr>
<td class="profile-name">Bolt pistol</td>
<td>12"</td>
<td>Pistol 1</td>
<td>4</td>
<td>0</td>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td class="profile-name">Force sword</td>
<td>Melee</td>
<td>Melee</td>
<td>+1</td>
<td>-3</td>
<td>D3</td>
<td>-</td>
</tr>
<tr>
<td class="profile-name">Frag grenades</td>
<td>6"</td>
<td>Grenade D6</td>
<td>3</td>
<td>0</td>
<td>1</td>
<td>Blast.</td>
</tr>
<tr>
<td class="profile-name">Krak grenades</td>
<td>6"</td>
<td>Grenade 1</td>
<td>6</td>
<td>-1</td>
<td>D3</td>
<td>-</td>
</tr>
</table>
Easy to achieve in your example HTML, with the help of some pseudo selectors:
table:nth-of-type(3) tr:first-of-type :last-child { color: red; }
<table cellspacing="-1">
<tr>
<th>Psyker</th>
<th>Cast</th>
<th>Deny</th>
<th>Powers Known</th>
<th>Other</th>
</tr>
<tr>
<td class="profile-name">Primaris Librarian</td>
<td>2</td>
<td>1</td>
<td>Smite, 2 Librarius</td>
<td>-</td>
</tr>
</table>
<table cellspacing="-1">
<tr>
<th>Unit</th>
<th>M</th>
<th>WS</th>
<th>BS</th>
<th>S</th>
<th>T</th>
<th>W</th>
<th>A</th>
<th>Ld</th>
<th>Save</th>
</tr>
<tr>
<td class="profile-name">Primaris Librarian</td>
<td>6"</td>
<td>3+</td>
<td>3+</td>
<td>4</td>
<td>4</td>
<td>5</td>
<td>4</td>
<td>9</td>
<td>3+</td>
</tr>
</table>
<table cellspacing="-1">
<tr>
<th>Weapon</th>
<th>Range</th>
<th>Type</th>
<th>S</th>
<th>AP</th>
<th>D</th>
<th>Abilities</th>
</tr>
<tr>
<td class="profile-name">Bolt pistol</td>
<td>12"</td>
<td>Pistol 1</td>
<td>4</td>
<td>0</td>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td class="profile-name">Force sword</td>
<td>Melee</td>
<td>Melee</td>
<td>+1</td>
<td>-3</td>
<td>D3</td>
<td>-</td>
</tr>
<tr>
<td class="profile-name">Frag grenades</td>
<td>6"</td>
<td>Grenade D6</td>
<td>3</td>
<td>0</td>
<td>1</td>
<td>Blast.</td>
</tr>
<tr>
<td class="profile-name">Krak grenades</td>
<td>6"</td>
<td>Grenade 1</td>
<td>6</td>
<td>-1</td>
<td>D3</td>
<td>-</td>
</tr>
</table>
If, due to the dynamic nature of the HTML, using pseudo selectors won't work for you, there sadly is no other way of achieving this other than adding a class, or resorting to JS:
[...document.querySelectorAll('th')].find(th => th.textContent === 'Abilities').style.color = 'red';
<table cellspacing="-1">
<tr>
<th>Psyker</th>
<th>Cast</th>
<th>Deny</th>
<th>Powers Known</th>
<th>Other</th>
</tr>
<tr>
<td class="profile-name">Primaris Librarian</td>
<td>2</td>
<td>1</td>
<td>Smite, 2 Librarius</td>
<td>-</td>
</tr>
</table>
<table cellspacing="-1">
<tr>
<th>Unit</th>
<th>M</th>
<th>WS</th>
<th>BS</th>
<th>S</th>
<th>T</th>
<th>W</th>
<th>A</th>
<th>Ld</th>
<th>Save</th>
</tr>
<tr>
<td class="profile-name">Primaris Librarian</td>
<td>6"</td>
<td>3+</td>
<td>3+</td>
<td>4</td>
<td>4</td>
<td>5</td>
<td>4</td>
<td>9</td>
<td>3+</td>
</tr>
</table>
<table cellspacing="-1">
<tr>
<th>Weapon</th>
<th>Range</th>
<th>Type</th>
<th>S</th>
<th>AP</th>
<th>D</th>
<th>Abilities</th>
</tr>
<tr>
<td class="profile-name">Bolt pistol</td>
<td>12"</td>
<td>Pistol 1</td>
<td>4</td>
<td>0</td>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td class="profile-name">Force sword</td>
<td>Melee</td>
<td>Melee</td>
<td>+1</td>
<td>-3</td>
<td>D3</td>
<td>-</td>
</tr>
<tr>
<td class="profile-name">Frag grenades</td>
<td>6"</td>
<td>Grenade D6</td>
<td>3</td>
<td>0</td>
<td>1</td>
<td>Blast.</td>
</tr>
<tr>
<td class="profile-name">Krak grenades</td>
<td>6"</td>
<td>Grenade 1</td>
<td>6</td>
<td>-1</td>
<td>D3</td>
<td>-</td>
</tr>
</table>
If you're able to add html to the existing table structure the easiest thing to do would be to put a class on the <th> that your trying to target. <th class="abilities">Abilities</th>
With the class added you can then apply styles to that class and they will apply only to any element in the table that you have assigned that class name to.
Then adding this class with the styles you want to your css sheet should do the trick.
.abilities {
custom css styles here!
}
EDIT
Because you cant add styles directly to the existing HTML structure you could use Javascript or jQuery to crawl the page contents and find the word "Abilities" the code for that might look something like this
jQuery('th:contains("Abilities")').addClass('customClassName');
There might be some playing around needed to get it functioning exactly the way you want but this could be an option
the :has() Selector might also be usefull
It should be like
It should be 4 rows and 3 colums. In first column centrall cell takes 2 cells. In second it should be 1 row. And third the same as first
I have this code
<table border="1" width="100%">
<thead></thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="4">2</td>
<td>3</td>
</tr>
<tr>
<td rowspawn="2">4</td>
<td rowspawn="2">5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
But it looks like this
I am not 100% sure what you are after however, does this give you what you want?
<table border="1" width="100%">
<thead></thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="4">2</td>
<td>3</td>
</tr>
<tr>
<td style="height:200px;" rowspawn="2">4</td>
<td rowspawn="2">5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
<table height="200px" width="900px" border="1px solid black">
<tr>
<td></td>
<td rowspan="4"></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Try this code. It Works.
I am using anchor elemnts in an html table and want to add some padding to the top of the viewport. I figured out, that I can place the anchor in a dummy DIV element inside of the TD element to achieve this. However I also want to highlight the targets table row.
How can I achieve this without javascript?
I have tried several solutions from
HTML position:fixed page header and in-page anchors,
but they all do not work well in html tables.
Here is some minimal working example.
The "D" anchor has correct highlighting, but positioning does not
work.
The "E" anchor has correct positioning, but no highlighting.
tr:target {
color: #ee4444;
position: relative;
top: -40px;
}
div:target {
color: #ee4444;
position: relative;
top: -40px;
}
go to D go to E
<table>
<tr>
<th>Symbol</th>
<th>1932 ITU/ICAN Phonetic</th>
</tr>
<tr>
<td>A</td>
<td>Amsterdam</td>
</tr>
<tr>
<td>B</td>
<td>Baltimore</td>
</tr>
<tr>
<td>C</td>
<td>Casablanca</td>
</tr>
<tr id="D">
<td>D</td>
<td>Denmark</td>
</tr>
<tr>
<td>
<div id="E"></div>E</td>
<td>Edison</td>
</tr>
<tr>
<td>F</td>
<td>Florida</td>
</tr>
<tr>
<td>G</td>
<td>Gallipoli</td>
</tr>
<tr>
<td>H</td>
<td>Havana</td>
</tr>
<tr>
<td>I</td>
<td>Italia</td>
</tr>
<tr>
<td>J</td>
<td>Jerusalem</td>
</tr>
<tr>
<td>K</td>
<td>Kilogramme</td>
</tr>
<tr>
<td>L</td>
<td>Liverpool</td>
</tr>
<tr>
<td>M</td>
<td>Madagascar</td>
</tr>
<tr>
<td>N</td>
<td>New York</td>
</tr>
<tr>
<td>O</td>
<td>Oslo</td>
</tr>
<tr>
<td>P</td>
<td>Paris</td>
</tr>
<tr>
<td>Q</td>
<td>Quebec</td>
</tr>
<tr>
<td>R</td>
<td>Roma</td>
</tr>
<tr>
<td>S</td>
<td>Santiago</td>
</tr>
<tr>
<td>T</td>
<td>Tripoli</td>
</tr>
<tr>
<td>U</td>
<td>Upsala</td>
</tr>
<tr>
<td>V</td>
<td>Valencia</td>
</tr>
<tr>
<td>W</td>
<td>Washington</td>
</tr>
<tr>
<td>X</td>
<td>Xanthippe</td>
</tr>
<tr>
<td>Y</td>
<td>Yokohama</td>
</tr>
<tr>
<td>Z</td>
<td>Zurich</td>
</tr>
</table>
The intended behaviour can be achieved if you consider combining both the initial solutions attempted into one standard, as demonstrated by the code snippet embedded below.
Create separate table-rows for your anchor points, assign your
respective ids to these elements.
Use the adjacent sibling combinator Ref (+) to
declare your pseudo-selector :target styles
Declare your anchor point table-row with absolute positioning and
use margin-top property values to offset the position instead of
the top property (as this will position the element n question
relative to the document or the closest containing/parent element with a relative positioning)
Code Snippet Demonstration:
table {
border-spacing: 0;
}
.anchor-row:target + tr {
color: #ee4444;
}
.anchor-row {
position: absolute;
margin-top: -40px;
}
go to D go to E
<table>
<tr>
<th>Symbol</th>
<th>1932 ITU/ICAN Phonetic</th>
</tr>
<tr>
<td>A</td>
<td>Amsterdam</td>
</tr>
<tr>
<td>B</td>
<td>Baltimore</td>
</tr>
<tr>
<td>C</td>
<td>Casablanca</td>
</tr>
<tr class="anchor-row" id="D">
<td colspan="2"></td>
</tr>
<tr>
<td>D</td>
<td>Denmark</td>
</tr>
<tr class="anchor-row" id="E">
<td colspan="2"></td>
</tr>
<tr>
<td>E</td>
<td>Edison</td>
</tr>
<tr>
<td>F</td>
<td>Florida</td>
</tr>
<tr>
<td>G</td>
<td>Gallipoli</td>
</tr>
<tr>
<td>H</td>
<td>Havana</td>
</tr>
<tr>
<td>I</td>
<td>Italia</td>
</tr>
<tr>
<td>J</td>
<td>Jerusalem</td>
</tr>
<tr>
<td>K</td>
<td>Kilogramme</td>
</tr>
<tr>
<td>L</td>
<td>Liverpool</td>
</tr>
<tr>
<td>M</td>
<td>Madagascar</td>
</tr>
<tr>
<td>N</td>
<td>New York</td>
</tr>
<tr>
<td>O</td>
<td>Oslo</td>
</tr>
<tr>
<td>P</td>
<td>Paris</td>
</tr>
<tr>
<td>Q</td>
<td>Quebec</td>
</tr>
<tr>
<td>R</td>
<td>Roma</td>
</tr>
<tr>
<td>S</td>
<td>Santiago</td>
</tr>
<tr>
<td>T</td>
<td>Tripoli</td>
</tr>
<tr>
<td>U</td>
<td>Upsala</td>
</tr>
<tr>
<td>V</td>
<td>Valencia</td>
</tr>
<tr>
<td>W</td>
<td>Washington</td>
</tr>
<tr>
<td>X</td>
<td>Xanthippe</td>
</tr>
<tr>
<td>Y</td>
<td>Yokohama</td>
</tr>
<tr>
<td>Z</td>
<td>Zurich</td>
</tr>
</table>
You can try below this.
tr:target {
color: #ee4444;
position:relative;
top:0px;
}
span:target {
color: #ee4444;
position:relative;
top:0px;
}
<tr id="D"><td>D</td><td>Denmark</td></tr>
<tr><td><span id="E">hello</span>E</td><td>Edison</td></tr>
I do not understand how to use the two pseudo-classes. I want to change the black background to the row with cells 3,3,3.
tbody tr:not(:empty):first-of-type td {
background: black;
}
<table>
<tr>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
</tr>
</table>
Why is background not applicable?
Cells "3" are in the second to last row. To select that second to last row, you should use :nth-last-child() as in:
edit2: <nope tbody is created as an anonymous element by browsers so you can selecttbody somethingwithout any tbody in a table> As stated by #Esko in a comment to your question, you don't have a tbody element in your HTML code. You should then remove it from the selector. tr can only be found in a table so it's unnecessary to add table to the left of your selector (but you can).</nope>
Note 1: none of your tr is/are empty: they contain whitespace and thus are non-empty.
<tr></tr> and <tr><!-- some comment --></tr>: both empty
<tr> </tr>: NOT empty
Note 2: :first-of-type would, in your code select the very first tr, which is the one with no td inside (if it had td children, it'd still be the first of its type)
tr:nth-last-child(2) td {
background:black;
}
<table>
<tr>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
</tr>
</table>
Using CSS, I want to format a table like this:
The most difficult part is to have a black background for all the cells over a long diagonal: the cells where <row nr> = <column nr> + 1 excluding the first row. I want to use the same CSS for different tables which are similar but with a different number of rows and columns.
Can this be done using CSS only? How?
fwiw, the table's HTML code:
<table>
<tr>
<td>#</td> <td>name</td>
<td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td>
<td>total</td> <td>//</td>
</tr>
<tr>
<td>1</td> <td>abc</td>
<td>X</td> <td>9</td> <td>11</td> <td>8</td> <td>10</td>
<td>38</td> <td>10</td>
</tr>
<tr>
<td>2</td> <td>defgh</td>
<td>7</td> <td>X</td> <td>8</td> <td>10</td> <td>10</td>
<td>35</td> <td>9</td>
</tr>
<tr>
<td>3</td> <td>ijk lmn</td>
<td>5</td> <td>8</td> <td>X</td> <td>9</td> <td>11</td>
<td>33</td> <td>9</td>
</tr>
<tr>
<td>4</td> <td>op qr st uv</td>
<td>8</td> <td>6</td> <td>7</td> <td>X</td> <td>12</td>
<td>33</td> <td>7</td>
</tr>
<tr>
<td>5</td> <td>wxyz</td>
<td>6</td> <td>6</td> <td>5</td> <td>4</td> <td>X</td>
<td>21</td> <td>5</td>
</tr>
</table>
The explicit way would be:
.diagonal tbody tr:nth-child(1) td:nth-child(3),
.diagonal tbody tr:nth-child(2) td:nth-child(4),
.diagonal tbody tr:nth-child(3) td:nth-child(5),
.diagonal tbody tr:nth-child(4) td:nth-child(6),
.diagonal tbody tr:nth-child(5) td:nth-child(7),
.diagonal tbody tr:nth-child(6) td:nth-child(8) {
background-color: black;
}
http://jsfiddle.net/9shebq2h/3/
And that can be extended to include the greatest width needed for your table with additional selectors (as the OP has already pointed out in a comment).
Assuming you go with SCSS, you can just do:
#for $i from 2 through 7 {
tr:nth-child($i) td:nth-child($i + 1) {
background-color: black;
}
}
SCSS works like a programming language. It saves you from writing copious amount of repetitive CSS. It needs a preprocessor, so you just need to find what fits within your tool chain.