Деякі концепції для новачків як працюють селектори в css, css

Ось як виглядає HTML - файл:

А CSS - файл буде містити лише блок селектор, який ми бачимо нижче.

ID selector

підвищуємо рівень

ID -селектори найбільш вагомий тип селекторів, якщо мова йде про CSS - специфікації. У теорії вони вибивають інші типи селекторів і стилі. Звучить добре, але на практиці не означає нічого хорошого, тому що добре, коли є селектори, які при необхідності легко можна перевизначити.

селектор класу

підвищуємо рівень

Селектори класів - наші друзі. Можливо, це найбільш використовувані і універсальні селектори. Частково тому, що вони підтримуються всіма браузерами.

селектор тегів

підвищуємо рівень

Найбільша користь від селекторів тегів відчувається при зміні властивостей, які є унікальними для HTML - елемента. Наприклад, установка list-style для елемента

    або tab-size для елемента 
    . А також там, де потрібно скинути стилі. які браузер застосовує до певних елементів.
    

    Але, не варто надмірно покладатися на них. Як правило, більш корисно мати клас визначає стиль, який можна застосовувати до будь-якого HTML- елементу.
    селектор атрибутів
    

    підвищуємо рівень
    

    Ви, звичайно, можете заперечити, що селектори атрибутів корисніші, ніж селектори класів, тому що можуть не тільки вибирати за наявністю атрибуту, але і по його точного значення.
    

    Що ж, резонно, але врахуйте, що селектори атрибутів НЕ підтримуються в IE6.
    

    селектори позицій
    

    підвищуємо рівень
    

    Є кілька різних позиційних селекторів: nth-child. Використовуючи прості вирази (як 3n = "кожен третій") ви можете вибирати елементи на основі їх становища в HTML-документі. Ви можете поекспериментувати з цією ідеєю тут або ж використовувати кілька готових рецептів.
    

    Псевдо-селектори
    

    підвищуємо рівень
    

    empty є одним з безлічі псевдо-селектор, які ви можете дізнатися з двокрапки (:). Як правило, вони представляють собою щось, що ви не зможете розпізнати по елементу або атрибуту по - окремо.
    

    Варто відзначити, що вони трохи відрізняються від псевдо-елементів. які ви можете розпізнати по подвійна двокрапка (: :). Вони відповідальні за додавання елементів на сторінку.
    

    підвищуємо рівень
    

    Селектори можна об'єднувати:
    

    Є також комбінації селектор, таких як
    

    і + і> які впливають на селектори, в такий спосіб:
    

    Переклад статті «Beginner Concepts: How CSS Selectors Work» був підготовлений дружною командою проекту Сайтобудування від А до Я.