セレクタの基本 - CSSのチュートリアル

このレッスンでは セレクターの基本的な用語と役割について ご説明をします。 今開いているのは 「MDN」の「CSS入門」の中の 「セレクター」というページです。 この「CSS入門」というのは 初心者の方向けに 読むのにそんなに大変じゃない量の 解説がありますので機会があったら 読んでいただくといいでしょう。 さてセレクターのページなんですけれども セレクターというのは 「スタイルを適用したいウェブページ上の HTML要素を指定する」ということですね。 そしてCSSセレクターの種類は いくつもありまして スタイルを適用する要素を選ぶときに きめ細かく指定できますと いうことになっています。 さてCSS規則の 基本的な構文なんですけれども このスクロールした所に出ていますが、 こちらですね。 この全体、ひとくくりのことを CSS規則、あるいは CSS規則セットというふうにいいます。 ちょっとこの図は英語原文から 翻訳されていないようですけれども CSS規則セット、または規則ですね。 それは2つの部分に分かれていて こちらがセレクターになります。 それから｛｝の中に 複数宣言が入れられるんですが、 このまとまりのことを 宣言ブロックといいます。 そしてこの1行1行が宣言ですね。 それから各宣言のあとには 「;」をつけるんですが、 このブロックの閉じ括弧、 閉じ波括弧ですね。 の手前はつけなくても ルール上は問題はありません。 けれども順番を入れ替えたり、 追加したりするときに失敗したりしますから 宣言の最後には必ず 「;」をつけることをおすすめします。 それからこちらは、ちょっと 複雑な書き方になっていますけれども この部分がセレクターだよ、と。 要素を指定するんだよ、と いうことが分かればそれで結構です。 ただちょっと気になる人もいるでしょうから 簡単に説明しますと 「div p」で divの中のp要素ということになります。 「,」で、そのほかにと。 「#」、井桁。 これはid属性のことを意味するんですが、 id属性が「id」である要素の 「first-line」ですから最初の行ですね。 最初の行。 この2つの要素に対してこのブロックが 適用されるということになります。 それから先ほど言いました 種類なんですけれども 「さまざまな種類のセレクター」 ということで…