カテゴリー

キーワード

 
> 【CSS】CSS3で追加されたセレ...

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


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

css3 セレクタ

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


今回はCSS3で追加されたセレクタを紹介します。


よろしくお願いします。



セレクタ

ご存知と思いますが、一応おさらいです。


CSSの書き方は

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

です。


『どこ』に『どんな装飾』を『どういう具合』に適用させるかという指定の、『どこ』の部分です。


属性セレクタ


E[foo^="val"]


foo属性の値がvalで始まるセレクタに適用されます。


HTML

<a href="http:scene-live.com/">株式会社SceneLive</a>

CSS

a[href^="http"]  {
    color:#ffffff;
    background-color:red;
}

株式会社SceneLiveの背景が赤で文字が白抜きとなります。


E[foo$="val"]

foo属性の値がvalで終わるセレクタに適用されます。


HTML

<a href="scene-liveLogo.png">株式会社SceneLive</a>

CSS

a[href$=".png"]  {
    font-size:28px;
}

株式会社SceneLiveの文字の大きさが28pxとなります。


E[foo*="val"]

foo属性にvalという文字を含む場合、スタイルを適用します。(部分一致)


HTML

<a href="http://scene-live.com/system.php">株式会社SceneLiveシステム</a>
<a href="http://scene-live.com/about.php">株式会社SceneLive会社概要</a>
<a href="http://scene-live.com/recruit.php">株式会社SceneLive採用情報</a>
<a href="https://www.google.co.jp/">Google</a>
<a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a>

CSS

a[href*="scene-live.com"]  {
    color:red;
}

『scene-live.com』を含む、上3つのリンクが赤文字になります。


構造疑似クラス


E:root


ルート要素に適用されるスタイルです。
HTMLファイルでいえばhtml要素です。


ですから、これを指定するとページ全体に適用されます。


E:empty

要素内容が空のものに適用されます。
tableタグで表を作ったときに、空のセルだけ色を変えたいときなどに使います。


あとは何も入っていないdivタグにも使うことがあります。


E:last-child

最後の子要素に適用します。
よく使うのはリスト(ulタグ)に対してです。


HTML

<ul>
    <li>ブログ</li>
    <li>システム</li>
    <li>会社概要</li>
    <li>採用情報</li>
    <li>お問い合わせ</li>
</ul>

CSS

li {
    float:left;
    border-right:1px solid black;
}
li:last-child{
    border:none;
}

横並びになったli要素の最後のものにだけ区切り線がつきません


E:first-of-type

指定した要素が最初に現れたときにスタイルを適用します。


HTML

<div>
    <h1>株式会社Scene Live</h1>
    <h2>会社概要</h2>
    <p>法人名称</p>
    <p>株式会社Scene Live(シーンライブ) </p>
</div>

CSS

