[教えてエンジニア父ちゃん!] ユニバーサルセレクタとフクロウセレクタ

先日からの学びで、flexを使うとサイトのデザインの自由度は増すということがわかりました。 コーディングするときにセレクタの使い方がいまいちわからないことがあります。 こちらのブログに書いた、flexを学んだときに登場したセレクタを中心に、今日は父から教わったセレクタのことをまとめていきます。

セレクタを使いこなせるようになりたい!

html
<div class="flex"> <div><a href="toppage.html">トップ</a></div> <div><a href="greeting.html">ご挨拶</a></div> <div><a href="profile.html">プロフィール</a></div> <div><a href="contact.html">お問い合わせ</a></div> </div>
css
.flex { display: flex; justify-content: center; gap: 10px; } .flex >* { border: 1px solid black; padding: 10px; width: 120px; text-align: center; }
表示するとこうなります。
.flex >*
これは、flex要素のすぐ下だけに指示を出しています。 このセレクタを中心に、今日は2種類のセレクタの使い方を学んでいきます。

ユニバーサルセレクタ

先ほどの例から子孫セレクタ(>)を外して、アスタリスク(*)だけをセレクタにすると全ての要素が対象となります。 これをユニバーサルセレクタと言います。
.flex * {
この場合だと、flexのクラスの中の全ての要素になるので、先ほどの4つのdivタグに加えてaタグも対象となるので、このような表示になります。
.flex { display: flex; justify-content: center; gap: 10px; } .flex * { border: 1px solid black; padding: 10px; width: 120px; text-align: center; }
このように表示されます。

フクロウセレクタ

アスタリスクが一つだけで、全ての要素が対象となりました。
.flex *+*
隣接セレクタ(+)とアスタリスクもう一つ付け加えたのを、フクロウセレクタと呼びます。 アスタリスクが目でプラス記号がくちばしに見えるからなのだそうです。 これは一番最初の要素以外を適用します。 実装してみてみましょう。
.flex { display: flex; justify-content: center; gap: 10px; } .flex *+* { border: 1px solid black; padding: 10px; width: 120px; text-align: center; }
このように表示されます。
これは使い方が色々ありそうなので、使ってみてわかったことがあったらまたブログにしたいと思います。

あとがき

flexとセレクタをうまく使用できるようになったら、いろんなデザインが作れるようになるなあと感じました。 色々試しながらもっと理解を深めて活用していきたいです!

コメント

このブログの人気の投稿

[クレンジングと洗顔方法] 美肌になりたい!

謎解きの魅力

免許証の裏面で意思表示してみた