WP Demo

作成日 :

3-1.parent-child-driven-* スタイル

親子関係で連動して指定するスタイルや、ある特定の子要素が存在する場合の親子要素のスタイル指定

child-driven-position スタイル – position の親子指定

子要素にクラス名「child-driven-position」を指定して、擬似クラス「:has()」により親要素を指定する。

top-left
top-right
bottom-right
bottom-left
center
style=”top: 1em; right: 6em;”
<div style="background: linear-gradient(225deg, rgb(249, 217, 128), rgb(223, 235, 182), rgb(255, 255, 255));">
  <div class="child-driven-position-top-left">top-left</div>
  <div class="child-driven-position-top-right">top-right</div>
  <div class="child-driven-position-bottom-right">bottom-right</div>
  <div class="child-driven-position-bottom-left">bottom-left</div>
  <div class="child-driven-position-center">center</div>
  <div class="child-driven-position" style="top: 1em; right: 6em;">style="top: 1em; right: 6em;"</div>
</div>
COPY
/* 🔸 child-driven（子要素起点）スタイル */
:has(> [class="child-driven-position"]) {
  position: relative; /* サイズなし */
  min-height: 6em;
}

/* 🔸 共通 子要素の基本指定 */
[class="child-driven-position"] {
  position: absolute; /* 最小サイズ */
}

/* 🔸 個別指定 四隅 中央 */
.child-driven-position-top-left {
  top: 0;
  left: 0;
}

.child-driven-position-top-right {
  top: 0;
  right: 0;
}
.child-driven-position-bottom-right {
  bottom: 0;
  right: 0;
}

.child-driven-position-bottom-left {
  bottom: 0;
  left: 0;
}

.child-driven-position-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
COPY

parent-driven-scroll スタイル – オーバーフロースクロールの親子指定

親要素にクラス名「parent-driven-scroll」を指定して、子要素が親要素やデバイスのサイズをオーバーフローすると、スクロールによりレイアウトを維持する。

ththththth
parent-driven-scroll スタイル –オーバーフロースクロールの親子指定
親要素の指定により、子要素が親要素やデバイスのサイズをオーバーフローするとスクロールによりレイアウトを維持する
 
<div class="parent-driven-scroll-x" style="width: 20em">
  <table class="table-base border">
    <thead>
      <tr><th>th</th><th>th</th><th>th</th><th>th</th><th>th</th></tr>
    </thead>
    <tbody>
      <tr><td>parent-driven-scroll スタイル -</td><td colspan="4">オーバーフロースクロールの親子指定</td></tr>
      <tr><td>親要素の指定により、子要素が</td><td>親要素やデバイスのサイズを</td><td>オーバーフローすると</td><td>スクロールにより</td><td>レイアウトを維持する</td></tr>
    </tbody>
  </table>
</div>
COPY
/* 🔸 オーバーフロースクロール */

/* 横 */
/* コンテンツ 自動改行 */
.parent-driven-scroll-x {
  overflow-x: auto;
  width: 20em;
  white-space: nowrap;
}

/* コンテンツ改行あり */
.parent-driven-scroll-x-wrap {
  overflow-x: auto;
  width: 100%;
  display: block;
}

/* 縦 */
.parent-driven-scroll-y {
  overflow-y: auto;
  height: 100%;
}

/* テーブル 横 改行なし*/
.parent-driven-scroll-x table td,
.parent-driven-scroll-x table th {
  white-space: nowrap;
}

/* pre 横 改行なし */
.parent-driven-scroll-x-wrap pre {
  white-space: pre !important;
  width: max-content; 
  min-width: 100%;
}
COPY

その他（記事カード　重要　エラー）

/* 子要素に画像がある場合のみ、親の余白をなくす（記事カードなど）*/
.card:has(.child-driven-full-bleed) {
  padding: 0;
  overflow: hidden;
}

/* 子要素に「重要（必読）」がある場合のみ、親の枠線や背景を強調する */
.section-box:has(.child-driven-alert) {
  border: 2px solid red;
  background-color: #fff5f5;
}

/* 子要素（入力フォーム）が「エラー状態」の時だけ、親のラベルを赤くする */
.field-group:has(.child-driven-error-input:invalid) {
  color: red;
  font-weight: bold;
}
COPY