マーカーネット株式会社

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:属性セレクタ編】

東京のWEB制作会社 マーカーネット株式会社 公式WEBサイトへ

-CSS, WEB制作

執筆者:

関連記事

【これから始めるWEB制作】adobe?フォトショ??イラレ???adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その1~

【これから始めるWEB制作】adobe?フォトショ??イラレ???adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その1~

皆様こんばんは。 今春に新卒で入社しました、ひよっこWEB制作者のMです。 お腹と背中に貼るカイロを装備し、なんとか寒さをしのいでおります。 先日誕生日を迎え、ついにハタチと言えなくなってしまいました …

リンク切れを自動的にチェックしてくれるワードプレスのプラグイン

リンク切れを自動的にチェックしてくれるワードプレスのプラグイン

リンクチェックしていますか? マニュアルでチェックするとたいへんですよね。 WordPressには自動で定期的にリンク切れをチェックしてくれる 便利なプラグインがございます。 その名もズバリ、「Bro …

デザインの幅が広がる!クオリティの高いイラストサイトまとめ

デザインの幅が広がる!クオリティの高いイラストサイトまとめ http://www.markernet.co.jp/blog/2015/08/07/post-5940/ Facebook

【やらなきゃよかった!?】高額なリスティング対策で大失敗しがちな考え方

リスティング広告は検索結果画面に表示される広告です。 検索した時に上位を独占する風景はみなさんも一度は見たことがあると思います。 このように目立つ位置に表示されていますね。 このリスティング広告、プリ …

手軽に雰囲気を変える!無料英字webフォントのまとめ -個性的編-

手軽に雰囲気を変える!無料英字webフォントのまとめ -個性的編-

webフォントは日本のホームページには今一歩馴染みが無いかもしれませんが これから先、SEOを視野に入れたものはほぼテキストで作成することが望まれます。 今回はその第一弾として「個性的な英字フォント( …