この記事の目次
アスタリスク(*)ですべての要素にスタイルを適用することができる CSS セレクタ。
リセットしたいときに、よく使用されます。
* { color:red; }
p * { color:red; }
クラス名を指定した要素にスタイルが適用されます。
クラス名は、1ページで複数回使用するCSSに付けます。
.sample { font-size:18px; color:red; }
<p class="sample">この中身に適用されます<p>
p.sample { font-size:18px; color:red; }
<p class="sample">この中身に適用されます</p> <div class="sample">この中身には適用されません</div>
htmlに、クラス名を半角スペースで区切って指定すると、複数のCSSを適用することもできます。
p.sample1 { color:red; } p.sample2 { font-size:18px; }
<p class="sample1 sample2">2種類のスタイルが同時に適用されます</p>
基本的には先ほどのクラスと一緒で、id名を指定した要素にスタイルが適用されます。
idは、1ページに1箇所にしか使用できません。
#sample { font-size:16px; }
セレクタを半角スペースで区切ると、ある要素の下の階層にある要素にスタイルを適用します。
p strong { font-size:16px; }
<p>pタグのなかにある<strong>strongタグ</strong>に適用されます。</p>
.mago strong { font-size:16px; }
p.mago strong { font-size:16px; }
CSS セレクタを「>」で区切ると、ある要素の直下の階層にある要素にスタイルを適用します。
div.sample > a { font-size:18px; font-weight:bold; }
<div class="sample"> <a href="#">リンク1<a/> <ul> <li><a href="#">リンク1<a/></li> </ul> <div>
「+」で隣接している要素にスタイルを適用することができる CSS セレクタ。
h2 + p { color:red; font-weight:bold; }
<h2>h2要素</h2> <p>h2要素の隣にあると適用されます</p> <p>h2要素の隣ではないので適用されません</p>
「~」である要素の後にある要素にスタイルを適用することができます。
h2 ~ p { color:red; font-weight:bold; }
<p>h2要素のの前なので適用されません</p> <h2>h2要素</h2> <p>h2要素の後にあると適用されます</p> <p>h2要素の後にあると適用されます</p>
contentプロパティとの組み合わせで、指定した要素の前に指定した内容を生成します。
テキストだけでなく、画像を指定することも可能。
h2:before{ content: "※ "; }
h2:before{ content: url(http://ky5ky5.org/images/01.png); }
h2:after{ content: "※ "; }
h2:after{ content: url(http://ky5ky5.org/images/01.png); }
a[href$=".pdf"]:before { content: url(http://ky5ky5.org/images/01.png); }
a[target="_blank"]::after { content: url(http://ky5ky5.org/images/01.png); }
雑誌の記事でたまにありそうなデザインになります。文章の最初の1文字のみに適応されます。
p:first-letter { font-weight:bold; font-size:32px; }
p:first-line { font-weight:bold; color:red; }
リストなどで、最初の要素のみデザインを変えたいときによく使用されます。
li:first-child { font-weight:bold; color:red; }
<ul> <li>最初のp要素にだけ適用されます。</li> <li>2つ目以降のp要素には適用されません。</li> </ul>
最後に現れる要素にのみ適用したいとき
li:last-child { font-weight:bold; color:red; }
:nth-of-type(n)でn番目に現れる要素にスタイルを適用します。
一覧表示などでよく使用されます。
p:nth-of-type(2) { font-weight:bold; color:red; }
<p>1行目</p> <p>2行目</p> <p>3行目</p> <p>4行目</p> <p>5行目</p>
: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:nth-of-type(2n+1) { font-weight:bold; color:red; }
<p>1行目</p> <p>2行目</p> <p>3行目</p> <p>4行目</p> <p>5行目</p>
:nth-last-of-type(n)で後ろから数えてn番目に現れる要素にスタイルを適用します。nの使い方は先ほどと同じです。
p:nth-last-of-type(2) { font-weight:bold; color:red; }
<p>1行目</p> <p>2行目</p> <p>3行目</p> <p>4行目</p> <p>5行目</p>
div.onmouse:hover { background:#eee; }
指定したセレクタに該当しない場合にスタイルが適用されます。
p:not(#sample) { font-size:18px; }
body *:not(strong) { font-size:18px; }
strongタグ以外のすべてにスタイルが適用される。
テキストエリアなどに使用されます。
input[type="text"]:focus { width: 300px; }
inputのラジオボタンやチェックボックスに使用されます。
input[type=radio]:checked + label { color: red; font-weight:bold; }
<form> <input type="radio" name="btn" value="sample1"> <label>ボタン1</label> <input type="radio" name="btn" value="sample2"> <label>ボタン2</label> </form>
チェックされてボタンに直接スタイルを適用するのではなく、その隣のラベルに適用します。
属性セレクタはすべて以下の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>
a[title] { font-weight:bold; color:red; }
a[title="タイトルその1"] { font-weight:bold; color:red; }
同じ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”] | 汎用ボタン |
a[title^="タイトル"] { font-weight:bold; color:red; }
a[title$="タイトル"] { font-weight:bold; color:red; }
a[title*="その"] { font-weight:bold; color:red; }
コピペで使える!よく使う CSS セレクタ のまとめです。
普段使わないけど、実用的な CSSセレクタ ってありますよね。他にも、知っていると便利な セレクタ をまとめています。
セレクタがあれば、ごちゃごちゃした長いCSSを書く必要はありません!覚えなくても、知っていると便利です!
他にも、知っていると便利な CSS セレクタ もありますので、随時更新していきます!