CSS【class】～「#○○○」と「.○○○」

セレクタはたくさんの種類があり、効果的に使い分けると、すごく便利です。
そして、セレクタの種類は CSSの優先順位に影響します。
今回は、セレクタの種類についてまとめたいと思います。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

１．CSSでのid名とclass名

CSSのセレクタで、#○○○や.○○○という形をよく目にします。
これは、HTML要素のid属性の値、class属性の値を使って、要素を特定しています。

idとclassはグローバル属性で、HTMLのどの要素にも共通で使える属性です。

（HTML）
<div id="container">
    <p class="colBlue">
        text text text
    </p>
</div>

（CSS）
#container{margin:1em; padding:1em;}
.colBlue{font-size:85%; color:blue;}

CSSでは、ハッシュ（#）はid名を指しています。そして、これが付いたセレクタは、idセレクタとよばれます。
ドット（.）はclass名を指し、これが付いたセレクタは、classセレクタとよばれます。

id名、class名とも、大文字と小文字の区別があります。
ですので、fontRedなど、単語を組み合わせてわかりやすい名前を付けることができます。

id属性で付けた名前は、そのHTMLファイルの中で一度だけ登場する名前です。

id名は、１つのHTMLファイルの中で１回のみ使用可能です。ある１つの要素を特定するために付けられる名前だからです。
HTMLのページ内リンク（<a href=”#id名”>）や、form関連の要素など、要素を特定するためにid名を使う場面は数多く存在します。

class属性で付けた名前は、HTMLファイル内で何度でも使えます。

id名と違って、class名は、色々な要素に同じclass名をつけて、グループ化するために使います。
ですので、class名は、１つ何度も使用されます。

▲目次へ戻る

２．CSSのセレクタの種類

セレクタには色々な種類があり、効果的に使い分けることができれば、大変便利です。
そして、セレクタの種類は CSSの優先順位に影響します。
（優先度のルールについては、別記事でまとめたいと思います。）

セレクタには、次のような種類があります。

要素セレクタ

要素セレクタは、一番単純なセレクタです。
HTML要素名をそのままセレクタにします。
要素セレクタを使うと、HTMLファイル上にあるその要素全部に、同じスタイルの指定ができます。

pre{
    width:auto;
    overflow:scroll;}

idセレクタ

idセレクタは、HTML要素のid属性の名前をセレクタにします。
id名にハッシュ（#）を付けて、#id名の形で指定します。
同じid名は１つのHTMLファイル上に１つしか使えません。

（HTML）
<h1 id="siteId">プログラミング入門レシピ</h1>

（CSS）
h1#siteId{font-size:60px;}

classセレクタ

classセレクタは、HTML要素のclass属性の名前をセレクタにします。
class名にドット（.）を付けて、.class名の形で指定します。
class名は、１つのHTMLファイル上に通常何度も登場し、要素をクラス分けするのに使います。

例えば、<p class=”small”>と<span class=”small”>のように、異なる要素を同じクラスにすることもできます。
この場合、両方ともセレクタは.smallとしてスタイルを指定することができます。
要素を区別したい場合は、p.smallやspan.smallというセレクタを使います。

.small{font-size: 85%;}
span.small{color: blue;} 

この場合、class=”small”とした要素はすべて文字サイズが85％で、その中のspan要素だけ、文字色が青になります。

また、HTMLファイルで、class属性は、半角スペースで区切って複数指定することができます。

<div id="sample" class="small colmun clearfix"> </div>

子孫セレクタ

子孫セレクタは、複数のセレクタを半角スペースで区切って並べて指定します。
a要素の中の、b要素の中の、c要素というように、子孫（子、孫、曾孫…）をより詳しく絞り込めます。

（HTML）
<div id="container">
    <header>
        <div id="description">HTMLとCSSを楽しく理解しよう！</div>
        <h1 id="siteId">プログラミング入門レシピ</h1>
    </header>
</div>

（CSS）
#container header h1 #siteId{font-size:60px;}

また、例えば「div span」としただけで、親のdivの子のspanだけでなく、孫や曾孫…すべてのspanに同じスタイルを適用するという特徴もあります。
子孫セレクタは、代々ずっと受け継がれていきます。

擬似クラス

疑似クラスは、要素の状態によってスタイルを指定することができます。
その要素が今どんな状態か、によってクラス分けするようなイメージです。

セレクタ（要素、id、class）にコロン（:）を付けて、「○○:擬似クラス名」という形で使います。
例えば、a要素の状態（:link や :visited）、要素の中の要素を指定（:first-child や :last-child）、フォーム部品の要素の状態（:checked や :enabled）などでスタイルを決めることができます。

疑似クラスは、セレクタ内のどこにあってもOKです。

下のテキストをマウスオーバーして下さい。

