CSSセレクタの一覧表：スタイルを適用する要素を選択するセレクタの種類と書き方

/* 全ての要素と擬似要素に一致 */
*, ::before, ::after {
	box-sizing: border-box;
	min-inline-size: 0;
	padding-block: 0;
	padding-inline: 0;
	margin-block: 0;
	margin-inline: 0;
	border-style: solid;
	border-width: 0;
}
/* 特定の条件下の子要素に一致 */
.container :where(.entry > *+*) {
	margin-block-start: 1rem;
}

<div class="sample-block">
	<h1>見出しテキスト</h1>
	<p>段落の内容</p>
</div>

/* 見出し要素に一致 */
h1 {
	color: blue;
}
/* 段落要素に一致 */
p {
	margin-block: 1em 0;
}
/* 特定のclassに属する見出し要素に一致 */
.sample-block h1 {
	font-size: 1.5rem;
}

<div class="sample-block">
	<h1>見出しテキスト</h1>
	<h2>小見出しのテキスト</h2>
	<p>段落のテキスト</p>
</div>

/* 複数の要素に同じスタイルを指定する場合 */
h1 { font-family: sans-serif;}
h2 { font-family: sans-serif;}
p { font-family: sans-serif;}

/* セレクタ・リストで一括指定が可能 */
h1, h2, p {
	font-family: sans-serif;
}
/* 擬似要素に共通のスタイルを指定 */
.archive::before,
.archive::after {
	max-width: 300px;
}

<nav class="side-menu">
	<ul class="contents">
		<li><a href="/">Item</a></li>
		<li><a href="/">Item</a></li>
		<li><a href="/">Item</a></li>
	</ul>
</nav>

/* nav要素に含まれるul要素に一致 */
nav ul {
	padding: 0;
}
/* クラスの子要素に配置されたli要素を全て選択 */
.side-menu li {
	border-inline-start: 3px solid #0099ff;
}
/* 子孫結合子の組み合わせで条件を絞り込む */
.contents li > a {
	display: block;
}

<nav class="side-menu">
	<ul class="contents">
		<li><a href="/">Item</a></li>
		<li><a href="/">Item</a></li>
		<li><a href="/">Item</a></li>
	</ul>
</nav>

/* nav要素の直接子要素であるul要素に一致 */
nav > ul {
	padding: 0;
}
/* 子結合子を連結して条件を絞り込む */
.contents > li > a {
	display: block;
}
/* 条件に一致していないため選択されない */
.side-menu > li {
	border-inline-start: 3px solid #0099ff;
}

<article class="post-content">
	<h1 class="post-title">投稿記事のタイトル</h1>
	<p>記事の内容を表すテキスト。</p>
	<p>記事の内容を表すテキスト。</p>
	<section class="pr">
		<a href="pr">[PR]おすすめの記事</a>
	</section>
	<p>記事の内容を表すテキスト。</p>
	<p>記事の内容を表すテキスト。</p>
</nav>

/* 見出し要素に続く最初の段落に一致 */
h1 + p {
	margin-block-start: 2rem;
}
/* classセレクタに一致する要素に続く段落 */
.pr + p {
	border-block-start: 1px dotted #ccc;
}
/* 条件に一致した親要素に含まれる全ての隣接要素 */
.post-content :where(*+*) {
	margin-block-start: 1rem;	
}
/* 後続する要素が隣接していないため無効 */
.post-title + .pr {
	display: none;
}

<article class="post-content">
	<h1 class="post-title">投稿記事のタイトル</h1>
	<p>記事の内容を表すテキスト。</p>
	<p>記事の内容を表すテキスト。</p>
	<section class="pr">
		<a href="pr">[PR]おすすめの記事</a>
	</section>
	<p>記事の内容を表すテキスト。</p>
	<p>記事の内容を表すテキスト。</p>
</nav>

/* 見出しの後に続く同じ階層の段落に一致 */
h1 ~ p {
	margin-block-start: 1rem;
}
/* classセレクタの後に配置された別のclassセレクタに一致 */
.post-title ~ .pr {
	display: block;
}
/* 最初配置された段落の後に続く段落に一致 */
.post-content :where(p~p) {
	margin-block-start: 1rem;	
}
/* 同じ階層に存在しないため無効 */
.post-title ~ a {
	color: #ff0066;
}

<table class="table">
	<col class="name">
	<col span="2" class="category">
	<tr>
		<th scope="col">項目</td>
		<th scope="col">見出し</td>
		<th scope="col">見出し</td>
	</tr>
	<tr>
		<th scope="row">項目</th>
		<td>セル</td>
		<td>セル</td>
	</tr>
	<tr>
		<th scope="row">項目</th>
		<td>セル</td>
		<td>セル</td>
	</tr>
</nav>

/* 特定の列に属するセルを選択 */
col.name || td {
	white-space: nowrap;
}
col.category || td {
	overflow-wrap: anywhere;
}

<div class="sample-block">
	<h1 class="heading">見出しテキスト</h1>
	<p class="inline">段落の内容</p>
</div>

/* class属性の値に一致 */
.sample-block {
	padding-inline: 1rem;
}
/* 要素名とclass属性の値に一致 */
h1.heading {
	border-block-end: 1px solid gray;
}
/* 子要素に配置されたclass属性の値に一致 */
div .inline {
	line-height: 1.75;
}

<div id="sample-block">
	<h1 id="title">サイトタイトル</h1>
	<h2 id="subtitle">サブタイトル</h2>
</div>

/* id属性の値に一致 */
#title {
	font-family: Helvetica Neue, Arial, sans-serif;
}
/* 要素名とid属性の値に一致 */
h2#subtitle {
	font-size: 0.75rem;
}
/* 特定の条件でid値を絞り込む */
.sample-block #title {
	text-decoration: underline;
}

<nav aria-label="サイトメニュー">
	<ul class="list menu" data-columns="4">
		<li><a href="/" title="Home">Home</a></li>
		<li><a href="/blog" title="Blog">Blog</a></li>
		<li><a href="/photo" title="Photo">Photo</a></li>
		<li><a href="/about" title="About">About</a></li>
	</ul>
</nav>

/* aria-label属性を持つnav要素に一致 */
nav[aria-label] {
	padding-inline: 1rem;
}
/* nav要素の子孫に配置されたdata-columns属性に一致 */
nav [data-columns] {
	display: grid;
}
/* classセレクタ等と組み合わせることも可能 */
.list[data-columns] {
	gap: 0.25rem;
}

<nav aria-label="サイトメニュー">
	<ul class="list menu" data-columns="4">
		<li><a href="/" title="Home">Home</a></li>
		<li><a href="/blog" title="Blog">Blog</a></li>
		<li><a href="/photo" title="Photo">Photo</a></li>
		<li><a href="/about" title="About">About</a></li>
	</ul>
