目次
教材：侍テラコヤ『HTML/CSSの基礎を学ぼう』https://terakoya.sejuku.net/programs/51/chapters
疑似要素とは
要素の一部にスタイルを適用したいときに指定するセレクタの書き方。
代表的な議事要素
(1) ::before : 要素の直前にコンテンツを追加する
(2) ::after : 要素の直後にコンテンツを追加する
(3) ::first-letter : 要素の最初の文字を装飾する
(4) ::first-line : 要素の最初の行を装飾する
使用方法
下記のHTMLを議事要素で装飾していく。
<!DOCTYPE html>
<html>
<head>
<title>タイトルです</title>
<meta charset="utf-8">
<link rel="stylesheet" href="pseudo-elements.css">
</head>
<body>
<h1>見出し1です</h1>
<p>段落1の1行目です<br>段落1の2行目です</p>
<h1>見出し2です</h1>
<p>段落2の1行目です<br>段落2の2行目です</p>
</body>
</html>
(1) ::before（要素の直前にコンテンツを追加する）
(2) ::aftar（要素の直後にコンテンツを追加する）
contentプロパティを使用して、h1要素の直前(before)にひし形記号◆、直後(after)に四角記号■を追加する。
h1::before {
content: "◆";
color: orange;
}
h1::after {
content: "■";
color: pink;
}
(3) ::first-letter（要素の最初の文字を装飾する）
p要素の最初の文字を24px、太字にする。
p::first-letter {
font-size: 24px;
font-weight: bold;
}
(4) ::aftar（要素の最初の行を装飾する）
p要素の最初の行のフォントサイズを24px、太字、文字色をグレーにする。
p::first-line {
font-size: 24px;
font-weight: bold;
color: gray;
}
疑似クラスとは
要素が特定の状態のときに適用できるセレクタのこと。
(1):link 未訪問のリンク(a要素など)にスタイルを適用する
(2):visited 訪問済みのリンク(a要素など)にスタイルを適用する
(3):hover 要素の上にマウスのカーソルが乗っているときにスタイルを適用する
(4):active 要素がアクティブ状態(マウスを左クリックしてから離すまで)のときにスタイルを適用する
(5):nth-child(n) 親要素内にあるすべての要素の中で、n番目の要素にスタイルを適用する
(6):nth-of-type(n) 親要素内にある同じ要素の中で、n番目の要素にスタイルを適用する
(7):not(A) 親要素内にあるAという要素以外にスタイルを適用する
※疑似要素は:(コロン)が２つ、疑似クラスは１つ。
使用方法
下記のHTMLを議事要素で装飾していく。
<!DOCTYPE html>
<html>
<head>
<title>タイトルです</title>
<meta charset="utf-8">
<link rel="stylesheet" href="pseudo-classes.css">
</head>
<body>
<div class="parent">
<h1>見出し1です</h1>
<a href="#">リンクです</a>
<p>段落１です</p>
<p>段落２です</p>
<p>段落３です</p>
<h2>見出し２です</h2>
<p>段落４です</p>
<p>段落５です</p>
<p>段落６です</p>
</div>
</body>
</html>
(1):link 未訪問のリンク(a要素など)にスタイルを適用する
(2):visited 訪問済みのリンク(a要素など)にスタイルを適用する
(3):hover 要素の上にマウスのカーソルが乗っているときにスタイルを適用する
(4):active 要素がアクティブ状態(マウスを左クリックしてから離すまで)のときにスタイルを適用する
a:link {
color:orange;
}
a:visited {
color: green;
}
a:hover {
color: purple;
}
a:active {
color: red;
}
(5):nth-child(n) 親要素内にあるすべての要素の中で、n番目の要素にスタイルを適用する
「段落２」を赤文字にする。段落２はh1要素から数えて４番目にあたるため、nに４を指定する。
.parent p:nth-child(4) {
color: red;
}
(6):nth-of-type(n) 親要素内にある同じ要素の中で、n番目の要素にスタイルを適用する
「段落４です」にスタイルを適用する。div要素内のp要素の中で４番目にあたるため、nには４を指定する。
.parent p:nth-of-type(4) {
color: blue;
}
(7):not(A) 親要素内にあるAという要素以外にスタイルを適用する
p要素以外の要素に取り消し線を引いてみる
.parent :not(p){
text-decoration: line-through;
}