Deprecated: 関数 print_emoji_styles は、バージョン 6.4.0 から非推奨になりました ! 代わりに wp_enqueue_emoji_styles を使用してください。 in /home/dnd/dream-net.org/public_html/blog/wp-includes/functions.php on line 6085

PAGETOP

知っていれば便利な「CSS18選」

【CSS】保存版!忘れがちなCSS セレクタ18個

普段あまり使わないCSSセレクタを使いたい時、どんな書式だったっけ?とその都度調べていませんか?また、CSSのチュートリアルなどを見ていて、この記号は何だろう・・・ということはありませんか?
今回は、忘れがちな、でも覚えておくと便利なCSSセレクタを一挙まとめてご紹介します。

1.*(アスタリスク)

/*css*/
*{
font-size:12px;
}

全てのP要素に適用されます。

/*css*/
p*{
font-size:12px;
}

2.>(大なり)

直下の要素にのみ、適用されます。

/*css*/
div.sample01 > a{
 color:red; 
}

HTML

テキスト1(直下の子要素)

テキスト2(直下の子要素)

テキスト3(直下ではない)

3.~(チルダ)

後ろにある要素にのみ、適用されます。

/*css*/
div.sample02 ~ a{ /*sample02の後ろにあるa要素にのみ適用*/
color:red; 
} 

HTML

リンク1(前にある)
ここが基準(sample02クラス)
リンク1(後ろにある) リンク2(後ろにある)

4.+(プラス)

隣接する要素にのみ、適用されます。

/*css*/
div.sample03 + p{/*sample03に隣接する次の要素にのみ適用*/
color:red;
} 

HTML

ここが基準(sample03クラス)

テキスト1(隣接している)

テキスト2(隣接していない)

5.first-line

要素の最初の行にのみ適用されます。

/*css*/
p.sample04:first-line{ 
color:red; 
} 

HTML

最初の行です。適用されます。<br>で改行をしなくても、2行目からは適用されません。長い文章が続いて右端で折り返し、2行目に入った時点で適用されなくなります。

6.first-letter

要素の最初の文字にのみ適用されます。

/*css*/
p.sample04:first-letter{ 
color:red; 
} 

HTML

最初の文字にのみ適用されます。

7.first-child

要素の最初の文字にのみ適用されます。

/*css*/
.sample06 p:first-child{ 
color:red; 
}

HTML

最初のp要素にのみ適用されます。

次のP要素には適用されません。

8.not

該当しない場合にのみ適用されます(CSS3)。

/*css*/
.sample07 p:not(#sample07){/*id名がsample07以外のp要素に適用*/
color:red; 
}

HTML

idがsample07ではない

idがsample07

idがsample07ではない

9.要素[属性]

特定の属性を持つ要素にのみ適用されます。

/*css*/
.sample08 a[title]{/*title属性を持つa要素にのみ適用*/ 
color:red;
}

HTML

 

10.要素[属性=”属性値”]

特定の属性値を持つ要素にのみ適用されます。

/*css*/
.sample10 input[type="button"]{/*input type="button"にのみ*/ 
color:red; 
}

HTML


11.要素[属性^=”属性値”]

特定の属性値で始まる要素にのみ適用されます(CSS3)。

/*css*/
.sample09 a[title^="OK"]{/*”OK”という文字で始まるタイトルを持つ要素にのみ適用*/ 
color:red; 
}

HTML

 

12.要素[属性$=”属性値”]

特定の属性値で終わる要素にのみ適用されます(CSS3)。

/*css*/
.sample11 a[title$="OK"]{/*”OK”という文字で終わるタイトルを持つ要素にのみ適用*/ 
color:red;
} 

HTML

 

13.要素[属性*=”属性値”]

特定の属性値を含む要素にのみ適用されます(CSS3)。

/*css*/
.sample12 a[title*="OK"]{/*”OK”という文字を含むタイトルを持つ要素にのみ適用*/
color:red;
}

HTML

 

14.checked

チェックされている要素にのみ適用されます。
inputに隣接するlabelなどに使い、チェックで変化させることができます。

/*css*/
.sample13 input[type=checkbox]:checked + label{/*チェックされているcheckbox要素にのみ適用*/ 
color:red; 
} 

HTML

15.nth-of-type(n)

n番目の要素にのみ適用されます。

/*css*/
.sample14 p:nth-of-type(2){/*2番目の要素にのみ適用*/ 
color:red; 
}

HTML

1番目

2番目

3番目

4番目

16.nth-last-of-type(n)

後ろからn番目の要素にのみ適用されます。

/*css*/
.sample15 p:nth-last-of-type(2){/*後ろから2番目の要素にのみ適用*/ 
color:red;
}

HTML

後ろから4番目

後ろから3番目

後ろから2番目

後ろから1番目

17.nth-child(n)

n番目の子要素にのみ適用されます。

/*css*/
.sample16 p:nth-child(2){/*2番目の子要素にのみ適用*/ 
color:red; 
}

HTML

1番目

2番目

3番目

4番目

18.nth-child(n)

後ろからn番目の子要素にのみ適用されます。

/*css*/
.sample17 p:last-child{/*最後にある子要素にのみ適用*/ 
color:red; 
} 

HTML

最初

2番目

3番目

最後

n番目の部分は、以下のようにも指定できます。
odd:奇数
even:偶数
2n:2の倍数(つまり偶数)
2n+1:奇数

一つひとつにクラスやIDを付けず、以上のような方法で記述するとスマートでいいですね。