JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTMLの使い方やサンプルのブログ

CSSの基本 ~ よく使うCSSセレクタの種類 ~

f:id:vw-dsg:20200601063047p:plain

CSSセレクタとは?

CSSセレクタとはスタイルを適用する対象を指定している部分で、下記の赤色文字の部分がCSSセレクタになります。

.sample {
     text-align: center;
     font-weight: bold;
     color: #FFF;
}

よく使うCSSセレクタの種類

セレクタにはいろいろな種類がありますが、よく使うのは以下のセレクタです。

種 類 解 説
すべての要素 *{} ※アスタリスク
HTML要素セレクタ body{}, a{}, td{}, span{}, div{}, h1{} などのHTML要素
IDセレクタ .sample{} ※先頭にドットを付ける
クラスセレクタ #sample{} ※先頭に#を付ける
HTML要素+属性 table[border]{}
HTML要素+ID span[id="aaa"] {} または span.aaa {}
HTML要素+クラス div[class="aaa"] {} または div#aaa {}
複数セレクタ h1,h3,div {} ※カンマ区切り
子要素セレクタ div p{} ※divタグ内のp要素

END