ユニバーサルセレクター
CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 15/76。
ユニバーサルセレクタは、ページ上のすべてのHTML要素を対象とするCSSの強力なセレクタです。これはアスタリスク(*)で表されます。
全称セレクター(ユニバーサルセレクター)を使用すると、要素のタイプ、クラス、IDに関係なく、指定されたスタイルがすべての要素に適用されます。これは、グローバルスタイルを設定したり、ドキュメント全体のデフォルトスタイルをリセットしたりするのに役立ちます。
ユニバーサルセレクタを使用するための基本構文は次のとおりです:
* {
property: value;
}例えば、ページ上のすべての要素に対して、デフォルトのテキストの色とフォントサイズを設定したいとします。次のように全称セレクタを使用できます:
* {
color: black;
font-size: 14px;
}チャレンジ
簡単見出し(<h1>、<h2>)、段落(<p>)、および区分(<div>)を含む、さまざまな要素を持つHTMLドキュメントが与えられています。あなたのタスクは、全称セレクターを使用してこれらの要素にスタイルを適用することです。以下の手順に従ってください:
- 全称セレクターを使用して、すべての要素のテキストの色を darkgray に、フォントサイズを 16px に設定するCSSルールを記述してください。
チートシート
ユニバーサルセレクタは、アスタリスク (*) を使用して、ページ上のすべてのHTML要素を対象にします:
* {
property: value;
}グローバルなテキストの色とフォントサイズを設定する例:
* {
color: black;
font-size: 14px;
}自分で試してみよう
<html>
<head>
<title>Universal Selector</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
<p>This is a paragraph.</p>
<div>This is a division.</div>
</body>
</html>このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。