</nav>

/* data-columns属性の値が4のul要素に一致 */
ul[data-columns="4"] {
	grid-template-columns: repeat(4, 1fr);
}
/* nav要素の子孫の中で特定の属性と値を持つ要素に一致 */
nav [title="Home"] {
	background-color: #ccc;
}
/* 複数の値を持つ属性も選択可能 */
nav [class="list menu"] {
	gap: 0.5rem;
}
/* 値の文字列が一致しないため選択されない */
nav [class="menu"] {
	gap: 0.5rem;
}

<div class="sample-block">
	<div class="item">item</div>
	<div class="Item">Item</div>
	<div class="ITEM">ITEM</div>
</div>

/* 共通のスタイル */
.sample-block {
	display: grid;
}
.sample-block div {
	padding: 0.5rem;
	border-block-end: 1px solid gray;
}
/* i識別子を追加すると大文字・小文字を区別しない */
[class="item" i] {
	color: red;
}

<div class="sample-block">
	<div class="item">item</div>
	<div class="Item">Item</div>
	<div class="ITEM">ITEM</div>
</div>

/* 共通のスタイル */
.sample-block {
	display: grid;
}
.sample-block div {
	padding: 0.5rem;
	border-block-end: 1px solid gray;
}
/* s識別子を追加すると大文字・小文字を区別する */
[class="item" s] {
	color: red;
}

<div class="sample-block">
	<p class="text-red-600 font-sans font-bold">段落の内容を表すテキスト。</p>
	<p class="text-green-600 font-sans">段落の内容を表すテキスト。</p>
	<p class="text-blue-600 font-serif">段落の内容を表すテキスト。</p>
</div>

/* 共通のスタイル */
.sample-block p {
	margin-block: 1rem 0;
}
/* class属性の値が部分一致するセレクタ */
[class~="text-red-600"] {
	color: rgb(220 38 38);
}
[class~="text-green-600"] {
	color: rgb(22 163 74);
}
[class~="text-blue-600"] {
	color: rgb(37 99 235);
}
[class~="font-sans"] {
	font-family: Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
}
[class~="font-serif"] {
	font-family: Hiragino Mincho ProN, Yu Mincho, serif;
}
[class~="font-bold"] {
	font-weight: bold;
}

<div class="sample-block">
	<p class="red green blue">red green blue</p>
	<p class="green blue red">green blue red</p>
	<p class="blue red green">blue red green</p>
</div>

/* 共通のスタイル */
.sample-block p {
	margin-block: 1rem 0;
}
/* class属性の値が前方一致するセレクタ */
[class^="red"] {
	color: red;
}
[class^="green"] {
	color: green;
}
[class^="blue"] {
	color: blue;
}

<div class="sample-block">
	<p class="red green blue">red green blue</p>
	<p class="green blue red">green blue red</p>
	<p class="blue red green">blue red green</p>
</div>

/* 共通のスタイル */
.sample-block p {
	margin-block: 1rem 0;
}
/* class属性の値が後方一致するセレクタ */
[class$="red"] {
	color: red;
}
[class$="green"] {
	color: green;
}
[class$="blue"] {
	color: blue;
}

<div class="sample-block">
	<p class="border-redColor">border-redColor</p>
	<p class="border-greenColor">border-greenColor</p>
	<p class="border-blueColor">border-blueColor</p>
</div>

/* 共通のスタイル */
.sample-block p {
	margin-block: 1rem 0;
}
/* class属性の値が部分一致するセレクタ */
[class*="border"] {
	border-block-end: 2px solid;
}
[class*="red"] {
	border-color: red;
}
[class*="green"] {
	border-color: green;
}
[class*="blue"] {
	border-color: blue;
}

<div class="sample-block">
	<p class="border-red">border-red</p>
	<p class="border-green">border-green</p>
	<p class="border-blue">border-blue</p>
</div>

/* 共通のスタイル */
.sample-block p {
	margin-block: 1rem 0;
}
/* class属性の値が完全一致かハイフン前先頭一致するセレクタ */
[class|="border"] {
	border-block-end: 2px solid;
}
/* 条件に一致しないため適用されない */
[class|="red"] {
	border-color: red;
}
[class|="green"] {
	border-color: green;
}
[class|="blue"] {
	border-color: blue;
}

/* p要素ではない全ての要素に一致 */
:not(p) {}

/* div要素のうちitemクラスを持たないもの */
div:not(.item) {}

/* div要素のうちitemクラスを持たないもの（強調） */
div:not(:is(.item)) {}

/* header要素の中のnav要素以外に一致 */
header :not(nav) {}

/* クラスセレクタ内の先頭に配置されたp要素を除外 */
.entry > p:not(:first-child) {}

/* クラスセレクタ内の特定のクラス名を持つp要素を除外（複数指定） */
.entry > p:not(.meta, .comment) {}

/* p要素であれば一致 */
:is(p) {}

/* div要素がitemクラスを持っていれば一致 */
div:is(.item) {}

/* div要素にhoverイベントが発生したら一致 */
div:is(:hover) {}

/* header要素の中にnav要素があれば一致 */
header :is(nav) {}

/* クラスセレクタ内の先頭に配置されたp要素に一致 */
.entry > p:is(:first-child) {}

/* クラスセレクタ内の特定のクラス名を持つp要素に一致（複数指定） */
.entry > p:is(.meta, .comment) {}

/* 階層が深い場所に配置された見出しを一括で選択 */
section > :is(h1, h2, h3) :is(h1, h2, h3) {}

/* p要素であれば一致 */
:where(p) {}

/* div要素がitemクラスを持っていれば一致 */
div:where(.item) {}

/* div要素にhoverイベントが発生したら一致 */
div:where(:hover) {}

/* header要素の中にnav要素があれば一致 */
header :where(nav) {}

/* クラスセレクタ内の先頭に配置されたp要素に一致 */
.entry > p:where(:first-child) {}

/* クラスセレクタ内の特定のクラス名を持つp要素に一致（複数指定） */
.entry > p:where(.meta, .comment) {}

/* 階層が深い場所に配置された見出しを一括で選択 */
section > :where(h1, h2, h3) :where(h1, h2, h3) {}

/* p要素を子孫に持つdiv要素に一致 */
div:has(p) {}

/* p要素を直接の子に持つdiv要素に一致 */
div:has(> p) {}

/* div要素がredまたはblueクラスの子孫を持つ場合に一致 */
div:has(.red, .blue) {}

