この記事の目次
1. すべての要素に適用
アスタリスク（*）ですべての要素にスタイルを適用することができる CSS セレクタ。
リセットしたいときに、よく使用されます。
すべての要素に適応したいとき
CSS
* {
color:red;
}
p要素の中にある要素すべてに適用したいとき
CSS
p * {
color:red;
}
2. 指定したクラス名がある要素に適用
クラス名を指定した要素にスタイルが適用されます。
クラス名は、1ページで複数回使用するCSSに付けます。
指定したクラス名のみに適応したいとき
CSS
.sample {
font-size:18px;
color:red;
}
html
<p class="sample">この中身に適用されます<p>
p要素であり、指定したクラス名のみに適応したいとき
CSS
p.sample {
font-size:18px;
color:red;
}
html
<p class="sample">この中身に適用されます</p> <div class="sample">この中身には適用されません</div>
1つの要素に、複数のクラス名を適応したいとき
htmlに、クラス名を半角スペースで区切って指定すると、複数のCSSを適用することもできます。
CSS
p.sample1 {
color:red;
}
p.sample2 {
font-size:18px;
}
html
<p class="sample1 sample2">2種類のスタイルが同時に適用されます</p>
3. 指定したid名がある要素に適用
基本的には先ほどのクラスと一緒で、id名を指定した要素にスタイルが適用されます。
idは、1ページに1箇所にしか使用できません。
指定したid名のみに適応したいとき
CSS
#sample {
font-size:16px;
}
4. 子孫要素に適用
セレクタを半角スペースで区切ると、ある要素の下の階層にある要素にスタイルを適用します。
pタグの中にあるstrong要素に適用したいとき
CSS
p strong {
font-size:16px;
}
html
<p>pタグのなかにある<strong>strongタグ</strong>に適用されます。</p>
クラス名magoの中にあるstrong要素に適用したいとき
CSS
.mago strong {
font-size:16px;
}
magoというクラス名がついたp要素の中にある、strong要素に適用したいとき
CSS
p.mago strong {
font-size:16px;
}
5. 子要素にのみ適用
CSS セレクタを「>」で区切ると、ある要素の直下の階層にある要素にスタイルを適用します。
クラス名sampleの直下にあるa要素にのみ適用したいとき
CSS
div.sample > a {
font-size:18px;
font-weight:bold;
}
html
<div class="sample">
<a href="#">リンク1<a/>
<ul>
<li><a href="#">リンク1<a/></li>
</ul>
<div>
6. 隣接している要素に適用
「+」で隣接している要素にスタイルを適用することができる CSS セレクタ。
h2要素に隣接しているp要素に適応したいとき
CSS
h2 + p {
color:red;
font-weight:bold;
}
html
<h2>h2要素</h2> <p>h2要素の隣にあると適用されます</p> <p>h2要素の隣ではないので適用されません</p>
7. 後にある要素に適用
「~」である要素の後にある要素にスタイルを適用することができます。
h2要素に隣接しているp要素に適応したいとき
CSS
h2 ~ p {
color:red;
font-weight:bold;
}
html
<p>h2要素のの前なので適用されません</p> <h2>h2要素</h2> <p>h2要素の後にあると適用されます</p> <p>h2要素の後にあると適用されます</p>
【擬似要素・擬似クラス】 CSS セレクタ
8. :before 指定した要素の前に要素を追加
contentプロパティとの組み合わせで、指定した要素の前に指定した内容を生成します。
テキストだけでなく、画像を指定することも可能。
h2要素の前に、「※」を追加したいとき
CSS
h2:before{
content: "※ ";
}
h2要素の前に、画像を追加したいとき
CSS
h2:before{
content: url(http://ky5ky5.org/images/01.png);
}
9. :after 指定した要素の後ろに要素を追加
h2要素の後ろに、「※」を追加したいとき
CSS
h2:after{
content: "※ ";
}
h2要素の後ろに、画像を追加したいとき
CSS
h2:after{
content: url(http://ky5ky5.org/images/01.png);
}
リンク先がpdfの場合のみ、後ろに画像を追加したいとき
CSS
a[href$=".pdf"]:before {
content: url(http://ky5ky5.org/images/01.png);
}
リンク先が別ウィンドウの場合のみ、後ろに画像を追加したいとき
CSS
a[target="_blank"]::after {
content: url(http://ky5ky5.org/images/01.png);
}
10. :first-letter 最初に現れる1文字にだけ適用
雑誌の記事でたまにありそうなデザインになります。文章の最初の1文字のみに適応されます。
最初の1文字のみに適応したいとき
CSS
p:first-letter {
font-weight:bold;
font-size:32px;
}
11. :first-line 最初の行にだけ適用
最初の1行のみに適応したいとき
CSS
p:first-line {
font-weight:bold;
color:red;
}
12. :first-child 最初に現れる要素にだけ適用
リストなどで、最初の要素のみデザインを変えたいときによく使用されます。
最初に現れる要素にのみ適用したいとき
CSS
li:first-child {
font-weight:bold;
color:red;
}
html
<ul> <li>最初のp要素にだけ適用されます。</li> <li>2つ目以降のp要素には適用されません。</li> </ul>
13. :last-child 最初に現れる要素にだけ適用
最後に現れる要素にのみ適用したいとき
CSS
li:last-child {
font-weight:bold;
color:red;
}
14. :nth-of-type(n) n番目に現れる要素に適用
:nth-of-type(n)でn番目に現れる要素にスタイルを適用します。
一覧表示などでよく使用されます。
2番目に現れるp要素にのみ適用したいとき
CSS
p:nth-of-type(2) {
font-weight:bold;
color:red;
}
html
<p>1行目</p> <p>2行目</p> <p>3行目</p> <p>4行目</p> <p>5行目</p>
nの部分は以下のように複数指定することもできます。
| :nth-child(n) | n番目の要素に適用 |
|---|---|
| :nth-child(odd) | 奇数番目の要素に適用 |
| :nth-child(2n+1) | 奇数番目の要素に適用 |
| :nth-child(even) | 偶数番目の要素に適用 |
| :nth-child(2n) | 偶数番目の要素に適用 |
| :nth-child(3n) | 3,6,9,12…番目の要素に適用 |
| :nth-child(3n+1) | 1,4,7,10…番目の要素に適用 |
奇数番目に表れるp要素にのみ適用したいとき
CSS
p:nth-of-type(2n+1) {
font-weight:bold;
color:red;
}
html
<p>1行目</p> <p>2行目</p> <p>3行目</p> <p>4行目</p> <p>5行目</p>
15. :nth-last-of-type(n) 後ろからn番目に現れる要素に適用
:nth-last-of-type(n)で後ろから数えてn番目に現れる要素にスタイルを適用します。nの使い方は先ほどと同じです。
後ろから2番目に現れるp要素にのみ適用したいとき
CSS
p:nth-last-of-type(2) {
font-weight:bold;
color:red;
}
html
<p>1行目</p> <p>2行目</p> <p>3行目</p> <p>4行目</p> <p>5行目</p>
16. :hover オンマウス時に適用
要素にカーソルがのったときに適応したいとき
CSS
div.onmouse:hover {
background:#eee;
}
17. :not 該当しない場合に適用
指定したセレクタに該当しない場合にスタイルが適用されます。
id名「sample」が付けられたpタグ以外にスタイルを適用したいとき
CSS
p:not(#sample) {
font-size:18px;
}
CSS
body *:not(strong) {
font-size:18px;
}
strongタグ以外のすべてにスタイルが適用される。
18. :focus フォーカスされているユーザーインターフェース要素に適用
テキストエリアなどに使用されます。
フォーカス時に入力エリアを伸ばしたいとき
CSS
input[type="text"]:focus {
width: 300px;
}
19. :checked チェックされているユーザーインターフェース要素に適用
inputのラジオボタンやチェックボックスに使用されます。
CSS
input[type=radio]:checked + label {
color: red;
font-weight:bold;
}
html
<form> <input type="radio" name="btn" value="sample1"> <label>ボタン1</label> <input type="radio" name="btn" value="sample2"> <label>ボタン2</label> </form>
チェックされてボタンに直接スタイルを適用するのではなく、その隣のラベルに適用します。
【属性セレクタ】CSS セレクタ
属性セレクタはすべて以下のhtmlをサンプルにしています。
html
<a href="#" title="タイトルその1">タイトルその1</a><br /> <a href="#" title="タイトルその2">タイトルその2</a><br /> <a href="#" title="3つ目のタイトル">3つ目のタイトル</a><br /> <a href="#">タイトル4</a>
20. E[foo] 特定の属性を持つ要素に適用
tittle属性を持つaタグにスタイルを適用したいとき。値は関係ありません。
CSS
a[title] {
font-weight:bold;
color:red;
}
21. E[foo=”bar”] 特定の属性(値)を持つ要素に適用する
tittle属性に「タイトルその1」という値を持つa要素にスタイルを適用したいとき
CSS
a[title="タイトルその1"] {
font-weight:bold;
color:red;
}
formまわりのinput要素などによく使用されます。
同じinput要素でも、それぞれの要素に独自のスタイルを適用させることができます。
| input[type=”text”] | 一行テキストボックス |
|---|---|
| input[type=”tel”] | 電話番号の入力欄 |
| input[type=”url”] | URLの入力欄 |
| input[type=”email”] | メールアドレスの入力欄 |
| input[type=”password”] | パスワード入力欄 |
| input[type=”date”] | 日付の入力欄 |
| input[type=”number”] | 数値の入力欄 |
| input[type=”checkbox”] | チェックボックス |
| input[type=”radio”] | ラジオボタン |
| input[type=”file”] | サーバーへファイルを送信 |
| input[type=”submit”] | 送信ボタン |
| input[type=”image”] | 画像ボタン |
| input[type=”reset”] | リセットボタン |
| input[type=”button”] | 汎用ボタン |
22. E[foo^=”bar”] 属性の値が指定した文字で始まる場合に適用する
tittle属性が「タイトル」で始まる場合にスタイルを適用したいとき
CSS
a[title^="タイトル"] {
font-weight:bold;
color:red;
}
23. E[foo$=”bar”] 属性の値が指定した文字で終わる場合に適用する
tittle属性が「タイトル」で終わる場合にスタイルを適用したいとき
CSS
a[title$="タイトル"] {
font-weight:bold;
color:red;
}
24. E[foo*=”bar”] 属性の値が指定した文字を含む場合に適用する
tittle属性が「その」を含む場合にスタイルを適用したいとき
CSS
a[title*="その"] {
font-weight:bold;
color:red;
}
コピペで使える！よく使う CSS セレクタ
コピペで使える！よく使う CSS セレクタ のまとめです。
普段使わないけど、実用的な CSSセレクタ ってありますよね。他にも、知っていると便利な セレクタ をまとめています。
セレクタがあれば、ごちゃごちゃした長いCSSを書く必要はありません！覚えなくても、知っていると便利です！
他にも、知っていると便利な CSS セレクタ もありますので、随時更新していきます！