CSSでコロン２つ（::beforeなど）やコロン１つ（:hoverなど）がついたプロパティの違いについて。
コロン２つ::とコロン１つ:の違い
- コロン２つ（::）は擬似要素
- コロン１つ（:）は擬似クラス
▼例外
コロン2つがつくべき擬似要素でも、コロン１つが使われている場合がある。（例 ::before ⇄ :before）
擬似要素にコロン２つが公式に使われるようになったのはCSS3（2011年以降から）。なので、昔の名残で擬似要素にコロン１つが使われている場合もある。
擬似要素と擬似クラスの違い
- 要素は適用対象の一部に変化を加えるもの。
- 擬似クラスは適用対象全体に変化を加えるもの。
▼名前の考え方
どちらも本来のcssではなく、後から処理を追加したり、JSで適用する処理をcssで実現したりする処理なので、擬似がつく。
cssなので適用対象はタグになる。あるタグ全体にcssを適用するときclass属性を使うため、擬似クラスと呼ぶ。
一方で、タグの中の一部の要素にのみ変化を加えるため擬似要素という。
例えば、テキストの文字全体にcssを追加する場合は擬似クラス（:）を使い、テキストの一文字目だけにcssを追加する場合は擬似要素（::）を使う。
擬似要素
擬似要素の一覧
・（参考）MDN 擬似要素
種類は多く見えるが、::grammer-errorや::markerなどchromeでサポートしていない仕様もある。
主な擬似要素の実例
1. ::before
指定した要素の前方に新たな要素を追加する（装飾する）。
・対象要素::before{ 処理 }
┗ contentプロパティで要素を追加できる。
┗ 指定がない場合インラインで適用する
・contentプロパティとは？
擬似要素::beforeと::afterでのみ使えるプロパティ。指定した値を追加できる。
実例
1-1. 前方にテキストを追加する
.u-prefix-hello::before{content:"こんにちは";color:red;font-weight:bold;}追加するテキストのCSSも定義できる。
<divclass="u-prefix-hello">元のテキスト</div>クラス（or id）属性に::beforeをつける必要はない。
cssの中に、対象のセレクタに対し::beforeが記述してあれば自動的に反映される。
▼ブラウザの表示とソースコード
 |
|---|
 |
ソースコードの要素を追加した箇所に::beforeと表示される。（※指定したテキストは表示されていない）
1-2. 前方に画像を追加する
contentプロパティの値にurlメソッドでパスを指定する。
.u-prefix-hello::before{content:url(/images/small-cat.jpg);display:inline-block;vertical-align:middle;} |
|---|
1-3. 前方に追加する画像のサイズを変更する
画像自体のサイズを変更することはできない。
このため、画像を表示する枠を用意し、その中に背景として画像を読み込む。
.u-prefix-hello::before{content:"";display:inline-block;width:100px;height:100px;background-image:url(/images/small-cat.jpg);background-size:contain;vertical-align:middle;}・content:はあえて""と記述する。
 |
|---|
・background-size: contain;
縦横比は保持して、枠に収まる最大サイズになるように背景画像を拡大縮小する。
他にも、autoの場合は自動で画像を繰り返す。coverの場合は枠に収まる最少サイズになるよう拡大縮小する。
1-4. 下線を表示する
::beforeを使うと、テキストに好きな長さの下線を引くことができる。
 |
|---|
.u-prefix-text{position:relative;}.u-prefix-text::before{content:'';position:absolute;display:inline-block;background:gold;width:70px;height:4px;bottom:0;}画面ではなく親要素に対して下線を引くため、親要素をposition: relative;にする。
親要素の一番下に線を引きたいため、::beforeにposition: absolute;とbottom: 0;を指定。あとは色や長さ高さを指定すればOK。
1-5. 上線を表示する
下線でbottom: 0としたところを、top: 0とすればOK。
.u-prefix-text{position:relative;}.u-prefix-text::before{content:'';position:absolute;display:inline-block;background:gold;width:70px;height:4px;top:0;} |
|---|
1-6. 左に線を表示する
 |
