平成最後の夏は大変暑かったですが、残暑が厳しい8月もそろそろ終わりですね。
9月になったら涼しくなって欲しいと思います。
さて、CSS にはセレクタによってどのタグに対してスタイルを指定するかを決めています。
今回はそんなセレクタの指定方法についてまとめます。
HTML5 ではタグに意味を持たせることと <div> タグの乱立を防ぐ意味でも <article> タグや <section> タグなどの使用を推奨しています。
これらのタグを使うとこれまで class で意味づけしていたものがタグ名で整理でき、更にスタイルシートのセレクタが簡潔になり、管理・変更も容易になります。
タグ名による指定 (要素型セレクタ)
タグ名による指定方法です。
これは直感的にも分かりやすいです。
書式は非常に簡単で、以下のようになります。
タグ名{
/* 適応するスタイル */
}
/* 具体的な記載例 */
h1{ /* h1タグ全てに適応される */
font-size : 1.2rem; /* rootサイズの1.2倍 */
font-weight : 400; /* 標準の文字太さ */
margin : 1em 0; /* 上下に1文字分、左右は無し */
}
p{ /* pタグ全てに適応される */
font-size : 0.85rem; /* rootサイズの0.85倍 */
line-height : 1.7em; /* 行間は1.7文字分 */
padding : 10px;
margin : 1em 0;
}
要素型セレクタはより広い範囲に対して指定される為、優先度は低いです。
つまり、後述の class や id や子孫セレクタによるスタイルが指定されれば上書きされるということです。
この仕様のお陰で簡潔な記述が可能となっています。
全称セレクタ
これは ” * (アスタリスク) ” を上記のタグ名の部分に当てはめることで全ての要素に対して指定したことになります。
そのままでは使うことはそれほどないですが、子孫セレクタと組み合わせて ” class が style01 という要素の子孫要素全てに対して適応したい” という場合に活躍します。
class セレクタ、id セレクタ
これも良く使われます。
class や id という属性が指定されている要素に対してスタイルを適応できるというものです。
.class名{
/* 適応するスタイル */
}
#id名{
/* 適応するスタイル */
}
/* 具体的な記載例 */
.red-text{ /* class="red-text" の指定があるタグ全てに適応される */
color : red; /* 文字色を赤色に */
}
#fix_lowerright{ /* id="fix_lowerright" のタグに適応される */
position : fixed; /* スクロールに無関係な位置指定 */
right : 0px;
bottom : 0px;
z-index : 10;
}
/* タグ名と組みわせると、そのタグに指定の class や id がある場合のみ適応される */
span.red-text{ /* のタグ全てに適応される */
color : red; /* 文字色を赤色に */
}
nav#fix_lowerright{ /*
疑似クラス
疑似クラスはある条件が整った場合にのみ適応させることができるものです。
他のセレクタと組み合わせて条件が揃った時のみのスタイルを指定していきます。
これは非常に種類が多くややこしいので実際に触りながら使ってみて下さい。
リンク関係 (:link, :visited)
リンク (<a> タグ) に適応できる疑似クラスです。
a:link … 未訪問のリンクに適応
a:visited … 訪問済みのリンクに適応
未訪問のリンクと訪問済みで色を変えたい場合などに良く利用されます。
ブラウザの標準でも色が変わるようになっています。
マウス操作関係 (:hover, :action, :focus)
マウス操作によってスタイルを指定できる疑似クラスです。
:hover … 指定した要素にマウスが乗った時に適応※
:action … 指定した要素をクリックやタップした時に適応
:focus … テキスト入力欄などが選択された状態になった時に適応
※スマホなどのタッチデバイスでは、タップした後に他の要素をタップするまではhover状態になる
一つ目の○○ (:first-line, :first-letter, :first-child)
一つ目の行や文字、要素に対するスタイルを指定できます。
>span< タグを使ってもできますが、HTML ソースが見くくなるだけでなく管理・修正も間違えやすくなるので置き替えられる場合はこちらを使用しましょう。
:first-line … 要素内の1行目に対してのみ適応
:first-letter … 要素内の1文字目に対してのみ適応
:first-child … 親要素から見て1つ目になる要素に対してのみ適応
n番目の要素 (:nth-child(n), nth-of-type(n), nth-last-child(n), :nth-last-of-type(n))
親要素内の何番目に位置する要素かを判断してスタイルを適応します
上記の :first-child は、:nth-child(1) と同じです。
但し、この指定方法は CSS3 から対応なので古いブラウザには対応していません。
(現在ではほぼ100%のブラウザが対応していますが、古いブラウザでもレイアウトを絶対に崩したくないという方は使用をお控え下さい)
:nth-child(n) … 親要素から見てn番目になる要素に対してのみ適応
:nth-of-type(n) … 親要素から見てn番目になる指定した種類の要素に対してのみ適応
:nth-last-child(n) … 親要素の最後から数えてn番目になる要素に対してのみ適応
:nth-last-of-type(n) … 親要素の最後から数えてn番目になる要素に対してのみ適応
ここで、(n) の部分には以下の指定も可能です。
(odd) … 奇数番目
(even) … 偶数番目
(2n+1) … 奇数番目 (nを0から1ずつ増やしていった要素が指定される)
(2n) … 偶数番目 (同上、0は無視される)
(3n) … 3の倍数番目
(-n+5) … 最初の5個の要素
最後の要素 (:last-child)
親要素内で最後になる要素に対して適応されます。
:last-child … 親要素から見て一番後ろになる要素に対してのみ適応
属性セレクタ
属性セレクタでは要素が特定の属性を持っているかでスタイルを適応するか判断します。
また、属性値まで指定することも可能です。
タグやclassなどのセレクタ[属性] … 指定した属性がある要素のみに適応
タグやclassなどのセレクタ[属性=”属性値”] … 指定した属性と属性値がある要素のみに適応
例えば、新規ウインドウを開くリンクと開かないリンクで文字色を変える場合などは以下のようにします。
更に、target=”new” となっているリンクには疑似要素でアイコンを表示するようにすることもできます。
a{ /* 通常の新規ウインドウを開かないリンク */
color : blue;
}
a[target]{ /* aタグにtarget属性がある場合 */
color : green;
}
a[target="new"]::after{ /* target="new"のリンクにはアイコンを表示 */
content : '\f35d';
font-family : 'Font Awesome 5 Free';
font-weight : 900;
}
子孫セレクタ
子孫セレクタとはある要素の子要素や孫要素以下を従属的に指定するセレクタです。
以下のように親要素と子孫要素の間に半角スペースを開けることで指定できます。
親要素 子孫要素{
/* 適応するスタイル */
}
例えば、<article> タグ以下にある<h1> タグにのみスタイルを適応する場合などに有効です。
子孫セレクタを使うと親要素より上の階層にある要素には適応されませんので、記述が容易になります。
＜HTML＞
<h1>こちらは標準のスタイルが適応される</h1>
<article>
<h1>こちらは CSS で指定したスタイルになる</h1>
<p>子要素にも孫要素にも適応される (子要素)</p>
<section>
<p>子要素にも孫要素にも適応される (孫要素)</p>
</section>
</article>
＜CSS＞
article h1{
font-size : 1.2rem;
font-weight : 400;
}
article p{
color : red;
font-size : 0.85em;
line-height : 1.7em;
}
子セレクタ
上記の子孫セレクタでは孫要素以下まで適応されましたが、親要素の直下である子要素にのみスタイルをしていることができます。
以下のように親要素と子要素の間に ” > ” を入れることで指定できます。
親要素 > 子要素{
/* 適応するスタイル */
}
先ほどの子孫セレクタと比べてみて下さい。
HTMLの構造は同じです。
＜HTML＞
<h1>こちらは標準のスタイルが適応される</h1>
<article>
<h1>こちらは CSS で指定したスタイルになる</h1>
<p>子要素にだけ適応される</p>
<section>
<p>孫要素には適応されない</p>
</section>
</article>
＜CSS＞
article > h1{
font-size : 1.2rem;
font-weight : 400;
}
article > p{
color : red;
font-size : 0.85em;
line-height : 1.7em;
}
兄弟セレクタ
兄弟セレクタでは、兄要素の後ろに続く弟要素に対してスタイルを適応できます。
以下のように兄要素と弟要素の間に ” ~ ” を入れることで指定できます。
兄要素 ~ 弟要素{
/* 適応するスタイル */
}
＜HTML＞
<article>
<h1>兄弟セレクタ</h1>
<p>兄要素より前の要素には適応されない</p>
<p class="big-brother">兄要素</p>
<p>弟要素にだけ適応される</p>
</article>
＜CSS＞
p.big-brother ~ p{
color : red;
}
但し、この指定方法は CSS3 から対応なので古いブラウザには対応していません。
(現在ではほぼ100%のブラウザが対応していますが、古いブラウザでもレイアウトを絶対に崩したくないという方は使用をお控え下さい)
まとめ
以上、CSS のセレクタについてでした。
セレクタを理解するとソースが読みやすくなるだけでなく、構造を理解しながら組み立てられ、管理・修正もやりやすくなります。
なので、皆さん是非理解してどんどん使っていきましょう！
コメントを残す