CSSのアスタリスクの意味・使い方【アスタリスクは4種類】
CSSを見ているとアスタリスクが登場することがあります。
「アスタリスクってなに？どうやって使うの？」
CSSではアスタリスクには4つの意味があります。
4種類のアスタリスクの意味、使い方を解説します。
目次
すべての要素を示すセレクタ
*{color: red;}a,div,h1,body,span,p,input,ul,liなどなど、全部のhtmlタグを一度に指定することができます。
ただし「CSSが効かない！」と悩むもとになるので、初心者のうちは使わないことをオススメします。
アスタリスクのメリット
marginやpaddingなどブラウザ側で値が指定されている場合があります。
これらをリセットするとき複数のタグを記載するより「*」アスタリスク一つで済ませることができます。
とにかく全部のhtmlタグを一発で指定できることがメリットです。
下記は「*」アスタリスクで文字色を指定した例です。
pタグ spanタグ
<style>
*{color: red;}
</style>
<div>divタグ <a href="#">aタグ</a></div>
<p>pタグ <span>spanタグ</span></p>アスタリスクのデメリット
CSSによっては継承されるものがあります。「*」アスタリスクで指定したばっかりに継承されず「なんでCSS効かないの!?」と悩む原因になります。
アスタリスクは安易に使わず、リセットする場合でも任意のhtmlを指定かつ最低限のCSSをリセットすることをオススメします。
「*」アスタリスクを指定しない場合
pタグ spanタグ
<style>
div,p{color: black;}
</style>
<div>divタグ <a href="#">aタグ</a></div>
<p>pタグ <span>spanタグ</span></p>
aタグはブラウザで指定されている青色になっています。
文字色を指定するcolorは子要素にも継承されるため、spanは親であるpタグと同じ文字色になります。
「*」アスタリスクを指定した場合
pタグ spanタグ
<style>
*{color: red;}
div,p{color: black;}
</style>
<div>divタグ <a href="#">aタグ</a></div>
<p>pタグ <span>spanタグ</span></p>
aタグはブラウザの指定を無視し、アスタリスクの指定に従います。
文字色を指定するcolorは本来子要素にも継承され同じ色になりますが、アスタリスクでcolorを指定していることで継承されません。
アスタリスクの優先順位
「*」アスタリスクの優先順位は0点です。
「div」や「span」などの要素型セレクタは1点です。
ブラウザの設定より強く、他の任意指定より弱いです。
CSSセレクタの優先順位について詳しくはこちら↓
「*」アスタリスクで全部指定したあとに要素型セレクタで再設定することも可能です。オススメはしませんが。
こんなときに便利
「なんでもいいからhtmlタグ」を指定したいときに便利です。
例えば「なんでもいいから1つめのhtmlタグ」を指定できます。
「div:first-child」だと「1つめがdiv」のときしか指定できません。
「div:first-of-type」だと「1つめのdiv」であるため、2つめ以降になる場合があります。
「*:first-child」だと「なんでもいいから1つめのhtmlタグ」を指定できます。
div:first-child
pタグ
<style>
.example4>div:first-child{
color: red;
}
</style>
<div class="example4">
<p>pタグ</p>
<div>divタグ</div>
</div>div:first-of-type
pタグ
<style>
.example5>div:first-of-type{
color: red;
}
</style>
<div class="example5">
<p>pタグ</p>
<div>divタグ</div>
</div>*:first-child
pタグ
<style>
.example6>*:first-child{
color: red;
}
</style>
<div class="example6">
<p>pタグ</p>
<div>divタグ</div>
</div>CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
属性セレクタにて「～を含む」とき
a[href*="map"]{width:100%;}特定のhtmlタグの属性内に任意の値を含んでいるセレクタを指定することができます。
例えば「href属性内に『map』を含んでいるaタグを指定したい！」というときに使います。
属性セレクタなどの一覧はこちら↓
calcのかけ算
div{width: calc(10% * 3);}数値を指定するときに四則演算できるようになるcalcにおいて「×」かけ算を表す記号です。
calcの使い方について詳しくはこちら↓
コメントアウト
/*ここに自由に記載*/CSS内で「/*」と「*/」の間に書いた文字はないものとして扱われます。これをコメントアウトと呼びます。
このコメントアウトはメモやタイトルとして使ってもいいですし、CSSを一時的に効かなくさせるときにも使えます。
div{
/*margin:10px;*/
}このような記述があったとき、divに「margin:10px」は効きません。
/*
div{
margin:10px;
}
*/上記のように複数行をコメントアウトすることもできます。
ただし、コメントアウトのテキストもCSSの容量を増やすため使いすぎには注意です。
なお、htmlのコメントアウトは<!--コメントアウト-->であり、CSSのコメントアウトとは異なるため注意しましょう。
【まとめ】CSSのアスタリスク
すべての要素を示すセレクタ
*{color: red;}全部のhtmlタグを一度に指定
属性セレクタにて「～を含む」とき
a[href*="map"]{width:100%;}特定のhtmlタグの属性内に任意の値を含んでいるセレクタを指定
calcのかけ算
div{width: calc(10% * 3);}calcにおいてかけ算を表す
コメントアウト
/*ここに自由に記載*/CSS内で「/*」と「*/」の間に書いた文字は ないものとして扱われる
以上、CSSのアスタリスクの意味・使い方を解説しました。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
