![[CSS]セレクタの指定方法](https://techmemo.biz/wp-content/uploads/2012/11/N811_higewoijirudansei500-thumb-750x500-2175.jpg "[CSS]セレクタの指定方法")
セレクタの指定方法は様々あって、非常に複雑な構成にすることも可能です。よく使う基本的な書き方について説明いたします。
セレクタの指定方法は、大きく分けて4通りあります。
- アスタリスクで指定
- HTMLのタグで指定
- クラスで指定
- IDで指定
実際に以下のようなHTMLがあると仮定して説明していきます。
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css" /> <title>セレクタの指定方法</title> </head> <body> <h1>セレクタとは</h1> <p>CSSで要素を指定する記述のことです。</p> <div class="hoge">本記事では<span id="foo">セレクタ</span>について記述します。</div> </body> </html>
アスタリスクで指定
すべての要素に対して同じスタイルを適用する時は、セレクタにアスタリスク(*)を使います。
* {
color:red;
}
このようにアスタリスクをセレクタに書くと、すべての要素が同じスタイルになります。
HTMLのタグで指定
セレクタの指定には、HTMLのタグをそのまま使うことができます。
h1{
color:blue;
}
p{
color:red;
}
div{
font-size:8px;
}
このようにタグをセレクタとして指定することで、h1要素が青色、p要素が赤色、div要素のフォントサイズが8pxになります。
クラスで指定
クラスに対してスタイルを適用する場合、頭にピリオド(.)をつけたクラス名をセレクタに指定します。
.hoge{
background-color:yellow;
}
このように記述することで、クラス”hoge”の背景色が黄色になります。
IDで指定
指定されているIDに対してスタイルを変更したい場合、頭にシャープ(#)をつけたID名をセレクタに指定します。
#foo{
font-style:italic;
font-size:20px;
}
このように記述すると、fooのスタイルを”斜体”で”文字の大きさを20px”に変更することができます。
他にももっと複雑な指定方法もありますが、まずはこれらの方法を押さえておけば、なんとなくセレクタの指定方法がイメージできると思います。他の複雑な指定方法も覚えてくると効率が良くなりますが、最初から複雑な指定をすると混乱してくるので、地道に色んなスタイルを試して覚えていくのがいいでしょう。