ここの文字色は変わりません（ここはhoverでピンクになります）

htmlは次の通りです。

<style>
    h4#test1 a.test_a:hover span{color:pink;}
</style>

<h4 id="test1">
    <a href="#" class="test_a">
        ここの文字色は変わりません
        <span>（ここはhoverでピンクになります）</span>
    </a>
</h4>

擬似クラスで便利なものに、E:nth-child(n) があります。
Eは要素、nは数字などの値を入れて、n番目の要素を特定します。

div p:nth-child(3){color:red;}

div要素の中の３番目のp要素の文字を赤にする、という指定をしています。

擬似要素

擬似要素は、要素の中の最初の文字、最初の行、などにスタイルを指定したり、存在しない文字や画像を追加してスタイルを指定したりすることができます。
セレクタ（要素、id、class）にコロンを２つ（::）を付けて、「○○::擬似要素名」という形で使います。

擬似要素は、CSS2で導入された当初はコロンが１つ（:）でしたが、CSS3からは、コロンが２つ（::）で記述する形が導入されました。

::before（要素の前にテキストなどのコンテンツを作って、スタイルを適用）
::after（要素の後にテキストなどのコンテンツを作って、スタイルを適用）
::first-letter（要素内の最初の文字にスタイルを適用）
::first-line（要素内の最初の1行にスタイルを適用）
::marker（カウンタ使用時に ::before の代わりに）

擬似要素は、セレクタの最後に付けて使用します。

（CSS）
ul li.new::after{
    content: "CHECK！";
    color: red;
    font-size: 85%;}

（HTML）
<ul id="test">
    <li class="new">テスト１</li>
    <li>テスト２</li>
    <li>テスト３</li>
</ul>

上記は、次のように表示されます。

テスト１ テスト２ テスト３

子セレクタと隣接セレクタ

子セレクタは、要素 > 要素という形で、子供の要素だけを指定します。
子孫セレクタが、全ての子孫を対象とするのに対して、子セレクタは、子供だけを対象とします。

（CSS）
div#test3 > span{color:red;}

（HTML）
<div id="test3">
    子セレクタ サンプル
    <span>（コレは子どもなので、文字はred）</span>
    <p>
        ここはp要素の中
        <span>（コレは孫なので、文字色は変わらず）</span>
    </p>
</div>

隣接セレクタは、要素 + 要素という形で、ある要素の直後に現れる要素だけを指定します。

（CSS）
div#test4{border:solid #ddd 1px; padding:1em;}
div#test4 p{margin:1em 0 0;}
div#test4 h4{color:green; margin-bottom:0; border-bottom: solid 1px green;}
div#test4 h4+p{color:green; margin-top:0; font-size:85%;}

（HTML）
<div id="test4">
    <h4>隣接セレクタサンプル　小見出し（h4）</h4>
    <p>直後のp要素をサブタイトル風に</p>
    <p>それ以外のp要素は普通に</p>
</div>

属性セレクタ

属性セレクタとは、HTML要素の属性がどうなっているかで要素を特定するセレクタです。
属性によって要素を区別できるので、レイアウトする上でとても便利です。

色々な種類がありますが、その中でもよく使うのが、次の３つです。

●要素[属性] 　
この属性セレクタは、ある属性を持っている要素だけを対象にします。
[] は、セレクタ内にいくつでも指定できます。

h2[id][title]{color:red;}

●要素[属性=”値”] 　
この属性セレクタは、ある属性のある値を持っている要素だけを対象にします。
[] は、セレクタ内にいくつでも指定できます。

input[type="submit"][value="送信"]{color:#fff; background:green;}

●要素[属性~=”値”]　
この属性セレクタは、ある属性の値が１つ以上あるとき、ある値を持っている要素だけを対象にします。
[] は、セレクタ内にいくつでも指定できます。

（CSS）
p[class~="small"][class~="sample"]{color:blue;}

（HTML）
<p class="column small sample clearfix">このテキストだけブルー</p>
<p class="column clearfix">このテキストは適用外</p>
<p class="column">このテキストも適用外</p>

全称セレクタ（ユニバーサルセレクタ）

全称セレクタ（ユニバーサルセレクタ）とは、アスタリスク（*）だけのセレクタのことです。
これは、HTMLファイルの全ての要素という意味のセレクタです。

* {margin:0; padding:0;}

以前は、ブラウザのデフォルトスタイルをリセットするために、よく上記のような指定をしていました。
上記の指定では、何もかも全部の要素をmargin:0; padding:0;にします。

しかし、デフォルトで十分なスタイルもある、レンダリングが遅い、などの理由で、このリセット方法は今は使われていません。
必要なリセットだけするのがベストです。

ですので、全称セレクタ（ユニバーサルセレクタ）は、今後はあまり使う機会が無いかもしれません。

▲目次へ戻る