selector)というのを最近知りました。このように見た目がフクロウの顔に見えるからフクロウセレクタというみたいですね。実際に使ってみると、疑似クラス(nth-childとか)を使うよりもシンプルに書けるのでいいですね。実際にフクロウセレクタを使って横並びメニューを実装してみる横並びリストがわかりやすいので実際に使ってみます。最低限の実装、擬似クラスでの実装、フクロウセレクタでの実装を掲載しますので見比べてみてください。わかりやすいようにリスト全体にボーダーをつけてあります。CodePen.リスト全体の幅を考えなければ、正直コレでも良いと思うんですけどね。これで問題になるのは、親要素やページ幅、コンテンツ幅いっぱいにリストを広げたい場合ですね。(その場合素直にflex-box使ったほうがいいですが)見ての通り、左端に余分な余白が付いてしまいます。CodePen.今までこれやってました。全部の要素に共通で指定したスタイルを、擬似クラスを使って特定の要素だけ打ち消すというやり方ですね。問題という程ではないのですが、一度指定したスタイルを後から打ち消すことになるので効率が悪いというか。margin-leftって2回も書いてるの無駄じゃないですか。CodePen.このようにフクロウセレクタを使うことで、無駄にスタイルを打ち消すことなく(同じプロパティを何度も書くことなく)、最初の要素だけ除外してスタイルを当てることができます。注意するべきなのは、子要素として指定するので余白を設定したい要素の親要素が必要になることですね。HTMLの構造次第では、ラッパーを用意する必要が出てくるかもしれません。使いどころは積み重ねる要素この記事では横並びリストを実装してみましたが、積み重ねる要素の余白指定に使えます。ブログでは記事リストとか、フォーム、セクションの積み重ねで一番上だけ余白を付けたくないなどですね。ように子孫要素に指定することで、入れ子になっているリストなど階層構造になっていても適用することができます。シェアするフォローするいのゆうこちらもおすすめ【CSS】要素のスタッキング方法3種Webサイトを制作していれば必ず出てくる、要素のスタッキング。初歩的ではありますが、marginの相殺などで思ったようにスタッキングできないこともあるのではないでしょうか。場当たり的に要素ごとに余白を設定してしまうと、実際に表示されている余白がどの要素に設定され...記事を読む【CSS】属性セレクタの書き方メモ無駄に詳細度を上げない属性セレクタですが、けっこう便利な指定方法があるようなのでメモ。うまく使えばコードも少なくできそうだし単純に便利。使い所がちょっと想像つかないんだけど特定...記事を読む【CSS】リストにhoverしたときにhoverしていない要素のスタイルも変更する方法【コピペOK】ことばでうまく説明できないので、まずは実際に動作してるのを見てください。HTMLの構造としてはemmet記法でいうとul>(li>a)*...記事を読む【CSS】カードやボックスのデザインが野暮ったく見えたときに試したい小技3つ特に非デザイナーの開発者やWeb制作の初心者によくあるとおもうのですが、自分でデザインしたページをいざコーディングしてみたら、思ってたのと違う印象になってしまうこと、ありますよね。コメントをキャンセルメールアドレスが公開されることはありません。Blogのコンテンツは原則として筆者に属します。無断転載、特にまとめサイト、キュレーションサイトへの転載は掲載の方法および分量を問わず厳に禁止します。※オリジナルコンテンツを主とする個人のブログ、ウェブサイト等への正当な引用を妨げるものではありません。