こんにちは、asです。 以前、cssの疑似要素について書きましたが、今回はアスタリスク（*）の便利な使い方をまとめたいと思います！ cssの勉強を始めた時に知りたかった内容です笑 便利な指定方法ってあるんだなー

コンテンツ

cssの頭で下記のように指定されているのを目にすることは多いのではないでしょうか？ （今はこれでリセットすることはあまりないかもですが、、、）

アスタリスク（*）はcssでは全称セレクターやユニバーサルセレクターと呼ばれ、すべての要素という意味となります。 （ちゃんとした名称知らなかった(^_^;)）

上記の *{ margin:0; padding:0;} は、全要素のmarginとpaddingの値を0にする、というリセットの記述です。

通常の要素の他、idやclssとももちろん併用できます！ 後述しますが、いろいろな便利な使い方もあるので、使いこなせればコーディングのスピードが上がること間違いなしです(^^)

それでは早速基本の使い方を見ていきましょう♪

では、下記のhtmlのときの表示はどうなるでしょうか？

正解は、下記です！

See the Pen 全称セレクタ1 by hapilog (@codehapilog) on CodePen.

次に、便利な使い方をいくつか紹介したいと思います！

個人的によく使うのがフロート解除。htmlをいじれないときにも便利です(^^)

ちゃんとフロート解除されました！

クラス名などに〇〇が含まれるすべての要素を指定する。 法則性のあるクラス名をつけたときに便利です。 前後に違うクラス名が入っていてもOKです♪

もう1つはタグのリンク先によって装飾を分けたい時に便利な指定です。 自分のサイトのurlだったら目立たせたりできます笑

こちらも例題htmlを作成しました(^^)♪

↓正解はこちら！

See the Pen 全称セレクタ2 by hapilog (@codehapilog) on CodePen.

ちなみに、先頭指定は次の通りです。 全称セレクターは使いませんが、便利なので。先のhtmlに下記のcssを追記しました。

すると、こうなります↓

See the Pen 全称セレクタ3 by hapilog (@codehapilog) on CodePen.

上の例の5、8行目のlist-item-02やlist-item-03は、先頭は"small"なので追加したcssが当てはまりません。 また、15行目のリンク先は#topなので、追加cssが反映されています(^^)

css3の全称セレクター/ユニバーサルセレクターについてまとめましたが、イメージつかめましたでしょうか？ 今後のマークアップに活かしていただけたら嬉しいです(^^)♪ cssのセレクターには色々と便利なものがあり、記事内でも出てきた>や+、〜（結合子と呼ばれます）についても追ってまとめる予定です！