Zenn
🦉

フクロウセレクタ：ユーモアあるCSSテクニック

2024/08/08に公開
CSS
tech

興味深いCSSテクニックを見つけたので紹介します。* + *を使用する手法で、通称「フクロウセレクタ (owl selector) 」と呼ばれています。

フクロウセレクタとは？

* + *を日本語で表すと「任意要素の直後にある任意要素」、つまり「最初以外の要素」となります。
全称セレクタ*と次兄弟結合子+をうまい感じに組み合わせたものになります。

使用例

例A（フクロウセレクタ使用）

.sample > * + * {
  margin-top: 1rem;
}

<div class='sample'>
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
</div>

例B（従来の方法）

<div class='sample'>
  <p>p1</p>
  <p style='margin-top: 1rem'>p2</p>
  <p style='margin-top: 1rem'>p3</p>
</div>

活用シーン

要素の最初以外のものに特定のスタイルを適用したい場合に便利です。例えば、段落と段落の間に空白を開けたいときなどに使えるでしょう。

ただし、このようなテクニカルな手法は混乱を招く可能性もあるため、使用する際は慎重に検討することをおすすめします。

参考

Discussion