カテゴリー

キーワード

 
> 【CSS】CSSのセレクタとは? ...

【CSS】CSSのセレクタとは? 覚えておきたいセレクタ21選


2015 年 4 月 1 日 投稿    view: 42951
タグ:
このエントリーをはてなブックマークに追加

CSS セレクタの種類

こんにちは、WEBマーケティング部の杉尾です。


前回に引き続き、CSSの基礎知識について説明したいと思います。


今回は『セレクタの種類と優先順位』と銘打って記事を書こうと思っていたのですが、優先順位については次回以降に紹介しようと思います。


記事が長くなりすぎてしまったせいです。


いらっしゃらないとは思いますが、楽しみに待っていてくださった方、申し訳ありません。



セレクタとは?

前回、ちらっとご紹介しました。


【CSS】CSSの書き方と外部スタイルシート設定方法を紹介します


CSSの基本的な書き方は、

セレクタ{プロパティ:値;}

です。


セレクタとはスタイルを適用する対象のことです。
指定の仕方に色々な種類があります。


この部分をちゃんと理解しておかないと余計なコードを書いたり、思い通りのスタイルが適用されなかったりしますので、しっかり覚えましょう。


セレクタの種類

セレクタの種類、見出しの横に()がついているものはIE6に、(※※)がついているものはIE6IE7に対応していません。


ブラウザシェアでIE6は0.98%、IE7は0.34%ですから(2015年3月時点)もはや無視してもよさそうですが、念のため。


要素セレクタ

要素名をセレクタにすることで、その要素すべてにスタイルを適用します。


p {
    color:red;
}
div {
    padding:10px;
}

みたいなことです。


全称セレクタ

すべての要素に適用されるスタイルを書きます。

* {
    color:red;
}

こう指定して、他に文字色のスタイルを書かないとページが真っ赤な文字で埋め尽くされます。
お気をつけください。


ちなみに、『要素 *』の指定で、指定の要素内の要素すべてにスタイルを適用します。
こんな感じです。


p * {
    color:red;
}

p要素内にあるすべての文字が真っ赤になります。


idセレクタ

要素にid属性をつけているときに限り、スタイルが適用されます。


HTML

<p id="test">テスト</p>

CSS

#test {
    color:red;
}

classセレクタ

要素にclass属性をつけているときに限り、スタイルが適用されます。


HTML

<p class="test">テスト</p>

CSS

.test {
    color:red;
}

ちなみに…

p.test {
    color:red;
}

この場合、『testというclassがついたp要素』だけにスタイルが適用されます。
divにtestというclassがついていても、文字色は赤くなりません。


idと違ってclassは同じHTMLファイル内に複数使えますから、少しややこしくなります。
場合によっては2つを分けて書き、別のスタイルを適用することもありますので覚えておいて損はないと思います。


セレクタ複数

『,』で区切って並べるだけで、複数のセレクタに同じスタイルを適用できます。


h1, h2 {
    color:red;
}

見やすいように2つ目の要素の前に半角空白を入れていますが、これはなくても大丈夫です。


子孫セレクタ

最初に指定したセレクタ内の、次に指定したセレクタのみにスタイルが適用されます。
下の具体例だと、div の中のaタグ内のテキストだけが赤文字になります。


HTML

<div>
    <a class="underline">ここは文字が赤になります</a>
    <br>
    <span>ここは黒字です</span>
    <p class="top_margin10">
        <a class="underline">ここも文字が赤になります</a>
        <br>
        <span>ここは黒字です</span>
    </p>
</div>

CSS

div a {
    color:red;
}

スタイル適用後の画面1


