ماهو class selector وما الفرق بينه وبين id selector في CSS؟

يستخدم class selector  لتطبيق style على عدة عناصر HTML مثلًا عندما نريد جعل عنصر من نوع <p> و <h1> تأخذ نفس نوع الخط Helvetica واللون الأحمر، نقوم بإعطاء كل من <p>  و <h1> اسم صف class موحد ليكن مثلًا class =”sameFontColor”

<style>
        .sameFontColor {
            font-family:Helvetica;
            color:red;
        }

    </style>

ثم نقوم بإعطاء اسم الـclass = “sameFontColor” للعناصر التي نريد تطبيق عليها التصميم

 <div>
         <h1 class="sameFontColor">Class Selector Example</h1>
    <p class="sameFontColor">Hello World!</p>
    <p>Paragraph here</p>
     <p>Lorem Lorem Lorem Lorem</p>
    </div>

الفرق بين class selector و id selector هو أن id selector يطبق على عنصر واحد فقط (لا يمكن إعطاء نفس اسم المعرف id لأكثر من عنصر)
مثال:

        #greenParagraph {
            color:lightgreen;
        }

لنقم بتطبيقه على عنصر <p>

  <p id="greenParagraph">Paragraph here</p>