マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

CSS WEB制作

知ってそうで知らないCSS3の便利な使い方【その1:構造疑似クラス編】

投稿日:2015年1月30日 更新日:

CSS3のセレクタは幾つもありますよね。
今回はその中の構造疑似クラスで、私がよく使う便利な構造疑似クラスをご紹介します。

E:first-child

親要素の最初の子要素であるE要素に適用

E:first-of-type

兄弟関係にある最初のE要素に適用

E:first-childとE:first-of-typeの違いとサンプル

CSS

div.sample1 p:first-child {
background-color:rgba(51,51,51,1);
color:rgba(255,255,255,1);
}
div.sample1 h2:first-of-type {
color:rgba(204,0,0,1);
}

HTML

<div class="sample1">
<p>p要素1</p>
<p>p要素2</p>
<h2>h2要素1</h2>
<p>p要素3</p>
<p>p要素4</p>
</div>

デモ

p要素1

p要素2

h2要素1

p要素3

p要素4

E:last-child

親要素の最後の子要素であるE要素に適用

E:last-of-type

兄弟関係にある最後のE要素に適用

E:last-childとE:last-of-typeの違いとサンプル

CSS

div.sample2 p:last-child {
background-color:rgba(51,51,51,1);
color:rgba(255,255,255,1);
}
div.sample2 h2:last-of-type {
color:rgba(204,0,0,1);
}

HTML

<div class="sample2">
<p>p要素1</p>
<p>p要素2</p>
<h2>h2要素1</h2>
<p>p要素3</p>
<p>p要素4</p>
</div>

デモ

p要素1

p要素2

h2要素1

p要素3

p要素4

E:nth-child(n)

親要素のn番目の子要素であるE要素に適用

E:nth-of-type(n)

兄弟関係にあるn番目のE要素に適用

※補足
E:nth-child(n)とE:nth-of-type(n)のnの部分は、oddや2n+1で奇数を表し、evenや2nで偶数を表すこともできます。

E:nth-child(n)とE:nth-of-type(n)の違いとサンプル

CSS

div.sample3 p:nth-child(2n) {
background-color:rgba(51,51,51,1);
color:rgba(255,255,255,1);
}
div.sample3 h2:nth-of-type(odd) {
color:rgba(204,0,0,1);
}

HTML

<div class="sample3">
<p>p要素1</p>
<p>p要素2</p>
<h2>h2要素1</h2>
<p>p要素3</p>
<h2>h2要素2</h2>
<p>p要素4</p>
<p>p要素5</p>
<p>p要素6</p>
<h2>h2要素3</h2>
<p>p要素7</p>
<p>p要素8</p>
</div>

デモ

p要素1

p要素2

h2要素1

p要素3

h2要素2

p要素4

p要素5

p要素6

h2要素3

p要素7

p要素8

いかがでしたか?
擬似クラスを使いこなせばIDセレクタやクラスセレクタ等を使わなくてもスタイルの適用が可能です!綺麗なソースになりそうですね!
他にも便利な擬似クラスやセレクタがありますが、また次回ご紹介したいと思います。

知ってそうで知らないCSS3の便利な使い方【その2:属性セレクタ編】

-CSS, WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

CSS3の便利機能紹介。

CSS3の便利機能紹介。 http://www.markernet.co.jp/blog/2015/09/03/post-6063/ Facebook

WEBサイトの配色に迷った時の必見サイト!をご紹介。

WEBサイトの配色に迷った時の必見サイト!をご紹介。 http://www.markernet.co.jp/blog/2015/08/10/post-5960/ Facebook

【css技術】CSSだけで生成された歴代Appleのマウスがスゴい

【css技術】CSSだけで生成された歴代Appleのマウスがスゴい

css3の普及で、画像を使わなくとも ボタンで使用する様なグラーデーションや形など、 様々な表現を実現することができるようになってきました。 こうした機能も、上手く使いこなせるようになれば こんなこと …

WEBトレンド+αの作り込みで、心地よさが広がる素敵サイトをご紹介! ~素敵サイトの旅 その1~

WEBトレンド+αの作り込みで、心地よさが広がる素敵サイトをご紹介! ~素敵サイトの旅 その1~

こんにちは!風邪っぴきのweb初心者Kです。 週末に風邪を治しきれず、咳のため未だマスクが手放せません。 今日は誰とも口をきけないかも知れない!!! みなさまはお風邪など召されていませんか? さてさて …

jqueryを利用した、facebookのアルバムから写真一覧の取得について

jqueryを利用した、facebookのアルバムから写真一覧の取得について

jQueryを利用して、 facebookの指定のアルバムから写真の一覧を取得する方法を紹介します。 ※ まず、facebookからアルバム一覧します。 var name = “markernet”; …