Как изменить CSS для конкретного элемента
Есть много элементов с классом main-gridContainer-gridContainer, которые нужно уменьшить.
Тогда я в CSS прописываю
.main-gridContainer-gridContainer {
--minimumColumnWidth: 240px !important;
}
И всё идеально, все такие элементы на всех страницах стали нужного размера.
Но а если мне нужно что бы у одного из таких элементов было не 240px, допустим, 150px.
Как его обозначить в CSS? Я его нашел, и это
document.querySelector('.test-testOverview-overview
.contentSpacing
.test-testtOverview-testShelfSpacer
.main-gridContainer-gridContainer')
Как его записать в CSS?
Ответы (2 шт):
Автор решения: Иван Осипов
→ Ссылка
Конкретному элементу, которому вы хотите изменить размер, в html коде напишите айдишник. Вот так: id="test".
Типа как тут: <div id="test">Lorem ipsum</div>. Классы и все остальное можете оставить, главное написать айдишник
Потом, в стилях, напишите
#test {
width: 150px;
}
Автор решения: FiftyFour7250
→ Ссылка
Оказалось, что нужно было просто приписать :nth-child(?). В итоге, у меня в CSS это выглядит теперь вот так:
.test-testtOverview-testShelfSpacer:nth-child(2) .main-gridContainer-gridContainer {
--minimumColumnWidth: 150px !important;
}