.cssファイル、又は<style>要素内のCSSから、.htmlファイル内のスタイルを適用する要素を指定する為に、セレクタというものを使用します。
一旦CSSの書き方のおさらいです。
[セレクタ] {
[プロパティ]: [値];
}このセレクタで指定した要素に{ }内のプロパティ、値が反映されることになります。
セレクタには以下のような種類があります。
単一のセレクタ
要素によるセレクタ
セレクタにHTMLの要素名を直接指定します。
指定した要素が複数あれば、すべての要素にスタイルが指定されます。
<p>文字色がピンクになります</p>p {
color: pink;
}クラスによるセレクタ
HTML要素に任意のclass属性を指定し、セレクタに.[指定したクラス名]と指定します。
要素の種類に関わらず、class属性値の一致する全ての要素にスタイルが反映されます。
<p class="txt">文字色がピンクになります</p>
<div class="txt">これも文字色がピンクになります</div>.txt {
color: pink;
}class属性は半角スペースで区切り、複数追加する事もできます。
<p class="txt txt2">文字色がピンク、背景色が黒になります</p>.txt {
color: pink;
}
.txt2 {
background-color: black;
}また、[要素].[クラス名]とすることで特定のクラスを持つ要素を指定することができます。
<p class="txt">文字色がピンクになります</p>
<p>文字色はデフォルトのままです</p>
<span class="txt">文字色はデフォルトのままです</span>p.txt{
color: pink;
}IDによるセレクタ
HTML要素にid属性を任意に指定し、セレクタに#[指定したid名]を指定します。
※id属性はhtmlファイル内において一意でなければなりません(同じid属性がhtmlに複数指定されているのはNG)。
<p id="txt">文字色がピンクになります</p>#txt {
color: pink;
}また、[要素]#[クラス名]とすることで特定のIDを持つ要素を指定することができます。
<p id="txt">文字色がピンクになります</p>
<p>文字色はデフォルトのままです</p>
<span class="txt">文字色はデフォルトのままです</span>p#txt{
color: pink;
}再利用できないので私はスタイルの適用にidは使っていません。。クラスはcssによるスタイルの設定の為、IDはjavascriptによる動作を付ける為と使い分けています。
一般的なWEBサイトの制作では、同じようなスタイルを当てたい要素は複数ある事が多く、クラスを適用するのが適し、javascriptによる動き等を付けたい場合は単一の要素に対するものが多い為です。例外も出てくる事はありますが、そのようなルールを予め決めておくことで、後々の保守性に役立つと考えています。
属性によるセレクタ
要素名の直後に[属性名]をつけたり、[属性名]=[属性値]をつけることで、特定の属性を持つ要素や、特定の属性で特定の属性値を持つ要素を指定できます。
フォームでrequireのついている要素、のような形で使うことが多いです。
<label>
入力必須項目です
<input type="text" require>
</label>
<label>
メールアドレス
<input type="email">
</label>input[require] {
border-color: red;
}
input[type=email]{
background-color: #FFBBFF;
}ユニバーサルセレクタ
*で、全ての要素を選択するセレクタになります。
* {
font-size: 16px;
}クラス、IDによるセレクタ、後述する疑似クラスは、単体で記述すると、暗黙的にこのユニバーサルセレクタとの組合せになります。例えば.txtは*.txtと等価です。
セレクターリスト
単一のセレクタを,カンマ区切りで指定することで、複数の要素を指定できます。
h2, h3{
background-color: blue;
}組み合わせのセレクタ
単一のセレクタを組み合わせて、ある要素の子・兄弟等を指定したセレクタとすることができます。
子孫要素全て
ある要素の中に入る子孫要素を指定します。子要素のみならず、孫以降の要素にもスタイルが適用されます。
[親要素を指すセレクタ] [子孫要素を指すセレクタ]のようにセレクタの間に半角スペースを入れます。
<body>
<p>文字色がピンクになります</p>
<div>
<p>文字色がピンクになります</p>
</div>
<body>/* bodyの中に入る全てのp要素を選択 */
body p{
color: pink;
}直下の子要素
ある要素の直接の子要素を指定します。孫要素以降は適用されません。
[親要素を指すセレクタ] > [子要素を指すセレクタ]のように>を入れます。
<body>
<div>
<p>文字色は初期値のままです</p>
</div>
<p>文字色がピンクになります</p>
</body>/* bodyの直下にあるp要素を選択。孫以降の要素は関係なし */
body > p{
color: pink;
}隣接する兄弟要素
同じ階層内で、ある要素(兄)の直後にある要素(弟)を指定します。
[兄要素を指すセレクタ] + [弟要素を指すセレクタ]のように+を入れます。
<div>
<p class="ob">ここが兄要素です</p>
<p>ここの文字色が変わります</p>
<p>ここの文字色は変わりません</p>
<p>ここの文字色は変わりません</p>
</div>
<p>ここの文字色は変わりません</p>/* obクラスの要素の直後のp要素を選択 */
.ob + p {
color: pink;
}全ての兄弟要素
同じ階層で、ある要素(兄)のその後に続く要素(弟)を指定します。
[兄要素を指すセレクタ] ~ [弟要素を指すセレクタ]のように~を入れます。
<div>
<p class="ob">ここが兄要素です</p>
<p>ここの文字色が変わります</p>
<p>ここの文字色も変わります</p>
<p>ここの文字色も変わります</p>
</div>
<p>ここの文字色は変わりません</p>/* obクラスの後に続くすべてのp要素を選択 */
.ob ~ p {
color: pink;
}次の記事
疑似クラス、疑似要素について紹介します！
