Light TALK Plus＋ vol.11 「疑似要素・疑似クラス」
こんちはLight Webのアルバイト君です。
京成上野駅と日暮里駅の間に今は使われていない駅を知っていますか？
答えは「博物館動物園駅」です。
1933年に開業しましたが、老朽化や乗降客数の減少が響いたため、1997年には営業休止、2004年に廃止。
2018年に駅舎が「東京都選定歴史的建造物」に選定され、2019年2月24日まで一般公開されていました。
「Light TALK Plus＋」とは…
アルバイトが気になった今ホットなWEBニュースやティップスをお届けするコーナーです。
今回のテーマは「疑似要素・疑似クラス」です！
疑似要素・疑似クラス
「疑似要素」
要素の特定の部分に対してスタイル付けをするために使用するもの
::before ::after ::first-letter ::first-line
「疑似クラス」
選択された要素に対してスタイル付けをするために使用
:hover :active :nth-child :focus
「疑似要素 ::before ::after」
::beforeは要素の先頭、::afterは要素の後ろにcontentプロパティを使用し、装飾します。
●例１
こちらはテキストになります。
HTML
<p class=”text”>こちらはテキストになります。</p >
CSS
.text::before {
content: “”;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #0971ce;
position: absolute;
left: 15px;
top: 4px;
margin-right: 0;
}
.text::after {
content: “”;
content: “＞”;
border-radius: 50%;
color: #fff;
position: absolute;
left: 18.5px;
top: 7.5px;
font-size: 60%;
line-height: 1;
}
●例２
タイトル
HTML
<div class=”title”><p>タイトル</p></div>
CSS
sub-title::before {
content: “”;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 0;
height: 0;
border-top: 18px solid #E50012;
border-right: 27px solid;
transparent;
}
「疑似要素 ::placeholder」
::placeholder は、inputなどのplaceholderに装飾したい時に使用します。
placeholderに装飾するので、入力すると消えます。
●例
HTML
<input type=”email” placeholder=”メールアドレス” name=”login_mail” class=”login_mail” value=””>
CSS
input.login_mail::placeholder {
color: #d2d2d4;
padding-left: 28px;
max-width: 200px;
background: url(/wp-content/uploads/2019/09/mail.png) no-repeat 4px 2px;
background-size: 15px;
}
「疑似クラス :hover」
:hoverは、マウスカーソルを置いた時の装飾をしたい時に使用します。
主にaタグに使用しますが、aタグ以外のタグでも使用可能です。
●例
HTML
<p style=”opacity:1;”><a href=”#”><img src=”/wp-content/uploads/2019/09/apple1.jpeg”></a></p>
CSS
a{
background:url(https://s3.ap-northeast-1.amazonaws.com/lightweb.co.jp/wp-content/uploads/2019/09/10161252/apple2.jpeg) no-repeat;
background-size: 100%;
display: block;
}
a:hover
img {
opacity: 0;
width: 128px;
height: 128px;
}
「疑似クラス :nth-child」
nth-childは、ある要素内の中で指定した位置を選択できます。
:nth-child(odd)…奇数番目の要素
:nth-child(even)…偶数番目の要素
一番最初の要素は:first-child、一番最後の要素は:last-childが使えます。
●例
- リスト１
- リスト２
- リスト３
- リスト４
- リスト５
- リスト６
HTML
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
<li>リスト４</li>
<li>リスト５</li>
<li>リスト６</li>
</ul>
CSS
.box5 ul li:nth-child(even) {
background-color: green;
}
.box5 ul li:nth-child(odd) {
background-color: blue;
}
.box5 ul li:first-child {
background-color: red;
}
.box5 ul li:last-child {
background-color: orange;
}
以上が「CSSの疑似要素・疑似クラスについて」になります。
知らない機能があれば、ぜひ活用していただければ幸いです。
Light Webからのお知らせ
ライトウェブはプライバシーマークを取得しました！
今までも個人情報を取り扱う案件に携わって参りましたが、
より安心してお任せいただけるようになりました。
今後ともライトウェブをよろしくお願い致します！
