解決したいこと親要素のdata属性の値を子要素で使いたいのですが解決方法はないでしょうか？やりたいこと <section data-only="a"> <h3&gt...

@ygsiro (シロ)posted at 2024-11-24

親要素のdata-***属性の値を子要素で使いたい

Q&A

解決したいこと

親要素のdata属性の値を子要素で使いたいのですが解決方法はないでしょうか？

やりたいこと

<section data-only="a">
  <h3>Title</h3>
</section>

/* うまくいかないコード */
section[data-only] > h3::after{
  content: attr(data-only);
  /*親要素のdata-only属性の値を取得したい*/

}

上記のようなCSSではh3要素のdata-only属性の値を取り出そうとするので空になります。

ためしたこと

変数にいったん取り出して子要素で使えないか試してみましたが無理でした。

section[data-only]{
  --data: attr(data-only);
  h3::after {
    content: var(--data);
  }
}

1Answer

@benjuwan posted at 2024-11-24

See the Pen qiita_ques_20241124 by benjuwan (@benjuwan) on CodePen.

筆者の知識不足もあるかもしれませんがCSSだけでは難しい内容だと思います。
（CSSは昨今発展してカスタム変数や柔軟なアニメーションなど充実していますが、そもそもスタイリングを領域とするコンピュータ言語なので）

そこでJavaScriptを使って実装してみました。
注釈（コメントアウト）にも書いていますが今回は単純に質問内容に回答したいためにinsertAdjacentTextメソッドを用いています。
しかし実際に使用される場合はcreateelementで要素を生成し、appendChildで追加したほうが無難かと思います。

少しでもお役に立てれば幸いです。

1Like

Comments

@ygsiro
Questioner
JavaScript の手段もありですね！自分しか使わないのでその方法を使用してみます

Are you sure you want to delete the question?