/* div要素がredおよびblueクラスの子孫を持つ場合に一致 */
div:has(.red):has(.blue) {}

/* div要素の子孫でhoverイベントが発生した子孫を持つ要素に一致 */
div :has(:hover) {}

/* 隣接する見出しがある場合の見出しに一致 */
:where(h1, h2, h3):has(+h2, +h3) {}

/* 子にtocクラスを持つul要素を除外 */
ul > :has(:not(.toc)) {}

/* サイト全体で使うグローバル変数を定義 */
:root {
	--font-family-sans: Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
	--font-family-serif: Hiragino Mincho ProN, Yu Mincho, serif;
	--color-text: #080808;
	--color-base: #f8f8f8;
	--global-padding-inline: 1rem;
}

/* 全ての空要素に一致 */
:empty {
	display: none;
}

/* ul要素の子要素に空の項目があれば一致 */
ul > :empty {
	block-size: 1lh;
}

/* 段落要素が空でなかった場合に一致 */
p:not(:empty) {
	margin-block-start: 1rem;
}

<ol class="sample-list">
	<li>Item</li>
	<li>Item</li>
	<li></li>
	<li>Item</li>
	<li>Item</li>
</ol>

/* 共通のスタイル */
.sample-list li {
	border-bottom: 1px solid gray;
}
/* 順序リストの中に空項目があった場合に飛ばす */
.sample-list > li:empty {
	visibility: hidden;
}

/* 同じ階層の全ての順番を選択して無条件に一致 */
:nth-child(n) {}

/* 同じ階層の1番目を選択してp要素であれば一致 */
p:nth-child(1) {}

/* 同じ階層の2番目の倍数の順序を選択してli要素に一致 */
li:nth-child(2n) {}

/* 0から始まるnの起点を1にして2つごとのli要素に一致 */
li:nth-child(2n+1) {}

/* 9番目を起点にさかのぼり3つごとのli要素に一致 */
li:nth-child(-3n+9) {}

/* 5番目以降に配置されたクラスセレクタに一致 */
.item:nth-child(n+5) {}

/* 5番目以前に配置されたクラスセレクタに一致 */
.item:nth-child(-n+5) {}

/* テーブルセルの奇数番目（1,3,5...）に一致 */
tr > td:nth-child(odd) {}

/* テーブルセルの偶数番目（2,4,6...）に一致 */
tr > td:nth-child(even) {}

/* 同じ階層の全ての順番を選択して無条件に一致 */
:nth-last-child(n) {}

/* 最後から1番目を選択してp要素であれば一致 */
p:nth-last-child(1) {}

/* 最後から2番目の倍数の順序を選択してli要素に一致 */
li:nth-last-child(2n) {}

/* 0から始まるnの起点を1にして最後から2つごとのli要素に一致 */
li:nth-last-child(2n+1) {}

/* 最後から数えて9番目を起点に3つごとのli要素に一致 */
li:nth-last-child(-3n+9) {}

/* 最後から数えて5番目以前のクラスセレクタに一致 */
.item:nth-last-child(n+5) {}

/* 最後から数えて5番目以降のクラスセレクタに一致 */
.item:nth-last-child(-n+5) {}

/* テーブルセルの最後を起点（1）として奇数番目（10,8,6...）に一致 */
tr > td:nth-last-child(odd) {}

/* テーブルセルの最後を起点（1）として偶数番目（9,7,5...）に一致 */
tr > td:nth-last-child(even) {}

<ul class="sample-list">
	<li><span>Category</span>
		<ol>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
		</ol>
	</li>
	<li><span>Category</span>
		<ol>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
		</ol>
	</li>
	<li><span>Category</span>
		<ol>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
		</ol>
	</li>
</ul>

/* 共通のスタイル */
.sample-list {
	padding-inline: 1rem 0;
	margin-block: 1rem 0;
}
/* 共通の親要素を持つ兄弟の最初の要素だけが一致 */
.sample-list span:first-child {
	display: block;
	padding-inline: 0.5rem;
	background-color: #ccc;
}
.sample-list li:first-child {
	background-color: #fcc;
}

<div class="sample-block">
	<div class="item">
		<h2>見出し要素</h2>
		<p>段落の内容を表すテキスト。</p>
		<div>この階層の最終要素：div</div>
	</div>
	<div class="item">
		<h2>見出し要素</h2>
		<p>段落の内容を表すテキスト。</p>
		<span>この階層の最終要素：span</span>
	</div>
	<div class="item">
		<h2>見出し要素</h2>
		<p>段落の内容を表すテキスト。</p>
		<aside>この階層の最終要素：aside</aside>
	</div>
</div>

/* 共通のスタイル */
.sample-block .item {
	margin-block: 1rem 0;
}
.sample-block h2 {
	margin: 0;
	font-size: 1rem;
}
.sample-block p {
	margin: 0;
}
/* class名がitemの最後の要素に一致 */
.sample-block .item:last-child {
	text-align: right;
}
/* class名がitemの親に属する最後の子要素に一致 */
.sample-block .item :last-child {
	color: red;
}

<ul class="sample-list">
	<li>Item</li>
</ul>

<ul class="sample-list">
	<li>Item</li>
	<li>Item</li>
</ul>

<ul class="sample-list">
	<li>Item
		<ul class="sample-list">
			<li>Item</li>
		</ul>
	</li>
	<li>Item</li>
	<li>Item</li>
</ul>

/* 共通のスタイル */
.sample-list {
	padding-inline: 1.5rem;
	border: 1px solid gray;
}
/* リストに含まれる唯一の項目だった場合に一致 */
li:only-child {
	color: red;
}

/* 同じ階層のp要素だけをカウントして全てに一致 */
p:nth-of-type(n) {}

/* 同じ階層に配置された要素の中で最初のspanに一致 */
span:nth-of-type(1) {}

/* 要素ごとに2の倍数の順番を選択して.itemクラスであれば一致 */
.item:nth-of-type(2n) {}

/* 0から始まるnの起点を1にして2つごとに.itemクラスであれば一致 */
.item:nth-of-type(2n+1) {}

/* 10番目以降のtd要素に一致（thがあっても数がずれない） */
td:nth-of-type(n+10) {}

/* 2番目以前のtd要素に一致（thがあっても数がずれない） */
td:nth-of-type(-n+2) {}

/* テーブルの奇数番目（1,3,5...）に配置された行のセルに一致 */
tr:nth-of-type(odd) td {}

/* テーブルの偶数番目（2,4,6...）に配置された行のセルに一致 */
tr:nth-of-type(even) td {}

