0

Есть много элементов с классом 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?

12
  • так и записать......... и раз везде !important то и тут придётся его впихивать 7 июн 2021 в 17:32
  • ТО что ты нашел, это JS...
    – Air
    7 июн 2021 в 17:50
  • Задай этому элементу другой класс и запиши в css так .main-gridContainer-gridContainer .другой-класс{}
    – Air
    7 июн 2021 в 17:52
  • @Air, Да разобрался уже, только изменились все .main-gridContainer-gridContainer на странице с классом .test-testOverview-overview , а нужно только первый. Попробовал, с псевдоклассом .test-testOverview-overview .contentSpacing .test-testtOverview-testShelfSpacer .main-gridContainer-gridContainer:first-child {--minimumColumnWidth: 150px !important;} ,но что то не получается. 7 июн 2021 в 18:10
  • 1
    напиши просто .main-gridContainer-gridContainer:first-child {--minimumColumnWidth: 150px !important;} после строки где написано про 250px 7 июн 2021 в 18:13

2 ответа 2

0

Конкретному элементу, которому вы хотите изменить размер, в html коде напишите айдишник. Вот так: id="test".

Типа как тут: <div id="test">Lorem ipsum</div>. Классы и все остальное можете оставить, главное написать айдишник

Потом, в стилях, напишите

#test {
  width: 150px;
}
0

Оказалось, что нужно было просто приписать :nth-child(?). В итоге, у меня в CSS это выглядит теперь вот так:

                    .test-testtOverview-testShelfSpacer:nth-child(2)  .main-gridContainer-gridContainer {
                     --minimumColumnWidth: 150px !important;
                     }

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.