div p:first-of-type {background-color:#FFCCCC;}

初めのp要素である『法人名称』の部分だけ背景に色がつきます。


E:last-of-type

指定した要素が最後に現れたときにスタイルを適用します。


前項の逆で、最後に現れた要素にスタイルを適用します。


HTML

<div>
    <h1>株式会社Scene Live</h1>
    <h2>会社概要</h2>
    <p>法人名称</p>
    <p>株式会社Scene Live(シーンライブ) </p>
</div>

CSS

div p:first-of-type {background-color:#FFCCCC;}


最後のp要素である『株式会社Scene Live(シーンライブ)』の部分だけ背景に色がつきます。


E:only-child

唯一の子要素にスタイルを適用します。
種類に関係なく子要素の数が1つだけの場合に


HTML

<div>
    <p>
        株式会社SceneLive
    </p>
    <p>
        株式会社SceneLive
    </p>
</div>
<div>
    <p>
        株式会社SceneLive
    </p>
    <span>株式会社SceneLive</span>
</div>
<div>
    <p>
        株式会社SceneLive
    </p>
</div>

CSS

div p:only-child {background-color:#FFCCCC;}


一番下のdivの中のp要素、『株式会社SceneLive』だけ背景に色がつきます。


E:only-of-type

指定の子要素が一つの場合、スタイルを適用します。
指定の子要素が複数ある場合は適用しません。


HTML

<div>
    <p>
        株式会社SceneLive
    </p>
    <p>
        株式会社SceneLive
    </p>
</div>

<div>
    <p>
        株式会社SceneLive
    </p>
    <span>株式会社SceneLive</span>
</div>

<div>
    <p>
        株式会社SceneLive
    </p>
</div>

CSS

div p:only-of-type {background-color:#FFCCCC;}

二番目と一番下のdivの中のp要素、『株式会社SceneLive』に背景に色がつきます。


E:nth-child(n)

前から数えて、n番目の子となるE要素にスタイルを適用します。(種類に関係なく要素を数えます)
テーブルの装飾なんかに便利ですね。
()の中には奇数を表す『2n+1』、偶数を表す『2n』を入れることもできます。


HTML

<table class="lunch">
    <tr><td>カレーライス</td><td>600円</td></tr>
    <tr><td>カツ丼</td><td>600円</td></tr>
    <tr><td>牛焼き肉定食</td><td>700円</td></tr>
    <tr><td>パン</td><td>100円</td></tr>
    <tr><td>うな重</td><td>900円</td></tr>
</table>

CSS

table.lunch tr:nth-child(2n) {background-color:#cccccc;}
table.lunch tr:nth-child(2n+1) {background-color:#ffffff;}

カツ丼、パンの背景が薄いグレー。
カレーライス、牛焼き肉定食、うな重の背景が白になります。


E:nth-last-child(n)

後ろから数えて、n番目の子となるE要素にスタイルを適用します。
これも前項の『E:nth-child(n)』と同じく、()内に奇数を表す『2n+1』、偶数を表す『2n』を指定できます。


E:nth-of-type(n)

前から数えて、n番目のその種類の要素にスタイルを適用します。
nth-child(n)とは違い、指定した要素のみを数えます。
()の中には奇数を表す『2n+1』、偶数を表す『2n』を入れることもできます。


HTML

<div class="test_1">
    <h1>株式会社SceneLive</h1>
    <p>株式会社SceneLive</p>
    <p>株式会社SceneLive</p>
    <p>株式会社SceneLive</p>
</div>
<div class="test_2">
    <p>株式会社SceneLive</p>
    <p>株式会社SceneLive</p>
    <p>株式会社SceneLive</p>
</div>

CSS

div.test_1 p:nth-child(3) {color:red;}
div.test_2 p:nth-of-type(3){color:red;}

test_1というdiv要素内は上から2つ目のp要素が赤文字になります。(nth-child()はどんな要素でも数える)
test_2というdiv要素内は上から3つ目のp要素が赤文字になります。


E:nth-last-of-type(n)

後ろから数えて、n番目のその種類の要素にスタイルを適用します。
nth-last-child(n)とは違い、指定した要素のみを数えます。
()の中には奇数を表す『2n+1』、偶数を表す『2n』を入れることもできます。


ターゲット疑似クラス


E:target

リンクのターゲット先(アンカーリンクで飛んだところの要素)にスタイルが適用されます。


HTML

<a href="#target_target">株式会社SceneLive</a>

<p id="target_target">
    採用情報
</p>

CSS

:target {color:red;}

この指定で、『採用情報』という文字の色が赤くなります。(アンカーリンクをクリックして飛んだとき)


ユーザーインターフェース要素状態擬似クラス


E:enabled

有効なユーザーインターフェース要素にスタイルを適用します。
<button>タグや<textarea>タグなどによく使用します。


このような指定の仕方をします。


CSS

button:enabled{background-color:#000000;}
textarea:disabled {background-color: #000000;}

E:disabled

前項とは逆で、無効なユーザーインターフェース要素にスタイルを適用します。


E:checked

チェックされているユーザーインターフェース要素にスタイルを適用します。
チェックボックスやラジオボタンによく使用します。


このような指定の仕方をします。


CSS

input[type="radio"]:checked {outline: inset 4px #0000ff;}

否定疑似クラス


E:not(s)

sに指定される要素以外にスタイルが適用されます。


HTML

<ul>
    <li class="test1">
        株式会社SceneLive
    </li>
    <li class="test2">
        株式会社SceneLive
    </li>
    <li>
        株式会社SceneLive
    </li>
</ul>

CSS

li:not([class]) {
    color:red;
}

上記ソースですと、クラスが何もついていないli要素にスタイルが適用されます。
最後の『株式会社SceneLive』だけ赤文字になります。


擬似要素のセミコロン

CSS3では擬似要素のセミコロンを2つ書きます。


こんな感じの記述見たことありませんか?


CSS

p::before {
   content: #;
}

これはCSS3での擬似要素の書き方です。
しかし、こう書いてしまうとIE8などではスタイルが適用されません。
現状はまだセミコロン1つの記述にしておいた方がよさそうです。


ちなみに、擬似要素は


beforeafterfirst-letterfirst-line


があります。


まとめ

今日紹介したものに、前回フライングで紹介した『間接セレクタ』がCSS3で追加されたセレクタとなります。


これらを駆使すればCSSコードの短縮化ができますし、昔はJavascriptでしかできなかった表現もできるようになります。


そのままではIE8で使えないものばかりですが、利用可能にする方法はあります。
次回はそれを紹介したいと思います。


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



前回はコチラ ⇒ 【CSS】CSSのセレクタとは? 覚えておきたいセレクタ21選

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

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

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

前職:ライター、小説家

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

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

 


カテゴリー

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