CSSではスタイルを適応する対象を示す部分を「セレクタ」と呼び、さまざま種類のセレクタがあります。
主なセレクタ
CSSで利用できる主なセレクタは以下のものです。
全称セレクタ（ユニバーサルセレクタ）
全称セレクタは「*」をセレクターにするもので、すべての要素に指定したスタイルを適用します。
*{
color:red ;
}
上記はcolor属性をもつすべての要素の文字が赤になります。
要素セレクタ
要素セレクタはHTMLの要素ごとにスタイルを適用します。
h1{
color:red ;
}
上記はh1タグの文字が赤になります。
idセレクタ
idセレクタはHTMLの要素に指定されたidでスタイルを適用します。
idセレクタはセレクタ名に「#」をつけて管理します。
#myid {
color:red ;
}
<div id="myid">aaa</div>
上記はid「myid」で指定されたタグの文字が赤になります。
[st-mybox title=”注意” fontawesome=”fa-exclamation-circle” color=”#ef5350″ bordercolor=”#ef5350″ bgcolor=”#ffebee” borderwidth=”2″ borderradius=”5″ titleweight=”bold”]idセレクタは１ページ内に同じIDを複数使用することはできません。
[/st-mybox]
classセレクタ
classセレクタはHTMLの要素に指定されたclassごとにスタイルを適用します。
classセレクタはセレクタ名に「.」をつけて管理します。
.myclass {
color:red ;
}
<div class="myclass">aaa</div>
上記はclass「myclass」で指定されたタグの文字が赤になります。
[st-mybox title=”注意” fontawesome=”fa-exclamation-circle” color=”#ef5350″ bordercolor=”#ef5350″ bgcolor=”#ffebee” borderwidth=”2″ borderradius=”5″ titleweight=”bold”]classセレクタは１ページ内に同じclassを複数使用することができます。
[/st-mybox]
複数のセレクタを同時に指定する方法
同じプロパティを持つセレクタを同時に指定することで、変更時の影響度を下げることができます。
h1,h2,h3 {
color:red ;
}
上記の例ではh1タグ、h2タグ、h3タグの文字色が赤になります。
子孫セレクタ
最初に指定されたセレクタ内のセレクタにスタイルが適応されます。
.myclass p {
color:red ;
}
<div class="myclass">aaa<p>bbb</p></div>
上記の例では「myclass」セレクタ内にある「p」タグのみ（ここでは「bbb」）の文字色が赤になります。
子セレクタ
子セレクタは親から見て子にあたる（１階層下）のタグのみにスタイルが反映されます。
（２階層以下には反映されません。）
.myclass p {
color:red ;
}
<div class="myclass">aaa<p>bbb<span>ccc</span></p></div>
上記の例では「myclass」セレクタ内にある「p」タグのみ（ここでは「bbb」）の文字色が赤になります。
（「CCC」は文字色が赤になりません。）
以上、CSSの主なセレクタの使い方でした。
