You are here: Home » css関係 » a:hover:focusとか疑似要素と疑似クラスの初歩

a:hover:focusとか疑似要素と疑似クラスの初歩

疑似要素・疑似クラス01

多分、cssを使った事のある人なら、知らないで使ってる可能性もある疑似要素と疑似クラスについての解説です。

僕自身は、疑似要素と疑似クラスをフルに使わなくてもwebサイトコーディングはできますので、がっつり使い切ったことは無かったのです。そういう意味で、この記事は僕の復習の側面もあります。

スポンサーリンク

擬似クラスと疑似要素

擬似クラス(英語表記=Pseudo-classes)は要素が特定の状態の場合にスタイルを指定する時に使います。

擬似要素(英語表記=Pseudo-elements)は要素内の特定の文字や行に対してスタイルを指定できます。

両方とも、セレクタ名のあとにコロン(:)をつけてます。

 

擬似クラスは指定したもの全体に効力を発揮し、擬似要素は一部の要素のみに効力を発揮します。

 

疑似クラスについて

a:link

a:link {
color: #000000;
}

ボタン

リンクがまだ未訪問状態にある場合に使います。

a:visited

a:visited {
color: #000000;
}

リンクがまだ未訪問状態にある場合につかます。

ボタン

a:hover

a:hover {
color: #000000;
}

マウスオンの状態のスタイルを指定できます。

ボタン

a:active

a:active {
color: #000000;
}

マウスがクリックされてから離れるまでのスタイルを指定できます。

ボタン

:focus

クリックで選択された状態のスタイルを指定できます。選択から外れたらスタイルが外れます。

<textarea name=”aaa” rows=”4″ cols=”10″>:focusはinput、textareaなどのformのようにユーザーが入力できる要素にだけ適用されます。</textarea>

textarea:focus {
background: #eee;
color: #000;
}

 

:lang

:lang擬似クラスは、特定の言語を指定して一致した場合のみ、スタイルを指定する、疑似クラスです。言語には、ja(日本語)、en(英語)、fr(フランス語)、zh(中国語)de(ドイツ語)、pt(ポルトガル語)、el(ギリシャ語)、es(スペイン語)などたくさんあります。

言語コード一覧

p:lang(en) {
font-family: italic;
font-style: italic;
}

<p lang=”en”>
The biggest…
</p>

私は紙の上に署名した、とブラッドは公式ザハラとマドックスを採用したときに私のための最大の変化はありました。私は突然、私は私の人生の残りのためにこの男に自分自身を抱き合わせたことに気づいたときには一日でした。それは何年も前のことでした。

The biggest change for me was when I signed over the papers, and Brad officially adopted Zahara and Maddox. That was the day when I realized that suddenly, I was tying myself to this man for the rest of my life. That was many years ago.

lang=”en”を指定した所だけフォントはfont-style: italic;を適用できたりできます。

他にも、:lang(C)と書くとc言語だ指定できたりできるらしい。

スポンサーリンク

疑似要素

擬似要素(英語表記=Pseudo-elements)は要素内の特定の文字や行に対してスタイルを指定したり、文字や画像を追加することができます。セレクタ名のあとにコロン(:)をつけてます。

 

:beforeと:after

:beforeはその要素の直前、:afterはその要素の直後の要素をcontentなどを使ってスタイルなどを指定できます。みんな使ってるclearfixもこの疑似要素を使ってます。

<a href=”#” >飴が好き</a>

上の「飴が好き」の直前に

:beforeで要素を指定することができます。

a:before {
content:”私は”;
}

:afterで直後の要素を指定できます。

a:after {
content:”です。”;
}

飴が好き

こうなります。テキスト以外の要素も指定できるので、正直なんでもデザインできる:beforeと:afterです。

また、content:””;が空白の状態でも、削除はしないでください、ないと動作しません。

 

:first-letter

ブロック要素の最初の文字にスタイルを設定できます。インライン要素には適用できません。

<p>ブロック要素の最初の文字にスタイルを設定できます</p>

.p:first-letter {
font-size:30px;
}

ブロック要素の最初の文字にスタイルを設定できます

<p>タグに:first-litterを指定したので、最初の「ブ」だけフォントサイズが30pxになります。

 

:first-line

ブロック要素の最初の行のスタイルを設定できます。インライン要素には適用できません。

<pre>ブロック要素の最初の行のスタイルを設定できます</br>
ブロック要素の最初の行のスタイルを設定できます</per>

pre:first-line {
color:#F00;
}

 

CSS3の疑似クラス

以下はcss3で採用された疑似クラスと疑似要素です。

:root

その文書のルート(文書の最上位の要素のこと、html文書ならhtml、xml文書ならxml)となる要素にスタイルを指定できます。

:root {
margin: 0;
padding: 0;
}

 

:nth-child(n)