<table class="sample-table">
	<tr>
		<th>A1行<th>B列<th>C列<th>D列<th>E列<th>F列
	</tr>
	<tr>
		<th>A2行<td>B2<td>C2<td>D2<td>E2<td>F2
	</tr>
	<tr>
		<th>A3行<td>B3<td>C3<td>D3<td>E3<td>F3
	</tr>
	<tr>
		<th>A4行<td>B4<td>C4<td>D4<td>E4<td>F4
	</tr>
	<tr>
		<th>A5行<td>B5<td>C5<td>D5<td>E5<td>F5
	</tr>
	<tr>
		<th>A6行<td>B6<td>C6<td>D6<td>E6<td>F6
	</tr>
</table>

/* 先頭のth要素だけに幅を指定する */
th:nth-of-type(1) {
	inline-size: 14%;
}
/* 奇数行に含まれるセルの背景色を変える */
tr:nth-of-type(odd) td {
	background-color: #ffffee;
}
/* 偶数行に含まれるセルの背景色を変える */
tr:nth-of-type(even) td {
	background-color: #eeffff;
}
/* 2番目以前のtd要素の文字色を変える */
td:nth-of-type(-n+2) {
	color: red;
}
/* 4番目以降のtd要素の文字色を変える */
td:nth-of-type(n+4) {
	color: green;
}

/* 同じ階層のp要素だけをカウントして全てに一致 */
p:nth-last-of-type(n) {}

/* 同じ階層に配置された要素の中で最後のspanに一致 */
span:nth-last-of-type(1) {}

/* 最後から2の倍数の順でさかのぼり.itemクラスであれば一致 */
.item:nth-last-of-type(2n) {}

/* 0から始まるnの起点を1にして最後から2つごとに.itemクラスであれば一致 */
.item:nth-last-of-type(2n+1) {}

/* 最後から5番目以前のtd要素に一致（thがあっても数がずれない） */
td:nth-last-of-type(n+5) {}

/* 最後から5番目以降のtd要素に一致（thがあっても数がずれない） */
td:nth-last-of-type(-n+5) {}

/* テーブルの奇数番目（1,3,5...）に配置された行のセルに一致 */
tr:nth-last-of-type(odd) td {}

/* テーブルの偶数番目（2,4,6...）に配置された行のセルに一致 */
tr:nth-last-of-type(even) td {}

<div class="sample-block">
	<h2>h2：見出し要素</h2>
	<p>p：段落の内容を表すテキスト。</p>
	<p>p：段落の内容を表すテキスト。</p>
	<h2>h2：見出し要素</h2>
	<p>p：段落の内容を表すテキスト。</p>
	<p>p：段落の内容を表すテキスト。</p>
	<aside>aside：余談を表す内容。</aside>
</div>

