このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Selector (セレクター) (CSS)

CSS セレクターは CSS のルールの一部で、文書中のどの要素がルールと一致するかを記述します。一致した要素にはルールで指定されたスタイルが適用されます。

この CSS を見てください。

css
p { color: green; } div.warning { width: 100%; border: 2px solid yellow; color: white; background-color: darkred; padding: 0.8em 0.8em 0.6em; } #customized { font: 16px Lucida Grande, Arial, Helvetica, sans-serif; } 

ここでのセレクターは "p" (すべての <p> 要素内の文字列に緑色を適用)、 "div.warning"<div> 要素でクラス"warning" であるものがすべて警告ボックスのように見えるようにする)、 "#customized""customized" の ID を持つ要素の基本フォントを 16 ピクセルの高さの Lucida Grande またはいくつかの代替フォントに設定)です。

この CSS を次のような HTML に適用します。

html
<p>This is happy text.</p> <div class="warning"> Be careful! There are wizards present, and they are quick to anger! </div> <div id="customized"> <p>This is happy text.</p> <div class="warning"> Be careful! There are wizards present, and they are quick to anger! </div> </div> 

結果的に、ページの内容は次のように整形されます。

関連情報