|---|
考え方は下線（上線）と同じ。::beforeで追加した要素のheightを文字サイズと同じにする。線の幅はwidthで指定。
このままだと文字と重なってしまうので、leftとtopで線を設置する位置を微調整すればOK。
.u-prefix-text{position:relative;}.u-prefix-text::before{content:'';position:absolute;display:inline-block;background:gold;width:3px;height:20px;top:2px;注意点
(1) htmlに::beforeの記述は不要
<div class="u-prefix-hello::before">元のテキスト</div>
::beforeも記述するとcssに何も適用されなくなる。
| ▼ブラウザの表示 |
|---|
 |
 |
(2) ::beforeで追加した要素はコピーできない
 |
|---|
ブラウザにはテキストではなく::beforeと表示されている。
値はcssで渡されているため。
 |
|---|
(3) 対象要素のcssは::beforeにも引き継がれる
::beforeをつける前の要素に適用してあるcssは::beforeで追加した要素にも適用される。ただし、同じプロパティを指定した場合は上書きとなる。
.u-prefix-hello{font-weight:bold;font-size:24px;color:blue;}.u-prefix-hello::before{content:'こんにちは';color:red;} |
|---|
font-weightやfont-sizeは元の要素の数値が適用される。
一方、colorは::beforeで指定した色で上書きされる。（元の要素はそのまま）
これらの注意点は::afterも同じ。
（補足）yahooニュースの例
 |
|---|
yahooニュースの見出しに、::beforeと::afterが使われている。
▼クラスjeCptPの::beforeと::after
 |
|---|
2. ::after
適用の仕方や注意点は::beforeと同じ。
指定した要素の後方を修飾する。
.u-suffix-hello{font-weight:bold;}.u-suffix-hello::after{content:"こんにちは";color:red;} |
|---|
3. ::first-letter
指定した要素の一文字めのcssを調整する。
 |
|---|
.u-first-emphasis::first-letter{font-size:20px;font-weight:bold;color:red;}<divclass="u-first-emphasis">元のテキスト</div>
▼spanタグを使った場合
spanタグで同じ処理ができるが、::first-letterの方が記述および使い回しが簡単。
<div><spanclass="u-emphasis">元</span>のテキスト</div>.u-emphasis{font-size:20px;font-weight:bold;color:red;}4. ::first-line
<br>で改行された文章の1行目のcssを変更する。
 |
|---|
.u-line-emphasis::first-line{color:blue;font-size:18px;font-weight:bold;}<divclass="u-line-emphasis">
Lorem ipsum dolor sit amet,<br>
consectetur adipisicing elit,<br>
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>擬似クラス
擬似クラスの一覧
・（参考）MDN 擬似クラス
主な擬似クラス
既存の要素にcssを追加する擬似クラス。
aタグのテキストを訪問状態によって色を変えたりする:link、visitedやホバーしたときにcssを適用する:hoverなどがある。
1. :hover
hover処理がcssのみで簡単に適用できる。
 |
|---|
.u-hover-yellow:hover{color:rgb(219,219,9);font-size:32px;font-weight:bold;}<divclass="u-hover-yellow">元のテキスト</div>2. :active
:activeを使うと、クリック中のcssを指定することができる。
 |
|---|
.u-active-red:active{color:red;font-size:32px;font-weight:bold;}<divclass="u-active-red">元のテキスト</div><aclass="u-active-red">aタグのリンク</div>3. :link, :visited
・:link
aタグのクリック前のcssを指定する。
・:visited
aタグのクリック後のcssを指定する。
 |
|---|
.u-link-green:link{color:green;}.u-visited-gold:visited{color:gold;}<aclass="u-link-green u-visited-gold"href="/">aタグのリンク</div>4. :focus
focusを持つ要素に対して、focus時のcssを指定できる。
 |
|---|
.u-focus-red:focus{background-color:lightyellow;color:red;font-weight:bold;}名前：<inputclass="u-focus-red"type="text"value="テスト 太郎"><br><br>メッセージ：<textareaclass="u-focus-red">▼focusを持つ要素
a, area, button, details, input, iframe, select, textarea
5. タグ名:nth-child(n)
指定したタグn番目の要素にcssを適用する。
- セレクタはタグ名であること（.や#は不可）
- 引数は、2nやodd, evenでの指定もできる。
- 他のタグの兄弟要素もカウントする
 |
|---|
ulli:nth-child(odd){color:red;font-size:18;}引数でoddを渡したので、1, 3番目のliタグが赤くなる。
<ul><li>liタグ１</li><li>liタグ２</li><li>liタグ３</li><li>liタグ４</li></ul>
▼注意点
- 兄弟要素に他の要素があるとそれもカウントする。
- cssが適用されるのは指定した番号の指定したタグのみ。
例えば、上記例でulタグの中の一番上にspanタグを挿入すると、カウント１はspanタグになる。
 |
|---|
ulli:nth-child(odd){color:red;font-size:18;}<ul><span>spanタグ</span><li>liタグ１</li><li>liタグ２</li><li>liタグ３</li><li>liタグ４</li></ul>１番目はspanタグ。よって、３番目のliタグ（liタグ３）と、５番目のliタグ（liタグ４）にcssが適用される。
6. :nth-of-type(n)
異なる兄弟要素のタグはカウントしない場合は:nth-of-typeを使う。
ulli:nth-of-type(odd){color:red;font-size:18;}<ul><span>spanタグ</span><li>liタグ１</li><li>liタグ２</li><li>liタグ３</li><li>liタグ４</li></ul> |
|---|
spanタグはカウントせず、liタグのみカウントしてcssを適用している。
7. :target
:targetクラスを使うとaタグの内部リンクへのジャンプに合わせてリンク先の要素にcssを適用することができる。
 |
|---|
.hide{display:none;}.hide:target{display:block;color:white;background:lightgray;height:60px;width:70%;}<ul><li><ahref="#message">:targetクラスを適用</a></li><li><ahref="#">他の要素にジャンプ（:targetが外れる）</a></li></ul><divid="message"class="hide">デフォルトdisplay="none"で非表示のメッセージです。
</div>:targetはページ内のリンク（<a href="#~">）で発火し、リンク先の要素にcssを適用する。
ページトップのリンク（<a href="#">）には要素が存在しないため、:targetのcssが外れる。