[教えてエンジニア父ちゃん！] ユニバーサルセレクタとフクロウセレクタ
セレクタを使いこなせるようになりたい！
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;
}
このように表示されます。
コメント
コメントを投稿