マーカーネット株式会社

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

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

関連記事

【Photoshop マジック】ビンテージ風の素材がさくさくカンタンに作れちゃう!

Webデザインのトレンド手法のひとつとして、「レトロ感」や「ヴィンテージ感」のあるwebデザインがよく見かけます。 素材がなくても、Phoshopを使えば普通の写真もステキな素材になります! ここで写 …

Laravel SocialiteでGitHubを利用した認証

Lravel SocialiteでGitHubを利用したOAuthによる認証の手順を紹介します。 1. GithubでOAuthアプリケーションを作成 GitHubにログインし、 [Settings] …

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

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

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

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

サイトの設計図とも言えるワイヤーフレームを作成することは、ウェブ制作において大事なステップです。 ワイヤーフレームとはサイトの大まかなレイアウト、必要な要素、コンテンツの優先順位を示したもので、ワイヤ …

phpでオーディオファイルの情報を取得する方法

phpでオーディオファイルの情報を取得する方法

PHPで利用しまして、オーディオファイルの情報(再生時間、タイトルやアーティスト名など)を取得するには、getID3というライブラリを利用します。 以下このライブラリを利用した音楽ファイルの情報の取得 …