/* 同じタグ名の最初に配置された要素に背景を敷く */
.sample-block :first-of-type {
	background-color: transparent;
	background-image: linear-gradient(to right, #00ffcc 0%, #00ff66 100%);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% 50%;
}

<div class="sample-block">
	<h2>h2：見出し要素</h2>
	<p>p：段落の内容を表すテキスト。</p>
	<p>p：段落の内容を表すテキスト。</p>
	<h2>h2：見出し要素</h2>
	<p>p：段落の内容を表すテキスト。</p>
	<p>p：段落の内容を表すテキスト。</p>
	<aside>aside：余談を表す内容。</aside>
</div>

/* 同じタグ名の最後に配置された要素に背景を敷く */
.sample-block :last-of-type {
	background-color: transparent;
	background-image: linear-gradient(to right, #00ffcc 0%, #00ff66 100%);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% 50%;
}

/* ドキュメントの中で唯一存在しているタグに一致 */
:only-of-type {}

/* ul要素の子孫で唯一存在するタグに一致 */
ul :only-of-type {}

/* main要素の子要素で唯一存在するタグのうちクラスセレクタに一致 */
main > .post:only-of-type {}

/* 唯一存在するタグに属性セレクタが見つかれば一致 */
.entry [data-open]:only-of-type {}

/* article要素に兄弟がなかった場合に子のクラスセレクタに一致 */
article:only-of-type > .open {}

/* 全てのハイパーリンクに一致 */
:any-link {}

/* 詳細度を上げずに指定する */
:where(:any-link) {}

/* href属性を持つ全てのa要素に一致 */
a:any-link {}

/* href属性を持つa要素にhoverイベントが発生した場合に一致 */
a:any-link:hover {}

/* メディアクエリのany-hoverが有効なデバイス向けの指定 */
@media (any-hover: hover) {
	:where(:any-link):hover {
		--hover-on: initial;
		--hover-off: ;
	}
}

/* 全ての未訪問のハイパーリンクに一致 */
:link {}

/* 詳細度を上げずに指定する */
:where(:link) {}

/* href属性を持つ未訪問のa要素に一致 */
a:link {}

/* 未訪問のa要素にhoverイベントが発生した場合に一致 */
a:link:hover {}

/* メディアクエリのany-hoverが有効なデバイス向けの指定 */
@media (any-hover: hover) {
	:where(:link):hover {
		--hover-on: initial;
		--hover-off: ;
	}
}

/* 全ての訪問済みのハイパーリンクに一致 */
:visited {}

/* 詳細度を上げずに指定する */
:where(:visited) {}

/* href属性を持つ訪問済みのa要素に一致 */
a:visited {}

/* 訪問済みのa要素にhoverイベントが発生した場合に一致 */
a:visited:hover {}

/* メディアクエリのany-hoverが有効なデバイス向けの指定 */
@media (any-hover: hover) {
	:where(:visited):hover {
		--hover-on: initial;
		--hover-off: ;
	}
}

/* フラグメントの文字列と同じid属性の値があれば一致 */
:target {}

/* 詳細度を上げずに指定する */
:where(:target) {}

/* フラグメントの一致をp要素に限定する */
p:target {}

/* フラグメントに一致した要素の子にスタイルを適用 */
article:target > h1 {}

/* フラグメントに一致した要素に擬似要素を追加 */
section:target::before {}

<!-- リンクをクリックしてURLにフラグメントを追加 -->
<a href="#section_heading">ページ内リンク</a>

<!-- // URLのフラグメントと同じid値を持つ要素に一致 -->
<div>
	<h2 id="section_heading">セクションの見出し</h2>
	<p>段落の内容を表すテキスト。</p>
	<p>段落の内容を表すテキスト。</p>
</div>

/* :rootと同じ */
:scope {}

/* スコープ付きのスタイルルールの中で使用 */
@scope (.theme-light) {
	:scope {
		--theme-base-main: #f8f8f8;
		--theme-text-main: #242424;
	}
}
@scope (.theme-dark) {
	:scope {
		--theme-base-main: #242424;
		--theme-text-main: #f8f8f8;
	}
}

/* .containerから.itemまでを範囲とする */
@scope (.container) to (:scope > .item) {}

/* ポインターが重なった全ての要素に一致 */
:hover {}

/* a要素にポインターが重なった場合に一致 */
a:hover {}

/* 特定のクラスにポインターが重なった場合に一致 */
.class:hover {}

/* フォームの子に配置されたボタンがホバー状態になった時に一致 */
form button:hover {}

/* CSSに記載する順番 */
a:link {/* 未訪問リンクのスタイル */}
a:visited {/* 訪問済みリンクのスタイル */}
a:hover {/* ホバー時のスタイル */}
a:active {/* アクティブ時ののスタイル */}

<div class="sample-block" ontouchstart>
	<div class="item"></div>
</div>

/* 共通のスタイル */
.sample-block .item {
	padding: 1rem;
	border: 3px solid;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
}
/* 要素の状態で背景色を変える */
.item:hover {
	background-color: yellow;
}
.item:active {
	background-color: pink;
}
/* 要素の状態で擬似要素の内容を変える */
.item::before {
	content: "Click!";
}
.item:hover::before {
	content: "Hover!";
}
.item:active::before {
	content: "Active!";
}

/* アクティブな状態にある全ての要素に一致 */
:active {}

/* a要素がアクティブになった場合に一致 */
a:active {}

/* 特定のクラスがアクティブになった場合に一致 */
.class:active {}

/* フォームの子に配置されたボタンが押下された時に一致 */
form button:active {}

/* CSSに記載する順番 */
a:link {/* 未訪問リンクのスタイル */}
a:visited {/* 訪問済みリンクのスタイル */}
a:hover {/* ホバー時のスタイル */}
a:active {/* アクティブ時ののスタイル */}

<div class="sample-block" ontouchstart>
	<div class="item"></div>
</div>

/* 共通のスタイル */
.sample-block .item {
	padding: 1rem;
	border: 3px solid;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
}
/* 要素の状態で背景色を変える */
.item:hover {
	background-color: yellow;
}
.item:active {
	background-color: pink;
}
/* 要素の状態で擬似要素の内容を変える */
.item::before {
	content: "Click!";
}
.item:hover::before {
	content: "Hover!";
}
.item:active::before {
	content: "Active!";
}

/* フォーカス状態になった全ての要素に一致 */
:focus {}

/* フォーカス状態になったa要素に一致 */
a:focus {}

/* nav要素の子でフォーカス状態になった要素に一致 */
nav > :focus {}

<div class="sample-block">
	<label class="red">
		<input type="text" value="フォーカスを移動">
		<span>.red</span>
	</label>
	<label class="green">
		<input type="text" value="フォーカスを移動">
		<span>.green</span>
	</label>
	<label class="blue">
		<input type="text" value="フォーカスを移動">
		<span>.blue</span>
	</label>
</div>

/* 共通のスタイル */
.sample-block label {
	display: flex;
	gap: 0.5rem;
	padding: 5px;
}
/* フォーカス状態になった要素の装飾 */
.red :focus {
	background-color: red;
}
.green :focus {
	background-color: green;
}
.blue :focus {
	background-color: blue;
}

/* 自身か子孫がフォーカス状態になった全ての要素に一致 */
:focus-within {}

/* 自身か子孫がフォーカス状態になったform要素に一致 */
form:focus-within {}

/* form要素の中のフォーカス状態になった自身や子孫を持つ要素に一致 */
form :focus-within {}

<div class="sample-block">
	<label class="red">
		<input type="text" value="フォーカスを移動">
		<span>.red</span>
	</label>
	<label class="green">
		<input type="text" value="フォーカスを移動">
		<span>.green</span>
	</label>
	<label class="blue">
		<input type="text" value="フォーカスを移動">
		<span>.blue</span>
	</label>
</div>

/* 共通のスタイル */
.sample-block label {
	display: flex;
	gap: 0.5rem;
	padding: 5px;
}
/* 自身か子孫がフォーカス状態になった要素の装飾 */
.sample-block .red:focus-within {
	background-color: red;
}
.sample-block .green:focus-within {
	background-color: green;
}
.sample-block .blue:focus-within {
	background-color: blue;
}

/* ユーザーエージェントがフォーカス状態を明示する要素に一致 */
:focus-visible {}

/* フォーカス状態を明示べきと判断されたa要素に一致 */
a:focus-visible {}

<div class="sample-block">
	<span class="normal">
		<input type="text" value="既定値">
		<button>変化を確認</button>
	</span>
	<span class="focus">
		<input type="text" value=":focus">
		<button>変化を確認</button>
	</span>
	<span class="focus-visibl">
		<input type="text" value=":focus-visible">
		<button>変化を確認</button>
	</span>
</div>

/* 共通のスタイル */
.sample-block span {
	display: flex;
	gap: 0.5rem;
	padding: 5px;
}
/* フォーカス状態になった要素の装飾 */
.focus :focus {
	outline: 2px solid red;
}
.focus-visibl :focus-visible {
	outline: 2px solid blue;
}

<div class="sample-block">
	<span>
		<input type="text" value="有効（enabled）">
		<button>有効（enabled）</button>
	</span>
	<span>
		<input type="text" value="無効（disabled）" disabled>
		<button disabled>無効（disabled）</button>
	</span>
</div>

/* 共通のスタイル */
.sample-block span {
	display: flex;
	gap: 0.5rem;
	padding-block: 5px;
}
.sample-block input {
	inline-size: 10rem;
	margin: 0;
}
/* 入力項目の状態を判別するセレクタ */
.sample-block :enabled {
	color: green;
}
.sample-block :disabled {
	color: red;
}

<div class="sample-block">
	<span>
		<input type="text" value="有効（enabled）">
		<button>有効（enabled）</button>
	</span>
	<span>
		<input type="text" value="無効（disabled）" disabled>
		<button disabled>無効（disabled）</button>
	</span>
</div>

/* 共通のスタイル */
.sample-block span {
	display: flex;
	gap: 0.5rem;
	padding-block: 5px;
}
.sample-block input {
	inline-size: 10rem;
	margin: 0;
}
/* 入力項目の状態を判別するセレクタ */
.sample-block :enabled {
	color: green;
}
.sample-block :disabled {
	color: red;
}

<div class="sample-block">
	<span>
		<input type="text" value="編集可能（read-write）">
	</span>
	<span>
		<input type="text" value="読み取り専用（read-only）" readonly>
	</span>
</div>

/* 共通のスタイル */
.sample-block span {
	display: block;
	padding-block: 5px;
}
.sample-block input {
	inline-size: 14rem;
	margin: 0;
}
/* 入力項目の状態を判別するセレクタ */
.sample-block :read-write {
	color: green;
}
.sample-block :read-only {
	color: red;
}

<div class="sample-block">
	<p contenteditable>編集可能な属性（contenteditable）を持つ段落</p>
	<p>読み取り専用（read-only）の通常の段落</p>
</div>

/* 共通のスタイル */
.sample-block p {
	padding: 0.5rem;
	margin-block: 0.5rem;
}
/* 入力項目の状態を判別するセレクタ */
.sample-block p:read-write {
	background-color: #9f9;
}
.sample-block p:read-only {
	background-color: #f99;
}

<div class="sample-block">
	<span>
		<input type="text" value="編集可能（read-write）">
	</span>
	<span>
		<input type="text" value="読み取り専用（read-only）" readonly>
	</span>
</div>

/* 共通のスタイル */
.sample-block span {
	display: block;
	padding-block: 5px;
}
.sample-block input {
	inline-size: 14rem;
	margin: 0;
}
/* 入力項目の状態を判別するセレクタ */
.sample-block :read-write {
	color: green;
}
.sample-block :read-only {
	color: red;
}

<div class="sample-block">
	<p contenteditable>編集可能な属性（contenteditable）を持つ段落</p>
	<p>読み取り専用（read-only）の通常の段落</p>
</div>

/* 共通のスタイル */
.sample-block p {
	padding: 0.5rem;
	margin-block: 0.5rem;
}
/* 入力項目の状態を判別するセレクタ */
.sample-block p:read-write {
	background-color: #9f9;
}
.sample-block p:read-only {
	background-color: #f99;
}

<div class="sample-block">
	<span>
		文字を編集：<input type="text" value="valueの値です">
	</span>
	<span>
		文字を入力：<input type="text" placeholder="placeholderの値です">
	</span>
</div>

/* 共通のスタイル */
.sample-block span {
	display: block;
	padding-block: 5px;
}
.sample-block input {
	inline-size: 14rem;
	margin: 0;
}
/* 入力項目の状態を判別するセレクタ */
.sample-block :placeholder-shown {
	border: 2px solid red;
	border-radius: 3px;
}

<div class="sample-block">
	<span>
		<label><input type="checkbox" name="c" checked>既定項目</label>
		<label><input type="checkbox" name="c">選択肢</label>
		<label><input type="checkbox" name="c">選択肢</label>
	</span>
	<span>
		<label><input type="radio" name="r" checked>既定項目</label>
		<label><input type="radio" name="r">選択肢</label>
		<label><input type="radio" name="r">選択肢</label>
	</span>
	<span>
		<select>
			<option label="selectedが指定されている" selected>
			<option label="選択肢">
			<option label="選択肢">
		</select>
	</span>
	<span>
		<select>
			<option label="selectedが指定されていない">
			<option label="選択肢">
			<option label="選択肢">
		</select>
	</span>
</div>

/* 共通のスタイル */
.sample-block span {
	display: flex;
	gap: 1rem;
	padding-block: 5px;
}
.sample-block input {
	margin-inline: 0 5px;
}
.sample-block select {
	inline-size: 14rem;
}
/* 入力項目の状態を判別するセレクタ */
label:has(:default) {
	color: red;
}
select:has(:default) {
	background-color: #fcc;
}

<div class="sample-block">
	<span>
		<label><input type="checkbox" name="c" checked>既定項目</label>
		<label><input type="checkbox" name="c">選択肢</label>
		<label><input type="checkbox" name="c">選択肢</label>
	</span>
	<span>
		<label><input type="radio" name="r" checked>既定項目</label>
		<label><input type="radio" name="r">選択肢</label>
		<label><input type="radio" name="r">選択肢</label>
	</span>
	<span>
		<select multiple>
			<option label="選択肢：red" class="red">
			<option label="選択肢：green" class="green">
			<option label="選択肢：blue" class="blue">
		</select>
	</span>
</div>

/* 共通のスタイル */
.sample-block span {
	display: flex;
	gap: 1rem;
	padding-block: 5px;
}
.sample-block input {
	margin-inline: 0 5px;
}
.sample-block select {
	inline-size: 14rem;
}
/* 入力項目の状態を判別するセレクタ */
label:has(:checked) {
	color: red;
}
select:has(.red:checked) {
	background-color: #fcc;
}
select:has(.green:checked) {
	background-color: #cfc;
}
select:has(.blue:checked) {
	background-color: #cff;
}

<div class="sample-block">
	<span>
		<label><input type="checkbox" name="c">選択肢</label>
		<label><input type="checkbox" name="c">選択肢</label>
		<label><input type="checkbox" name="c">選択肢</label>
	</span>
	<span>
		<label><input type="radio" name="r">選択肢</label>
		<label><input type="radio" name="r">選択肢</label>
		<label><input type="radio" name="r">選択肢</label>
	</span>
	<span>
		<label id="js_label" for="js_progress">??%</label>
		<progress max="100" id="js_progress">0</progress>
		<button onclick="getProgress()">進捗確認</button>
	</span>
</div>
<script>
	const items = document.getElementsByTagName('input');
	for (let i = 0; i < items.length; i++) {
		items[i].indeterminate = true;
	}
	function getProgress() {
		const elmlabel = document.getElementById('js_label');
		const elmProgress = document.getElementById('js_progress');
		elmlabel.textContent = '50%';
		elmProgress.setAttribute('value', '50');
	}
</script>

/* 共通のスタイル */
.sample-block span {
	display: flex;
	gap: 1rem;
	padding-block: 5px;
}
.sample-block input {
	margin-inline: 0 5px;
}
.sample-block progress {
	inline-size: 100px;
	margin-block: auto;
}
/* 入力項目の状態を判別するセレクタ */
label:has(:indeterminate) {
	color: red;
}
label:has(~progress:indeterminate) {
	color: red;
}

<div class="sample-block">
	<p>
		<label for="1">お名前</label>
		<input type="text" name="name" id="1" placeholder="必須：4文字以上" minlength="4" required>
	</p>
	<p>
		<label for="2">Eメール</label>
		<input type="email" name="email" id="2" placeholder="必須：英数字@英数字" required>
	</p>
	<p>
		<label for="3">電話番号</label>
		<input type="tel" name="tel" id="3" placeholder="任意：000-0000-0000" pattern="[0-9]{3}-[0-9]{3,4}-[0-9]{4}">
	</p>
</div>

/* 共通のスタイル */
.sample-block p {
	display: flex;
	gap: 0.5rem;
	padding-block: 5px;
}
.sample-block label {
	flex-basis: 16%;
	min-inline-size: 4rem;
	max-inline-size: 6rem;
}
.sample-block input {
	inline-size: 60%;
	border-radius: 3px;
}
/* 入力項目の状態を判別するセレクタ */
.sample-block input:valid {
	border: 2px solid #093;
}
.sample-block input:invalid {
	border: 2px solid #f36;
}
.sample-block p:has(input:valid)::after {
	content: "✓";
	color: #093;
}
.sample-block p:has(input:invalid)::after {
	content: "⚠";
	color: #f36;
}

<div class="sample-block">
	<p>
		<label for="1">お名前</label>
		<input type="text" name="name" id="1" placeholder="必須：4文字以上" minlength="4" required>
	</p>
	<p>
		<label for="2">Eメール</label>
		<input type="email" name="email" id="2" placeholder="必須：英数字@英数字" required>
	</p>
	<p>
		<label for="3">電話番号</label>
		<input type="tel" name="tel" id="3" placeholder="任意：000-0000-0000" pattern="[0-9]{3}-[0-9]{3,4}-[0-9]{4}">
	</p>
</div>

/* 共通のスタイル */
.sample-block p {
	display: flex;
	gap: 0.5rem;
	padding-block: 5px;
}
.sample-block label {
	flex-basis: 16%;
	min-inline-size: 4rem;
	max-inline-size: 6rem;
}
.sample-block input {
	inline-size: 60%;
	border-radius: 3px;
}
/* 入力項目の状態を判別するセレクタ */
.sample-block input:valid {
	border: 2px solid #093;
}
.sample-block input:invalid {
	border: 2px solid #f36;
}
.sample-block p:has(input:valid)::after {
	content: "✓";
	color: #093;
}
.sample-block p:has(input:invalid)::after {
	content: "⚠";
	color: #f36;
}

<div class="sample-block">
	<p>
		<input type="number" min="10" max="20" value="15" id="1">
		<label for="1">10〜20の数字</label>
	</p>
	<p>
		<input type="time" min="10:00" max="18:00" value="12:00" id="2">
		<label for="2">10時から18時の間</label>
	</p>
	<p>
		<input type="date" min="2000-01-01" max="2000-12-31" value="2025-10-10" id="3">
		<label for="3">2000年の日付</label>
	</p>
</div>

/* 共通のスタイル */
.sample-block p {
	display: flex;
	gap: 0.5rem;
	padding-block: 5px;
}
.sample-block input {
	inline-size: 8rem;
}
/* 入力項目の状態を判別するセレクタ */
.sample-block input:in-range {
	background-color: #9fc;
	border: 2px solid #063;
}
.sample-block input:out-of-range {
	background-color: #fcc;
	border: 2px solid #f36;
}
.sample-block p:has(input:in-range)::before {
	content: "✓";
	color: #093;
}
.sample-block p:has(input:out-of-range)::before {
	content: "⚠";
	color: #f36;
}

<div class="sample-block">
	<p>
		<input type="number" min="10" max="20" value="15" id="1">
		<label for="1">10〜20の数字</label>
	</p>
	<p>
		<input type="time" min="10:00" max="18:00" value="12:00" id="2">
		<label for="2">10時から18時の間</label>
	</p>
	<p>
		<input type="date" min="2000-01-01" max="2000-12-31" value="2025-10-10" id="3">
		<label for="3">2000年の日付</label>
	</p>
</div>

/* 共通のスタイル */
.sample-block p {
	display: flex;
	gap: 0.5rem;
	padding-block: 5px;
}
.sample-block input {
	inline-size: 8rem;
}
/* 入力項目の状態を判別するセレクタ */
.sample-block input:in-range {
	background-color: #9fc;
	border: 2px solid #063;
}
.sample-block input:out-of-range {
	background-color: #fcc;
	border: 2px solid #f36;
}
.sample-block p:has(input:in-range)::before {
	content: "✓";
	color: #093;
}
.sample-block p:has(input:out-of-range)::before {
	content: "⚠";
	color: #f36;
}

<div class="sample-block">
	<p>
		<input type="text" placeholder="空でも送信できます" id="1">
		<label for="1">required なし</label>
	</p>
	<p>
		<input type="text" placeholder="空では送信できません" id="2" required>
		<label for="2">required あり</label>
	</p>
</div>

/* 共通のスタイル */
.sample-block p {
	display: flex;
	gap: 0.5rem;
	padding-block: 5px;
}
.sample-block input {
	inline-size: 10rem;
	border: 2px solid #666;
	border-radius: 3px;
}
/* 入力項目の状態を判別するセレクタ */
.sample-block input:required {
	background-color: #fcc;
	border-color: #f36;
}
.sample-block p:has(input:optional)::before {
	content: "任意";
	color: #093;
}
.sample-block p:has(input:required)::before {
	content: "必須";
	color: #f36;
}

<div class="sample-block">
	<p>
		<input type="text" placeholder="空でも送信できます" id="1">
		<label for="1">required なし</label>
	</p>
	<p>
		<input type="text" placeholder="空では送信できません" id="2" required>
		<label for="2">required あり</label>
	</p>
</div>

/* 共通のスタイル */
.sample-block p {
	display: flex;
	gap: 0.5rem;
	padding-block: 5px;
}
.sample-block input {
	inline-size: 10rem;
	border: 2px solid #666;
	border-radius: 3px;
}
/* 入力項目の状態を判別するセレクタ */
.sample-block input:required {
	background-color: #fcc;
	border-color: #f36;
}
.sample-block p:has(input:optional)::before {
	content: "任意";
	color: #093;
}
.sample-block p:has(input:required)::before {
	content: "必須";
	color: #f36;
}

<div class="sample-block">
	<p>
		<label for="1">お名前</label>
		<input type="text" name="name" id="1" placeholder="必須：4文字以上" minlength="4" required>
	</p>
	<p>
		<label for="2">Eメール</label>
		<input type="email" name="email" id="2" placeholder="必須：英数字@英数字" required>
	</p>
	<p>
		<label for="3">電話番号</label>
		<input type="tel" name="tel" id="3" placeholder="任意：000-0000-0000" pattern="[0-9]{3}-[0-9]{3,4}-[0-9]{4}">
	</p>
</div>

/* 共通のスタイル */
.sample-block p {
	display: flex;
	gap: 0.5rem;
	padding-block: 5px;
}
.sample-block label {
	flex-basis: 16%;
	min-inline-size: 4rem;
	max-inline-size: 6rem;
}
.sample-block input {
	inline-size: 60%;
	border-radius: 3px;
}
/* 入力項目の状態を判別するセレクタ */
.sample-block input:user-valid {
	border: 2px solid #093;
}
.sample-block input:user-invalid {
	border: 2px solid #f36;
}
.sample-block p:has(input:user-valid)::after {
	content: "✓";
	color: #093;
}
.sample-block p:has(input:user-invalid)::after {
	content: "⚠";
	color: #f36;
}

<div class="sample-block">
	<p>
		<label for="1">お名前</label>
		<input type="text" name="name" id="1" placeholder="必須：4文字以上" minlength="4" required>
	</p>
	<p>
		<label for="2">Eメール</label>
		<input type="email" name="email" id="2" placeholder="必須：英数字@英数字" required>
	</p>
	<p>
		<label for="3">電話番号</label>
		<input type="tel" name="tel" id="3" placeholder="任意：000-0000-0000" pattern="[0-9]{3}-[0-9]{3,4}-[0-9]{4}">
	</p>
</div>

/* 共通のスタイル */
.sample-block p {
	display: flex;
	gap: 0.5rem;
	padding-block: 5px;
}
.sample-block label {
	flex-basis: 16%;
	min-inline-size: 4rem;
	max-inline-size: 6rem;
}
.sample-block input {
	inline-size: 60%;
	border-radius: 3px;
}
/* 入力項目の状態を判別するセレクタ */
.sample-block input:user-valid {
	border: 2px solid #093;
}
.sample-block input:user-invalid {
	border: 2px solid #f36;
}
.sample-block p:has(input:user-valid)::after {
	content: "✓";
	color: #093;
}
.sample-block p:has(input:user-invalid)::after {
	content: "⚠";
	color: #f36;
}

<div class="sample-block">
	<p dir="ltr">dir=ltr</p>
	<p dir="rtl">dir=rtl</p>
	<p lang="ja" dir="auto">日本語</p>
	<p lang="ar" dir="auto">الحروف العربية</p>
</div>

/* 共通のスタイル */
.sample-block p {
	padding: 0.25rem;
	margin-block: 0;
}
/* 書字方向に基づくスタイル */
.sample-block :dir(ltr) {
	background-color: #9cf;
}
.sample-block :dir(rtl) {
	background-color: #f9c;
}

<div class="sample-block">
	<p lang="ja">この要素は"lang"属性が指定されています。</p>
	<p lang="en">This element has a "lang" attribute specified.</p>
	<p lang="pt">Este elemento possui um atributo "lang" especificado.</p>
</div>

/* 共通のスタイル */
.sample-block p {
	padding: 0.25rem;
	margin-block: 0;
}
/* 言語に基づくスタイル */
.sample-block :lang(ja) {
	background-color: #f9c;
}
.sample-block :lang(en) {
	background-color: #9cf;
}
.sample-block :lang(pt) {
	background-color: #9fc;
}

<div class="sample-block">
	<button type="button" onclick="document.getElementById('js_dialog').showModal()">ダイアログを表示</button>
	<p>ボタンを押すとモーダルのダイアログが表示されます。ダイアログが表示されている間、背後のコンテンツは操作できなくなります。</p>
	<dialog id="js_dialog">
		<h3 class="heading">ダイアログの見出し</h3>
		<p>ダイアログの内容。</p>
		<button type="button" onclick="this.closest('dialog').close();">閉じる</button>
	</dialog>
</div>

/* 共通のスタイル */
dialog {
	text-align: center;
}
/* 最前面に配置された要素の直下に投影される要素 */
dialog::backdrop {
	background-color: rgb(0 0 0 / 0.3);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

<div class="sample-block">
	<p>段落に記述された内容</p>
</div>

/* 共通のスタイル */
p {
	padding: 5px;
	background-color: #ccc;
}
/* 擬似要素で生成する内容 */
p::before {
	content: "::before";
	background-color: #fc6;
}

<div class="sample-block">
	<p>段落に記述された内容</p>
</div>

/* 共通のスタイル */
p {
	padding: 5px;
	background-color: #ccc;
}
/* 擬似要素で生成する内容 */
p::after {
	content: "::after";
	background-color: #fc6;
}

<div class="sample-block">
	<p>壱行目の段落に記述された内容です。</p>
	<p>弐行目の段落に記述された内容です。</p>
	<p>参行目の段落に記述された内容です。</p>
</div>

/* 共通のスタイル */
p {
	margin-block: 0.5rem 0;
}
/* 要素の最初の一文字を装飾 */
p::first-letter {
	color: #600;
	font-size: 1.5rem;
	font-weight: bold;
}

<div class="sample-block">
	<p class="is100">ここが要素の先頭です。要素に含まれる文字列はインライン行に並びます。折り返しが発生した場合はインライン行が足されて二行目に移ります。</p>
	<p class="is75">ここが要素の先頭です。要素に含まれる文字列はインライン行に並びます。折り返しが発生した場合はインライン行が足されて二行目に移ります。</p>
	<p class="is50">ここが要素の先頭です。要素に含まれる文字列はインライン行に並びます。折り返しが発生した場合はインライン行が足されて二行目に移ります。</p>
</div>

/* 共通のスタイル */
.sample-block p {
	padding: 0.25rem;
	margin-block: 0.5rem 0;
	border: 1px solid #999;
	font-size: small;
}
.sample-block .is100 {
	inline-size: 100%;
}
.sample-block .is75 {
	inline-size: 75%;
}
.sample-block .is50 {
	inline-size: 50%;
}
/* 要素の一行目を装飾 */
p::first-line {
	color: #600;
	font-weight: bold;
}

<ol class="sample-list">
	<li>リスト項目</li>
	<li>リスト項目</li>
	<li>リスト項目</li>
</ol>

/* リスト項目のマーカーを装飾 */
.sample-list > li::marker {
	color: #999;
	font-size: 1.25rem;
	font-style: oblique;
	font-weight: bold;
}

<div class="sample-block">
	<label>
		<input type="text" placeholder="プレースホルダー">
		既定値
	</label>
	<label class="ph">
		<input type="text" placeholder="プレースホルダー">
		装飾済
	</label>
</div>

/* 共通のスタイル */
.sample-block label {
	display: flex;
	gap: 0.5rem;
	padding: 5px;
}
.sample-block input {
	inline-size: 10rem;
}
/* プレースホルダー文字の装飾 */
.ph ::placeholder {
	color: red;
	font-family: serif;
	font-style: oblique;
	font-weight: bold;
	opacity: 0.5;
}

<div class="sample-block">
	<p class="normal">::selection なし：文字を範囲選択して装飾を確認。</p>
	<p class="custom">::selection あり：文字を範囲選択して装飾を確認。</p>
</div>

/* 選択範囲の文字を装飾 */
.custom::selection {
	background-color: #cfc;
	text-decoration: underline dashed #063;
}