Класи та ідентифікатори | CSS для Початківців

В Керівництві з CSS для початківців ми аналізували тільки селектори HTML – ті, що представляють HTML-тег. Ви можете також задавати свої власні селектори, які можуть приймати форму класів та ідентифікаторів.

Перевага такого підходу полягає в тому, що ви отримуєте один і той же елемент HTML, але уявляєте його різними способами в залежності від його класу або ідентифікатора.

У CSS селектор класу позначають іменем, яке слідує за точкою (.). Ідентифікатор позначають іменем, яке слідує за знаком решітки (#).

Таким чином CSS може нагадувати наступний код:

    
            1
            #top 
        
            2
                background-color: #ccc;
        
            3
                padding: 1em
        
            4
             
            5
             
            6
            .intro 
        
            7
                color: red;
        
            8
                font-weight: bold;
        
            9

HTML робить відсилання до стилю CSS значеннями атрибутів id і class. Наприклад:


<div id="top">
<h1>Chocolate curry</h1>
<p class="intro">This is my recipe for making curry purely with chocolate</p>
<p class="intro">Mmm mm mmmmm</p>
</div>

Різниця між ідентифікатором id і класом полягає в тому, що ідентифікатор може застосовуватися для визначення одного елемента, а клас може використовуватися для визначення декількох елементів.

На додаток ви можете використовувати селектор для певного елемента HTML, просто вказавши спочатку HTML-селектор. Наприклад p.jam якийсь стиль буде застосовуватися для елементів параграфів, у яких є клас “jam”.