Целевой CSS для конкретной страницы eDirectory
Я хочу увеличить высоту основного изображения события слева, не затрагивая другие страницы.
https://islandeguide.com/event/
Я заметил, что на этой странице есть то, что делает ее уникальной
h2 class = "theme-title" data-trans = "Featured Events">Featured Events/h2
Поэтому я подумал, что смогу сделать что-то вроде
page.themetitle[Featured Events] .col-sm-5 > .theme-box.theme-box-vertical > .theme-box-content img{
height: 350px;
}
Я придумал эту часть page.themetitle[Featured Events], так что я знал, что это не сработает.
Кто-нибудь знает, могу ли я поставить что-нибудь там, что будет работать?
Примечание:
Я могу добавить CSS в пользовательский документ CSS, но это все! У меня нет доступа для изменения HTML/PHP, также я не могу добавить Javascript.
Этот веб-сайт был разработан таким образом, что очень сложно ориентироваться на элементы без изменения других на разных страницах, поскольку они везде используют общие классы.
Ответы 1
Попробуй это:
h2[data-trans = "Featured Events"].theme-title + div.row div.col-sm-5 div.theme-box.theme-box-vertical img {
height: 350px;
}
Редактировать: Вы можете немного сократить его, используя дочерний селектор:
h2[data-trans = "Featured Events"].theme-title + .row > .col-sm-5 > .theme-box.theme-box-vertical img {
height: 350px;
}
Это сложно, потому что вы получаете только следующего соседнего брата div.row с помощью селектора +. Было бы лучше, если бы у вас был класс theme-title в теге html или body, чтобы соответствовать любому элементу, который вы хотите...
Genius, кажется, это сработало, большое спасибо! Один небольшой вопрос: могу ли я сделать это как медиа-запрос, чтобы я мог собрать целую кучу CSS только для этой страницы, не записывая тот фрагмент, который вы сделали для каждого элемента?