From fa974da224041834a7a7fa95d8b0d89a35ec11b3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 6 Jan 2022 09:52:55 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/column_combinator/index.md | 143 +++++++++++++--------------- 1 file changed, 67 insertions(+), 76 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/column_combinator/index.md b/files/ja/web/css/column_combinator/index.md index ef53cb0729..9021e21302 100644 --- a/files/ja/web/css/column_combinator/index.md +++ b/files/ja/web/css/column_combinator/index.md @@ -3,95 +3,86 @@ title: 列結合子 slug: Web/CSS/Column_combinator tags: - CSS - - Experimental - - Reference - - Selectors + - 実験的 + - リファレンス - セレクター - 表 +browser-compat: css.selectors.column translation_of: Web/CSS/Column_combinator --- -
{{CSSRef("Selectors")}}{{Draft}}{{SeeCompatTable}}
+{{CSSRef("Selectors")}}{{SeeCompatTable}} -

列結合子 (column combinator) (||) は、二つの CSS セレクターの間に配置されます。前者のセレクターに一致する列要素に所属する、後者のセレクターに一致する要素に一致します。

+**列結合子** (column combinator, `||`) は、2 つの CSS セレクターの間に配置されます。前者のセレクターに一致する列要素に所属する、後者のセレクターに一致する要素に一致します。 -
/* 表の "selected" クラスの列に所属するセル */
+```css
+/* 表の "selected" クラスの列に所属するセル */
 col.selected || td {
-  background: gray;
+  background: gray;
 }
-
+``` -

構文

+## 構文 -
column-selector || cell-selector {
-  /* スタイルプロパティ */
+```css
+column-selector || cell-selector {
+  /* スタイルプロパティ */
 }
-
- -

Examples

- -

HTML

- -
<table border="1">
-  <colgroup>
-    <col span="2"/>
-    <col class="selected"/>
-  </colgroup>
-  <tbody>
-    <tr>
-      <td>A
-      <td>B
-      <td>C
-    </tr>
-    <tr>
-      <td colspan="2">D</td>
-      <td>E</td>
-    </tr>
-    <tr>
-      <td>F</td>
-      <td colspan="2">G</td>
-    </tr>
-  </tbody>
-</table>
- -

CSS

- -
col.selected || td {
-  background: gray;
-  color: white;
-  font-weight: bold;
-}
- -

結果

- -

{{EmbedLiveSample("Examples", "100%")}}

- -

仕様書

- - - - - - - - - - - - - - - - +``` + +## 例 + +### HTML + +```html +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#the-column-combinator", "column combinator")}}{{Spec2("CSS4 Selectors")}}初回定義
+ + + + + + + + + + + + + + + +
A + B + C +
DE
FG
+``` -

ブラウザーの対応

+### CSS -

{{Compat("css.selectors.column")}}

+```css +col.selected || td { + background: gray; + color: white; + font-weight: bold; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", "100%")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} -

関連情報

+## 関連情報 - +- {{HTMLElement("col")}} +- {{HTMLElement("colgroup")}} +- {{CSSxRef("grid")}} +- {{CSSxRef(":nth-col")}} +- {{CSSxRef(":nth-last-col")}} -- cgit v1.2.3-54-g00ecf