CSSスキル - 第7章 Lesson4

idセレクタとclassセレクタを組み合わせる方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

idセレクタとclassセレクタを組み合わせる方法を説明します。


この動画で学べること

・idセレクタとclassセレクタを組み合わせて使う方法



idセレクタとclassセレクタを組み合わせて使う方法

前回はidは「#」を、classは「.」を使って表現することを学びました。
また、id名は1つのHTMLファイルの中で1回しか使えなかったのに対し、class名はページの中で何度も使うことができました。
では、この2つを組み合わせて使う方法をご紹介していきます。
HTMLファイルの<li>タグにすでに「bold」というclass名が設定されていますが、ここにid名「text_red」も加えていきたいと思います。



 <ul>
<li class="bold" id="text_red">タイプセレクタ</li>
<li class="bold">全称セレクタ</li>
<li class="bold">idセレクタ</li>
<li class="bold">classセレクタ</li>
<li>擬似クラス</li>
<li>子孫コンビネータ</li>
</ul>



CSSにも新しく#text_redと記述し、文字を赤に指定する命令文を書きます。



li#text_red {
color: red;
}



では保存してブラウザで見てみましょう。
class名「bold」の文字を太くするという指定も、id名「text_red」の文字を赤くするという指定も、両方適応されました。