子セレクタ(チャイルドセレクタ) (

子要素だけにスタイルを指定できるセレクタです。
普通に書くと孫要素やその中にまで、つまりその要素全体に適用されるのですが、これを使うと子要素のみに適用されます。


これは具体例を見てもらった方がわかりやすいと思います。


HTML

<div class="test_div">
    <span>子要素のspanです</span>
    <p>
        <span>孫要素のspanです</span>
    </p>
</div>

CSS

.test_div > span {
    color:red;
}

>この指定をすると、以下のようになります。


スタイル適用後の画面2


擬似クラス(

これはよく使いますので、しっかり覚えましょう。
特にaタグやimgタグではhoverを頻繁に使いますね。
ちなみに、aタグに対してだけIE6でも使えていました。


未訪問のリンク

a:link {color:red;}

訪問済のリンク

a:visited {color:red;}

カーソルが乗っている要素

a:hover {color:red;}

クリック中の要素

a:active {color:red;}

フォーカスされている要素

input:focus {background:red;}

特定の言語を指定した要素

p:lang(en) {color:red;}

要素内の最初の子要素

ul.test li:first-child {color:red;}

最後のfirst-childだけは少し説明が必要ですね。


HTML

<ul class="test">
    <li>
        テストテキスト
    </li>
    <li>
        テストテキスト
    </li>
    <li>
        テストテキスト
    </li>
</ul>

たとえばこのHTMLファイルに上記のfirst-childというCSSを適用すると、下図のようになります。


スタイル適用後の画面3


first-child、つまり最初の子要素のみにスタイルが適用されます。


擬似要素(:first-line :first-letter) (

:first-lineは要素の先頭1行目に、:first-letterは要素の先頭の文字に適用されます。


HTML

<p>
    テキストサンプルです。<br>
    テキストサンプルです。<br>
    テキストサンプルです。<br>
</p>

CSS

p:first-line {
  color: #ff0000;
}
p:first-letter {
  font-size: 2em;
}

スタイル適用後の画面4


擬似要素(:before :after) (※※

before要素とafter要素を使って、指定した要素の直前と直後のスタイルを指定できます。
たとえば、よくある大きな引用符をこれで書くことができます。
こんな指定の仕方です。


HTML

<blockquote>ここは引用してきたテキストです。</blockquote>

CSS

blockquote {
    width:500px;
}
blockquote:before {
    display: block;
    float: left;
    font-size: 100px;
    content:"『";
    color: #ccc;
    margin-top: -25px;
    margin-right: 10px;
}
blockquote:after {
    display: block;
    float: right;
    font-size: 100px;
    content:"』";
    color: #ccc;
    margin-top: -25px;
    margin-left: 10px;
}

スタイル適用後の画面5


属性セレクタ(

指定の属性がついているものにだけスタイルを指定します。
たとえば、以下のような『要素 属性』の場合です。


HTML

<a href="" name="test">サンプルテキスト</a>
<a href="" target="_blank">サンプルテキスト</a>
<input type="text">
<img src="" alt="scenelive">

CSS

a[name] {
    color:red;
}
a[target="_blank"] { 
    color:red;
}
input[type="text"] {
    border:5px solid red;
}
img[alt~="scenelive"] {
    border:5px solid red;
}

隣接セレクタ(

隣接している要素に対してスタイルを適用できます。


HTML

<h1>テストタイトル</h1>
<p>テストテキスト</p>
<p>テストテキスト</p>

CSS

h1+p {
    color:red;
}

この指定をすると、以下のようになります。


スタイル適用後の画面7


間接セレクタ(

これは注意が必要です。
親要素が同じであることを前提として、ある要素から後ろの要素にスタイルが適用されます。
間に何が入っても変わりません。


説明文だと難しいので具体例をご覧ください。


HTML

<div class="box">
    <h2>テストh2</h2>
    <p>ここは文字色黒のまま</p>
    <h3>テストh3</h3>
    <p>ここは文字色が赤になる</p>
    <p>ここも文字色が赤になる</p>
    <p>ここも文字色が赤になる</p>
    <h4>ここは文字色黒</h4>
    <p>ここも文字色が赤になる</p>
</div>

CSS

.box h3~p {
    color:red;
}

こう書くと、下図のようになります。


スタイル適用後の画面7


まとめ

基本のセレクタ指定から、普段あまり使わないものまでCSS2.1までのセレクタを21個紹介しました。
もうぼちぼちIE7以下を切り捨てることができそうですから、どんどん使っていきたいですね。


【追記】間接セレクタについてはCSS3からです。IE7、IE8でも使えるので勇み足で紹介しました。紛らわしい書き方をしてしまい、申し訳ありません


CSS3のセレクタについては次回紹介したいと思います。


最後までお読みいただき、ありがとうございました。



CSS3のセレクタ ⇒ 【CSS】CSS3で追加されたセレクタ 19選!!

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事