新CSSテクニック「フクロウセレクタ」で均等な間隔を設定しよう

新CSSテクニック「フクロウセレクタ」で均等な間隔を設定しよう

HISAHISA
この記事は、2019年11月25日に編集し、約 1 分で読めます。

最近知った便利なCSSセレクタをご紹介します。

その名は「フクロウセレクタ」です。

フクロウセレクタとは?

連続する2番目以降の要素全てにCSSを効かせるテクニックです。

ユニバーサルセレクタ( * )と、隣接セレクタ( + )を使用して、

* + *

で表記し、これがフクロウの顔に似ていることから「フクロウセレクタ」と名付けれられました。

Axiomatic CSS and Lobotomized Owls
Managing flow content can get unwieldy—too many class selectors can become a specificity headache, nested styling can get redundant, and content editors don’t a...

使用例

article> * + * {
  margin-top: 1em;
}

WordPress でもよく使われる、article のループで使用すると便利です。
最初の article 以外に margin-top: 1em;を設定できます。

まとめ

リセットCSS に入れても良いくらい、便利なセレクタなので覚えておきましょう!

この記事を書いた人
HISA

フロントエンドエンジニアを名乗っています。ゲーム大好き!「格闘ゲーム」や「デジタルカードゲーム」を好みます。大会にもチラホラ参加しています!

HISAをフォローする
ブログページに戻る