マーカーネット株式会社

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制作

執筆者:

関連記事

もう怖くない!色の配色

皆さん! こんばんは!! webデザインを新人デザイナーKです。 元々色選びに才能が全くない私は、デザインをする際に色んな参考サイトを メチャクチャ調べてから制作に入ります。 でもどうしても配色だけは …

【カメラ撮影】写真素材として撮影するために知っておきたいこと ~風景の色彩編~

WEB制作において”良い写真”は欠かせません。 素材を撮影する際に知っておきたいこと、 今回は風景写真撮影での色設定のポイントをご紹介します。 Contents1 秋は暖色で情緒を感じさせる2 抜ける …

親要素の大きさに合わせて画像をリサイズできるjQueryプラグイン「imgLiquid」

親要素の大きさに合わせて画像をリサイズできるjQueryプラグイン「imgLiquid」 http://www.markernet.co.jp/blog/2015/07/10/post-5790/ F …

【超便利】作業効率化ができるタブ表示拡張機能

突然ですが皆様、画面がごちゃごちゃになったこと、ありませんか?   Macをお使いの方は、“タブでまとめればいいじゃん!”と思うかもしれませんが、 windowsユーザーはそうはいきませんよ …

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

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

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