Селектори ID и class

Най-важното за ID и class селекторите

ID и class са основни CSS селектори за избор на HTML елементи. ID е уникално – използва се за един-единствен елемент в страницата и има по-висок приоритет от другите селектори. Class може да се повтаря и е подходящ за групиране на множество елементи със сходен стил. Ако трябва да запомните едно нещо: когато има конфликт, стилът зададен чрез ID ще „победи“ заради по-високата си специфичност.

Стъпка по стъпка: как да приложите ID и class

1. В HTML добавете уникално ID към елемент, например на телефон в списък: id="phone".
2. В CSS създайте правило за него, като използвате #phone и задайте стил (например цвят).
3. Добавете class към няколко елемента от списък, например class="profileItem".
4. В CSS изберете класа с .profileItem и задайте общ стил (например по-малък шрифт).
5. Наблюдавайте как стилът от ID променя конкретен елемент, дори ако по-общо правило вече е зададено за родителски елемент.

Основни селектори в урока

• #id – избира елемент по уникално ID; има по-висока специфичност и приоритет.
• .class – избира всички елементи със съответния клас; може да се използва многократно в страницата.
• element element – вложен (descendant) селектор, който избира елементи според тяхната структура в HTML.