css独自の機能で唯一DOM構造に影響を及ぼすのが、
疑似要素です。
同じ様に、Javascriptの様な操作ができる
擬似クラスというのもあり、
この２つの機能を使いこなせるようになると、かなり効率的にcssを使いこなせるようになります。
逆にこの疑似要素と疑似クラスをちゃんと理解できないと、cssについては理解するのが難しくなるでしょう。
疑似要素
名前から分かる通り、擬似的にHTMLタグを追加します。
HTMLタグと言っても、divやspanというタグが追加されるわけではなく、名称の内タグが、指定のタグに中に追加されます。
ちなみに、リファレンスサイトに書かれている説明は次の通りです。
CSS の 擬似要素 (Pseudo-elements) は、
セレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。
出典 : https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements
なんだか、説明だけ聞いてもよく判りませんね。
プログラミングもそうですが、cssも、実際にコードを自分で書いて表示や結果を目で見て確認して初めて理解できるモノです。
書き方
疑似要素は、セレクタに:（コロン）を2つ付けて疑似要素
::before
要素の中の先頭に、任意の要素を追加できます。
beforeで文字を追加するサンプル
<p>タイトル</p>
<style>
p::before{
content:'[sample] ';
}
</style>
タイトル
::after
beforeと比較するとわかりやすいと思いますが、要素の後方に任意の要素を追加できます。
（インライン）ブロック要素追加するサンプル
<p>タイトル</p>
<style>
p::after{
content:'';
display:inline-block;
width:20px;
height:20px;
background-color:red;
}
</style>
タイトル
::first-line
文章の先頭行のスタイルだけを変更させることができます。
<p>文章サンプル
むかしむかしあるところに、おじいさんとおばあさんが暮らしていました。
おじいさんは、山へ芝刈りに
おばあさんは、川へ洗濯をしに行きました。</p>
<style>
p::first-line{
color:red;
}
</style>
文章サンプル
むかしむかしあるところに、おじいさんとおばあさんが暮らしていました。
おじいさんは、山へ芝刈りに
おばあさんは、川へ洗濯をしに行きました。
::first-letter
文章の先頭文字のスタイルだけを変更させることができます。
<p>タイトル</p>
<style>
p::first-letter{
color:red;
font-weight:bold;
font-size:1.2em;
}
</style>
タイトル
::selection
文章の選択をした箇所のみのスタイルを変更する命令です。
<div>文章サンプル
むかしむかしあるところに、おじいさんとおばあさんが暮らしていました。
おじいさんは、山へ芝刈りに
おばあさんは、川へ洗濯をしに行きました。</div>
<style>
div::selection{
background-color:red;
color:white;
}
</style>
※文字を選択してください。
文章サンプル
むかしむかしあるところに、おじいさんとおばあさんが暮らしていました。
おじいさんは、山へ芝刈りに
おばあさんは、川へ洗濯をしに行きました。
ポイント
疑似要素は、cssの古いバージョンでは、:（コロン）が１つのみの記載でしたが、css3より:（コロン）を２つ付けるようになりました。
:（コロン）１つでもエラーも出ないし、ちゃんと表示されますが、擬似クラスとの分別の為に仕様が定義されたので、今後表示されなくなる可能性があるので、正規の書き方に従ったほうがいいでしょう。
そして、他にもたくさんの疑似要素がありますが、現時点でよく使うのは、上記の５つです。
擬似クラス
擬似クラスは、疑似要素とは、名称は似ているけど、役割はまるで違います。
CSS の擬似クラス (pseudo-classes) は、
セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。
出典 : https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes
わかりやすく言うと、セレクタで選択されたタグの、さらに特定の状態を追加で指定できる機能です。
よく使う命令を見て理解していきましょう。
:hover
タグの上にマウスが乗っかった時にスタイルを変更できます。
<p class='class-1'>[sample] hover</p>
<style>
.class-1{
color : blue;
}
.class-1:hover{
color : red;
}
</style>
[sample] hover
:active
マウスがクリックされている状態の時にスタイルを変更できます。
<p class='class-2'>[sample] active</p>
<style>
.class-2{
color : blue;
}
.class-2:active{
color : red;
}
</style>
[sample] active
:link
AタグにセットされているURLで、まだ訪問していない時のスタイルがセットできます。
<a class='class-3' href='https://example.com/'>https://example.com/</a>
<style>
a.class-3:link{
background-color:blue;
color:white !important;
padding:10px;
}
</style>
https://example.com/
:visited
AタグにセットされているURLで、すでに訪問した事がある時のスタイルがセットできます。
<a class='class-4' href='https://blog.myntinc.com/'>https://blog.myntinc.com/</a>
<style>
a.class-4:visited{
background-color:red;
color:white !important;
padding:10px;
}
</style>
https://example.com/
:target
開いているURLにアンカーリンクがセットされている時に、それに該当するID値（name値）がセットされている場合に、スタイルがセットできます。
<div id='sample' class='class-5'>id=sample要素</div><style>
a.class-5:target{
background-color:green;
color:white !important;
padding:10px;
}
</style>
id=sample要素
:checked
inputタグのtype="checkbox"の場合に、チェックされている場合のスタイルをセットできます。
ハンバーガーメニューなどでよく使われます。
<label class='class-6'>
<input type='checkbox'>
<div>チェックされたら装飾が変わります。</div>
</label><style>
.class-6{
display:block;
padding:10px;
border:1px dashed black;
}
.class-6 input[type='checkbox']:checked + *{
background-color:orange;
color:white;
}
</style>
他にもあるよ
擬似クラスは、本当にたくさんあるので、こんなことできるかな〜と思って調べると出来てしまうことが多いでしょう。
ちなみに、自分は次のような擬似クラスをよく使います。
:empty （要素の中身が空の場合）
:disabled （disable属性がセットされている場合）
:root （htmlタグの事）
:nth-childと、:nth-of-type （子階層を数値や計算式で指定できます）
:first-child （子階層の１番目）
:last-child （子階層の最後）
※子階層を操作する:nth-of-typeや:nth-childは、非常にパワフルな機能なので、別の回で詳細を解説したいと思います。
0 件のコメント:
コメントを投稿