このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
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>
結果的に、ページの内容は次のように整形されます。
[フレーム]