トップページ > TIPS > セレクタとは

CSSレイアウト[TIPS]

セレクタとは

下記のようにCSSの指定の{ }の前にある、言わば名前のような部分を「セレクタ」と言い、
セレクタ { プロパティ : 値 ; } というカタチで使用する。
{ }内の最後の「; (セミコロン)」はプロパティ値指定の終了を表わし、1つのセレクタに対し、複数のプロパティの指定をする時これで区切る。

（例) h1 { color : blue ; } ←h1がセレクタ

セレクタには下記のような種類がある。
HTMLの要素

body, div, span, h1〜6, a, p, ul, li, dl, dt, imgなど、HTMLで用意されている要素。

id属性

idで呼び出すセレクタ。先頭に「# (シャープ)」を付けます。1HTMLに1度しか呼び出せない。
ユーザが好きな名前を付けられる。使える文字は、アルファベット・数字・ハイフン(-)・アンダーバー(_)。
※アンダーバー(_)はNN4.7では無効になるので使わない方が無難。
※数字は、例えば「#2column01」のように2箇所に使うと無効。「#twocolumn01」ならOK。

※例えば、
<h2 id="pankuzu">〜</h2>
他にも使用しているh2の中で、これだけをid指定で特定したいときに使用する。
CSSのセレクタは、このようになっている。
#pankuzu   {（スタイルの指定）}
または、
h2#pankuzu   {（スタイルの指定）}
これは条件付きセレクタとなる。（#pankuzuが指定されている h2要素と条件付けしている）
h2のあとに「スペース」が無い事に注目。「スペース」を入れてしまうと反映されないので要注意。
class属性

classで呼び出すセレクタ。先頭に「. (ピリオド)」を付けます。1HTMLに何度でも呼び出せる。
ユーザが好きな名前を付けられる。使える文字は、アルファベット・数字・ハイフン(-)・アンダーバー(_)。
※アンダーバー(_)はNN4.7では無効になるので使わない方が無難。
※数字は、例えば「.2column01」のように2箇所に使うと無効。「.twocolumn01」ならOK。

※例えば、
<h2 id="pankuzu" class="ex-a ex-b ex-c">〜</h2>
といった具合に、class属性の値は、半角スペース区切りで複数指定できる。id属性があっても指定可能。
CSSのセレクタは、このようになっている。
.ex-a   {（スタイルの指定）}
.ex-b   {（スタイルの指定）}
.ex-c   {（スタイルの指定）}
または、
h2.ex-a   {（スタイルの指定）}
といった具合に、要素と組み合わせて条件付きセレクタにすることも。h2のあとに「スペース」が無いように。
子孫セレクタ（条件付きセレクタ）

セレクタを半角スペースで区切って、子孫を指定するセレクタ。
「#side #sidespace li a」のように「何々の中の何々」と、子孫をターゲットに決めてスタイル指定する。
「CSSの記述の優先度」の[条件付きセレクタ]での説明の通り、条件の多いものほど優先度が高くなる。

※例えば、
#main p span  {（スタイルの指定）}
なら、id名main の要素の中（子孫）の <p> の中（子孫）の <span> に対してスタイルが適用される。
この <span> がたくさんある場合、1つひとつにクラス名をつけるより手間が省けて便利。
疑似クラス

「疑似クラス」は、要素の「状態」によってスタイルが適用される。

リンクに関する疑似クラスの代表的なもの。

a:link（未訪問リンク）
a:visited（訪問済リンク）
a:hover（ロールオーバー時）
a:active（クリック中）

「a」や疑似クラスに関する詳細はこちら→「リンクの指定」

ほかに、
○:focus（フォームの部品などでフォーカス中）
○:lang(en)（ lang(en)（enの他にjp、frなど言語指定）の要素に対して）
○:first-child（ある要素内に「初めてでてくる子要素○」だけに対して）
がある。

疑似要素

疑似クラスと似た、疑似要素というものもある。
「疑似要素」は、「要素の中」の最初の文字や、最初の行などにスタイルを指定したり、
存在しない文字などを追加してスタイルを適用できる。

疑似要素は、疑似クラスと区別するために、CSS3から「::（コロン2つ）」で指定するようになった。
（コロン1つでもブラウザは対応。ただし ::selection だけはコロン2つが必要）

:first-line（最初の1行のみに適用）
:first-letter（最初の1文字のみに適用）
:before（要素の直前に）
:after（要素の直後に）
::selection（ユーザがマウスなどでハイライトした部分に）

例えば、フロートを解除（clearfix）するとき、本サイトでは「<div class="c-both"></div> 」と、clear: both;を指定したクラスを用意しておき、解除のたびに呼び出して使う方法を紹介しているが、
下記のような「:after疑似要素」を使う方法もある。

div:after {
content:""; display:table; clear:both;
}

これは、div要素の中でフロートを使った場合、</div>の直後でフロート解除されるので便利。
便利な小技（こわざ）の「フォームを整える」で、<li>要素に対してこの :after疑似要素を使った例がある。

擬似要素「:after」を使った例を「＊Web Design 覚え書き＊」に書いているのでご参考に。
●「:after」を float解除のクリアフィックスに使う
●「:after」で「ふきだし」を作る

ページの最上部へ

子セレクタ

div > p { } のように「>」で親子関係を示し、左の要素の中にある（子である）右の要素（この例では<div>の中の<p>）全てにスタイルを適用。

隣接セレクタ

div + p { } のように「>」で隣接関係を示し、左の要素の直後にある右の要素（この例では<div>の直後にある<p>）だけにスタイルを適用。

属性セレクタ

input[type] のように「 [ ] 」内で属性を指定。この属性が指定されたこの要素（この例ではtype属性が指定された<input>要素）にスタイルを適用。

input[type="submit"] のように「 [ ] 」内で属性とその値を指定。この属性値が指定されたこの要素（この例ではtype="submit"が指定された<input>要素（=送信ボタン））にスタイルを適用。

div[class~="○○"] のようにある要素の属性値が複数合った場合（半角スペースで区切って複数の値を指定できる属性もある）、○○の属性値のある要素にスタイルを適用。
例えば、
<div class="ex-a ex-b ex-c"> と <div class="ex-a ex-d ex-e"> というHTML上の指定のある2つの <div>。
CSSで、div[class~="ex-a"] {color: red;} 　と指定すれば、2つの<div>とも適用され、文字色は赤。

ページの最上部へ