:nth-child()は、指定する要素の隣接してる全てを数えて、n番目の子要素にスタイルを適用することがきます。nは0から始まります。

 

 

みどり
あお
みどり
あお
みどり
あお
みどり

 

こんな感じで交互にスタイルを指定できたりします。

また、数値で指定する場合と、奇数の場合はodd、偶数の場合はevenを指定しても同じです。

偶数

table.sample tr:nth-child(2n)

table.sample tr:nth-child(even)

上二つは同じ

奇数

li:nth-child(odd)

li:nth-child(2n+1)

上二つは同じ

他にも様々な指定方法があります。

:nth-child(n)の場合先頭の要素すべてを数えて(2n+1)や(even)など指定できます。

 

:nth-of-type(n)

上に書いた:nth-child(n)と非常に似ている疑似クラスで(n)の中の指定も同じです。

違いは:nth-child(n)の場合、指定したすべての要素を数えますが、:nth-of-type(n)の場合、兄弟関係にある、要素を対象とします。

 

 

あお

みどり

みどり
あお

みどり

みどり

strong:nth-of-type(2n) の場合、隣接する要素の<strong>の部分だけを数えて指定できます。つまり指定した要素のみを数え次々適用します。なので<p>タグを数えないでcolor:#FF0;を飛ばして適用してます。

これが、strong:nth-child(2n)の場合なら、隣接するすべての要素を数え指定した要素を見つけると次々適用します。

あんまり違わないけど違う。そして理解しづらいね。

 

:nth-last-child(n)

:nth-of-type(n)と:nth-child(n)は先頭から数えての指定でしたが、:nth-last-child(n)は後ろから数えて指定できます。lastからです。

そのほかは:nth-child(n)と同じです。

 

:nth-last-of-type(n)

:nth-of-type(n)の後ろから数えて版です。そのほかは同じです。

 

:first-child

:first-childは指定した要素に関係なく全ての要素を数えて、先頭のみを指定することができます。

キャプチャ

 

<p>最初だけ適用</p>
<p>後は適用されません</p>
<p>後は適用されません</p>

p:first-child {
color:#09C;
}

 

:first-of-type

指定した要素のみを数えて、先頭の要素にスタイルを設定します。:first-childは全て数えましたが、of-typeなので兄弟要素しか数えません。

 

p:first-of-type {
color:#09C;
}

 

:last-child

全ての要素を数えて、子要素の最後のみにスタイルを設定します。:nth-last-child(1)と同じ結果ですが。

キャプチャ.16
<p>後は適用されません</p>
<p>後は適用されません</p>
<p>最後だけ適用</p>

p:last-child {
color:#09C;
}

 

:last-of-type

指定した兄弟要素だけを数えて、子要素の最後の要素のみにスタイルを設定します。

p:last-of-type {
color:#09C;
}

:only-child疑似クラス

全ての要素を数えて、子要素が1つしかない場合に適用されます。
複数あった場合、適応されません。

<div class=”only”>
<p>一つしかない場合に適用</p>
</div>

 

下のような場合は適用されません。

 

<div class=”only”>
<p>最初だけ適用</p>
<p>最初だけ適用</p>
</div>

 

:only-of-type疑似クラス

指定した要素のみを数えて、子要素のが1つしかない場合に適用されます。
複数あった場合、適応されません。

.only p:only-child {
color: #09C;
}

 

:not(s)

(s)の中の指定したセレクタに当てはまらない要素にスタイルを適用します。

<p class=”not”>classあり</p>
<p>class無し</p>

 

p:not([class){
font-size: 30px;
}

classあり、なし

否定疑似クラスってやつです。*ユニバーサルセレクタなどで、要素すべてにスタイルを適用することはよくありますので、その枠からはみ出して、この要素には適用したくない、なんて時に使うこともあります。

 

:target

:targetはリンク先の要素にスタイルを指定できます。例えば画像をクリックするとポップアップで拡大表示や、リンクをクリックすると指定の要素をboderで囲ったりなんてことができます。

 

 

テスト

テストしました

 

:empty疑似クラス

要素内のテキストが空白や何もない場合にスタイルを適用できます。tableの入力や表示で空白の場合だけ色を目立たせたりできます。

 

:checked疑似クラス

ラジオボタン等でユーザーがチェックした項目にスタイルを指定できます。

リンゴ

バナナ

 

:enabledと:disabled

:enabledは、formで使うtextareaやbottonなどでユーザーが操作できる状態、つまり有効な時のスタイルを指定できます。
逆に:disabledは無効な状態のスタイルを指定します。

 


 

何かの条件があり、ボタンが押せないやフォームに入力できない状態=無効になっている時は:disabledが適用され、操作や入力できる状態=有効になった場合は:enabledが適用されたりします。

スポンサーリンク

コメントを残す