Почему не переназначает стиль?

Question

[urajo]

grid-column на разрешении 375 меняется, но в дев Тулсе он перечеркнут, хотя свойство прописано позже основного(видно строчки на скрине)
При этом если я сниму с этого "неработающего" grid-column - разметка меняется. Т.е он как бы работает, но в дев Тулс - он якобы выключен. С чем это связано

Comments

[Ankhena]

Неизвестно, что у вас в стилях написано ещё.
Но предположим, что есть грид в сколько-то там колонок и у него десяток дочерних элементов.
Все эти элементы занимают стандартные свойства и занимают по одной клеточке. Кроме 5го, у которого span 2.

При этом если я сниму с этого "неработающего" grid-column - разметка меняется.

Конечно, меняется.

Ведь пока он не убран, то применяется ко всем .item (если это свойство больше ничем не перебивается), кроме пятого.
Т.е. все элементы должны были попасть в первый столбец. Но туда попали все, кроме пятого, потому что специфичность селектора класс + псевдокласс nth-child выше, чем просто класс.
Когда вы снимаете, как вы называете нерабочее свойство, то оно снимается у всех элементов. И они начинают располагаться по гриду стандартным способом.

Если такого объяснения недостаточно и до конца понимания не пришло, то сотворите песочницу с видимой проблемой на jsfiddle.net, а не только скрины с куском кода для одного элемента.

Answer 1

[Сергей delphinpro]

Специфичность селекторов

Верхний селектор имеет больший вес. Там селектор класса + селектор псевдокласса.

Comments

[urajo]

но почему нижний тогда все равно работает?)

[Сергей delphinpro]

urajo, я вас не понимаю. На скрине ясно видно, что он перебит верхним, и не должен работать. Вы бы песочницу с этим кодом сделали, чтобы вживую пощупать.

[Vladislav]

Сергей delphinpro, песочница в данной ситуации даже не нужна, типичная ситуация

Answer 2

[Vladislav]

Потому что первый селектор обращается к конкретному элементу, в данном случае пятому, а нижний селектор пытается обратиться ко всем сразу, как выше вам подметили это и есть вес селекторов, верхний так скажем важнее, чем нижний, если уж попроще объяснять, в вашем случае тогда в медиа запросе просто обратиться также к пятому отдельно, то будет все ок