cssを学習し始めのころに様々な記号が出てきて疑問に思いませんか？
今回はそんな記号について解説していきたいと思います。
こちらもCHECK
-
-
【css】指定したとおりにブラウザの表示が変わらないときの解決方法！
cssを記入していて、ちゃんと記述したのにブラウザで確認してみると適応されていないなんてことはありませんか？ そんな時は適応されていない箇所のHTML部を確認してみましょう！cssには表示させるための ...
続きを見る
『*』の意味
『*』は全ての要素を指定するときに使います。
<div>はじめの内容</div>
<p>次の内容</p>
<style>
*{
color:red;
}
</style>
はじめの内容
次の内容
『#』の意味
『#』は同じID名を持つ要素を指定するときに使用します。
<div id="test">はじめの内容</div>
<p>次の内容</p>
<style>
#test{
color:red;
}
</style>
はじめの内容
次の内容
また『要素名#ID名』と記載することにより、ID名が付与された要素を指定することもできます。
<div id="test">はじめの内容</div>
<p>次の内容</p>
<p id="test">その次の内容</p>
<style>
p#test{
color:red;
}
</style>
はじめの内容
次の内容
その次の内容
『.』(ドット)の意味
『.』は同じクラス名を持つ要素を指定するときに使用します。
<div class="test">はじめの内容</div>
<p>次の内容</p>
<style>
.test{
color:red;
}
</style>
はじめの内容
次の内容
また『#』ID名と同じように『要素名.クラス名』とすることで、クラス名が付与された要素を指定できます。
p.test{
color:red;
}
『,』（カンマ）の意味
『,』は複数の要素を指定するときに使用します。
<span>はじめの内容</span>
<p>次の内容</p>
<style>
p,span{
color:red;
}
</style>
はじめの内容
次の内容
カンマがないのに二つのセレクタが並んでいる時の意味
この場合、『セレクタ 半角スペース セレクタ』と指定することで、一つ目のセレクタの子要素を指定することができます。
<p>はじめの内容</p>
<span>
<p>つぎの内容</p>
</span>
<style>
span p{
color:red;
}
</style>
はじめの内容
次の内容
『>』の意味
『>』はひとつ前の『セレクタ 半角スペース セレクタ』と指定する場合の半角スペースを>に置き換えただけで意味は変わりません。
span>p{
color:red;
}
『:hover』の意味
『:hover』はマウスオーバーしたときに色を変えたり、アニメーションをさせたりするときに使用します。
<p>マウスオーバーで赤色に</p>
<style>
p:hover{
color:red;
}
</style>
まとめ
cssの中には様々な記号が出てきます。今回はよく使用するであろう物を紹介しましたが、まだまだcssには記号が出てきます。
一つ一つの意味を理解して適切な記載をしましょう。
の意味 『,』（カンマ）の意){kind=link}