ユニバーサルセレクター
CoddyのHTMLジャーニー「CSSによるスタイリング」セクションの一部。レッスン 15/76。
全称セレクターは、ページ上のすべてのHTML要素を対象とする、CSSの強力なセレクターです。アスタリスク(*)で表されます。
使用すると、全称セレクターは、要素の種類、クラス、IDに関係なく、指定したスタイルをすべての要素に適用します。ブラウザーはあなたのスタイルより先に独自のデフォルトスタイルを適用するため(たとえば、見出しや段落の周囲のマージン、リストのパディングなど)、全称セレクターは、文書全体にグローバルスタイルを設定したり、ブラウザーのデフォルトスタイルをリセットしたりするのに便利です。
ユニバーサルセレクターを使用する基本的な構文は次のとおりです。
* {
property: value;
}たとえば、ページ上のすべての要素のデフォルトの文字色とフォントサイズを設定したいとします。次のように全称セレクターを使用できます。
* {
color: black;
font-size: 14px;
}チャレンジ
簡単見出し(<h1>、<h2>)、段落(<p>)、および区分(<div>)など、さまざまな要素を含むHTMLドキュメントが与えられています。ユニバーサルセレクターを使って、これらの要素にスタイルを設定するのが課題です。以下の手順に従ってください:
- ユニバーサルセレクターを使って、すべての要素のテキスト色をdarkgrayに、フォントサイズを16ピクセルに設定するCSSルールを書いてください。
自分で試してみよう
<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>このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
CSSによるスタイリングのすべてのレッスン
自分で練習してみよう: Webプレイグラウンド