株式会社I-SEED(アイシード)|大阪・心斎橋のWEB制作集団

新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をフォローする

WEBの事でお悩みなら、まずは一度 I-SEED にご相談ください!

I-SEED は 「デザイン」「SEOマーケティング」「システム開発」を併せ持つWEB制作会社です。

コーポレート、オウンドメディア、ECなど様々な分野のサイト制作を得意としています。システム開発も自社で行っているので、様々なプロジェクトに柔軟かつ迅速に対応できるのが強みです。

大阪に良いWEB制作会社がいないとお困りの方は、是非一度 I-SEED までご相談ください。

I-SEED では随時採用も行っています。各種エンジニア、ディレクター、デザイナー、ライター、マーケターの全職種を募集しています。ご興味がある方は採用ページもご覧ください。

ブログページに戻る