Зважуємо селектори CSS

Ближче до другої години ночі в голову в місці з думками про вічне приходять не менш одвічні питання — «в чому сенс життя?», «Навіщо взагалі людині спати?» або «Якого біса ця #%^$ не працює?» і що ближче ранок, то сильніше починає хвилювати саме це останнє питання.

Трохи нижче я розповім про те, якого чорта сss селектори іноді не поводяться так, як нам здається правильним, і про те, як вони насправді повинні поводитися.

Розділ один – йдемо праворуч!

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

Отже, зважуємо - спочатку представимо пару рядів із 8 чисел:

Знайомтеся — так у числах виглядають деякі два селектори, щоб ніхто ні про що не здогадався назва їх умовно «верхній» і «нижній»

Щоб дізнатися який із них важче, потрібно виконати такі дії і нічого не переплутати:

  1. Дивимося на крайні ліві числа
  2. Вибираємо з них більше. — саме цей селектор і буде найважчим
  3. Якщо числа однакові, зрушуємо на число праворуч і повторюємо інструкції з пункту 2.
  4. Якщо всі числа однакові то застосовуються стилі з селектора, який був оголошений останнім

Найстрашніша таємниця

Якщо ви прочитаєте це, від вас назавжди піде душевний спокій, але принаймні ви зможете спати ночами.

Розкриваючи найстрашнішу таємницю, я розповім, як власне перетворити звичайний селектор на такі зрозумілі та красиві цифри? Все як завжди дуже просто:

    Теги.за кожен тег у селекторі можна накинути вправе число одиничку:

Класи, за кожен клас чи псевдоклас у селекторі можна накинути по одиночці у друге число праворуч

Так, ви все правильно зрозуміли. Css селектор плювати хотів на всі ці ваші вишукування типу пробілів або ">". За коженIDу селекторі додаємо по одиночці в третє праворуч число.

Я думаю суть ви вловили, тепер можна приступати до невеликої вікторини, щоб це перевірити:

Питання:Якого кольору бекграунд буде в абзаці?Відповідь:Правильно, червоного, тому що селектор не хвилює, що вам там здається, і відстань між тегами його не цікавить. А оскільки вага тегів дорівнює - застосовується останній.

Питання:Якого кольору бекграунд буде в нашому диві?Відповідь:Правильно, червоного, тому що при вимірі ваги глибоко все одно поставили ви там пробіл між класами, знак більше або написали їх впритул. Вага у всіх цих селекторів однакова, а значить, застосовується останній.

Питання:Все те саме.Відповідь:А відповідь, для різноманітності інший: наш див буде сірим. Тому що як я вже згадував вище селектор абсолютно байдуже що ви там мали на увазі. У першого селектора вага більша, і нікого не хвилює що швидше за все очікували ви не такої поведінки.

Продовжуємо розкривати секрети

У нас залишилося ще так багато чисел, і напевно так хочеться дізнатися, що ж всі вони означають – продовжуємо розкривати секрети.

  1. Селектор*абсолютно невагомий, тобто зовсім.
  2. Селектор атрибутівце звичайнісінький псевдоклас і важить він стільки ж скільки і звичайні класи
  3. Будь-який інлайновий стильнаписаний в атрибуті style=”” елемента автоматично отримує пріоритет0,0,0,0,1,0,0,0, що одразу робить йогодуже крутим.
  4. А наступні чотири цифри – це всі наші старі знайомі лише з атрибутом!important

Усі ми любимо вікторини

Питання:Якого кольору буде знак питання на засланні?Відповідь:Червоного, неважливо, що селектор на точне збіг атрибута виглядає більш специфічним, ніж селектор, який вибирає все, що «починається з». Вагу вони мають однакову.

Питання:Моє оригінальне запатентоване питання.Відповідь:!important крутіше за все, навіть крутіше ніж інлайн стилі - так що бам-бам-бам - сірого!