åçµåå
Experimental: ããã¯å®é¨çãªæ©è½ã§ãã
æ¬çªã§ä½¿ç¨ããåã«ãã©ã¦ã¶ã¼äºææ§ä¸è¦§è¡¨ããã§ãã¯ãã¦ãã ããã
åçµåå (column combinator, ||) ã¯ã2 ã¤ã® CSS ã»ã¬ã¯ã¿ã¼ã®éã«é
ç½®ããã¾ããåè
ã®ã»ã¬ã¯ã¿ã¼ã«ä¸è´ããåè¦ç´ ã«æå±ãããå¾è
ã®ã»ã¬ã¯ã¿ã¼ã«ä¸è´ããè¦ç´ ã«ä¸è´ãã¾ãã
css
/* 表㮠"selected" ã¯ã©ã¹ã®åã«æå±ããã»ã« */
col.selected||td {
background: gray;
}
æ§æ
css
/* || çµååã®å¨ãã®ãã¯ã¤ãã¹ãã¼ã¹ã¯çç¥å¯è½ã§ããæ¨å¥¨ãããã */
column-selector || cell-selector {
/* ã¹ã¿ã¤ã«ãããã㣠*/
}
ä¾
>HTML
html
<table border="1">
<colgroup>
<col span="2" />
<col class="selected" />
</colgroup>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td colspan="2">D</td>
<td>E</td>
</tr>
<tr>
<td>F</td>
<td colspan="2">G</td>
</tr>
</tbody>
</table>
CSS
css
col.selected||td {
background: gray;
color: white;
font-weight: bold;
}
çµæ
仿§æ¸
| Specification |
|---|
| Selectors Level 4> # selectordef-column> |
ãã©ã¦ã¶ã¼ã®äºææ§
ä»ã®ã¨ããããã®æ©è½ãå®è£ ãã¦ãããã©ã¦ã¶ã¼ã¯ããã¾ããã
é¢é£æ å ±
<col><colgroup>grid:nth-of-type:nth-last-of-type- CSS ã»ã¬ã¯ã¿ã¼ã¢ã¸ã¥ã¼ã«