Не работает простой стиль CSS для посторонних объектов?

Question

serega danet @seregadushka

minsk

CSS

Не работает простой стиль CSS для посторонних объектов?

Простое желание : навел на ТЕНЬ , КОНТЕЙНЕР расширился. Все

.container {
   width: 300px;    }

.shadow {
&:hover {
  .container {
    width: calc(300px * 2) }   
    } }

<div  class="container"></div>
<div  class="shadow"></div>

.shadow и .container — не связаны, они в разных местах страницы.
Вопрос: почему не увеличивается ширина .container до 600px ?

Иллюстрация правильного ответа:
OtherStyles

Вопрос задан 18 мая
237 просмотров

29 комментариев

Подписаться 1 Простой 29 комментариев

Hovo_Varosyan @Hovo_Varosyan

html код можно?

Написано 19 мая
serega danet @seregadushka Автор вопроса

Hovo_Varosyan, какой код -- 2 квадрата, никакой связи между ними
Вопрос принципиальный . А то кажется слишком простым в том CSS . Так просто не бывает.

Написано 19 мая

Hovo_Varosyan @Hovo_Varosyan

<body>
    <div class="container">

    </div>
    <div class=" shadow">
        <div class="container">

        </div>
    </div>
</body>

при таком структуре html код работает

Написано 19 мая

serega danet @seregadushka Автор вопроса
Hovo_Varosyan, спасибо за попытку :) . А при таком HTML ?

<div class="container"></div> <div class="shadow"></div>
Написано 19 мая
Hovo_Varosyan @Hovo_Varosyan
serega danet, container не находится в shadow и поэтому при hover у него не поменяется width,

.shadow { &:hover { .container { width: calc(300px * 2) } } }

здесь говорится только про тех container которые в div с классом shadow
Написано 19 мая
serega danet @seregadushka Автор вопроса

Hovo_Varosyan, так что, в CSS нет возможности менять стили разных объектов ?

Написано 19 мая

Hovo_Varosyan @Hovo_Varosyan

serega danet,

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            height: 100px;
            width: 300px;
            background-color: black;
            margin: 10px;
        }

        .shadow {
            height: 100px;
            width: 200px;
            background-color: black;
            margin: 10px;
        }



         .shadow:hover + .container {
            width: 600px; 
        }
    </style>
</head>
<body>
    <div class="shadow"></div>
    <div class="container"></div>
</body>

можешь сделать через +, но он срабатывает только для соседних элементов,

<div class="shadow"></div>
    <div></div>
    <div class="container"></div>

не сработает

Написано 19 мая

Hovo_Varosyan @Hovo_Varosyan
или использовать ~ вместо +.
<div class="shadow"></div> <div></div> <div class="container"></div>
здесь он сработает, но в обоих случаях важно последовательность div

<div class="container"></div> <div class="shadow"></div>
не сработает не знаю почему)))
Написано 19 мая
Ankhena @Ankhena Куратор тега CSS

Ответ заключается в вопросе вот напрямую.

В коде у вас так .shadow:hover .container, т.е. примени стили к контейнеру, когда у него есть предок shadow и на него навели мышкой.
В тексте вопроса сами же пишете для посторонних объектов

Почитайте про селекторы https://htmlbook.ru/css/selector

Что делать?
Решать через соседние элементы + или ~.
Либо через псевдокласс :has и общего предка.

p.s. надеюсь, в реальности calc как-то нормально используется.

Написано 19 мая
serega danet @seregadushka Автор вопроса
Ankhena, не надо переписывать мои тексты по-своему.
У меня в вопросе (хорошо уберем наследование, или Nesting) :

.shadow:hover {.container { }}

Важны скобки в CSS или нет ?
т.к. у меня объекты не связаны , то порядок стилей не важен.
В вопросе : Как из одного стиля управлять другим, посторонним ?
Написано 19 мая
Ankhena @Ankhena Куратор тега CSS

serega danet, я написала во что превращается ваш селектор. А уж как там вы его будете писать, используя нестинг или нет, дело ваше и сути не меняет.

Написано 19 мая
serega danet @seregadushka Автор вопроса

Ankhena, спасибо, я уже детсад закончил .
про эквивалентность & двум вложенным стилям согласен, это есть и в первоистониках .
Но такое легкое удаление {} не встречал.

Написано 19 мая
Ankhena @Ankhena Куратор тега CSS

serega danet, детсад вы, как раз, пропустили, сразу в выпускной класс полезли. А в детсаду без скобок писали и селекторы изучали и к школе уже не знали с ними проблем.

т.к. у меня объекты не связаны , то порядок стилей не важен.

Вы аккуратнее с порядком.

В вопросе : Как из одного стиля управлять другим, посторонним ?

Ответ содержится в моем первом комментарии и ответе Сергея.

На счёт скобок, можно засунуть написанное в конвертер scss в css, он покажет скомпилированный селектор. Именно так его будет воспринимать браузер, если вы продолжите использовать нативный нестинг.

Написано 19 мая
serega danet @seregadushka Автор вопроса

Ankhena, что же вы мне свои проблемы приписываете ? Вы же не нашли решение. Ваше школьное умение "писать без скобок" не помогло вам .
Решение уже есть . Именно так , так я и написал в вопросе. Без JS , без SASS, LESS, шмес.
Только CSS и в 1 строку.

Написано 19 мая
Ankhena @Ankhena Куратор тега CSS

serega danet,
Вы же не нашли решение.

Ну, попробуйте перечитать, может вы сами найдете его в моем комментарии, на букву h начинается))

И закончим на этом переписку, а то уже балаган пошел.

Написано 19 мая
serega danet @seregadushka Автор вопроса

Ankhena, ds не одна такая единственная , независимая и неповторимая.
Про "общий враппер" уже были предложения "чисто на пальцах".
Кто-то что-то намекал про обoий boby.
Намеки мало кому понятны, даже их авторам.
Вот написали бы полностью эту строку, а не половину ваших догадок, могли бы с гордостью смотреться в монитор.

Написано 19 мая
Ankhena @Ankhena Куратор тега CSS

serega danet, ладно, расскажу, что происходит.

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

Написано 19 мая
serega danet @seregadushka Автор вопроса

Ankhena, нет, не надо забирать кусочек славы у вашего коллеги.
Это же ресурс вопросов и ответов. Т.е. для узкого круга ограниченных людей.
Поэтому вы же здесь куратор ? Чтобы помогать людям и с тем, и с другим.
Одного "четкого селектора" не достаточно.
Так можно сказать -- "сходи на Мозиллу, выбери себе селекторов сколько влезет. Там точно есть нужный."
И не поспоришь.
Правильное решение всегда кажется простым, особенно вам, кураторам.
Правильное решение -- это селекторчики, комбинаторчики, скобочки , пробельчики. И их очередь . И не перепутать.

Написано 19 мая
Ankhena @Ankhena Куратор тега CSS

serega danet, хорошо

Написано 19 мая
serega danet @seregadushka Автор вопроса

Ankhena, если вы собирались рассказать другим юзерам про CSS , то я сделал это за вас.
Поместил в вопрос . Но вы тоже не отставайте )).

Написано 19 мая
Ankhena @Ankhena Куратор тега CSS

serega danet, логичнее бы в ответ, конечно.
Я вам даже лайк поставлю и отмечу решением.

Написано 19 мая
serega danet @seregadushka Автор вопроса

Ankhena, зачем решением. Решение только одно.
И все-таки я считаю, что точно такой эффект должен быть без :has() , от вложенных скобок :))
Еще у меня есть подозрение, что что-то близкое можно получить из нового @container {}.
У вас есть места под вопросы ?

Написано 20 мая
serega danet @seregadushka Автор вопроса

Ankhena, я все никак не отлипну от моего любимого вопроса. В моей иллюстрации оба препарируемых объекта действительно соседи через общий body. Будет это решение работать на реальном проекте , когда один на 5 уровне вложенности, с другой на 10 ? Здесь вы можете проявить свой пророческий дар

Написано 20 мая
Ankhena @Ankhena Куратор тега CSS

serega danet, в верстке решение очень часто не одно. А уж которое вы сочтете оптимальным в конкретном проекте это другое дело.

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

Будет это решение работать на реальном проекте , когда один на 5 уровне вложенности, с другой на 10 ?

Будет.
Имеет смысл почитать спеку или справочник, чтобы разобраться как работает :has.
Ну и про @container заодно.

Написано 20 мая
serega danet @seregadushka Автор вопроса

Ankhena, вот вы себя и выдали. Что мне делать с вашим советом "сходить куда-нить , потаскать эти контейнеры самому" ? Вы точно уверены , что роль куратора заключается в этом ?
На вопрос о применимости @контейнеров в этой теме меня бы устроил ответ "Да/Нет".
А о рабочем примере я даже и не мечтаю.
Рабочие примеры почему то создают сами спрашивающие -- обновил ацкий макет к вопросу.

Написано 20 мая
Ankhena @Ankhena Куратор тега CSS

serega danet,
вот вы себя и выдали

Это вам на форум с другой специализацией

Что мне делать с вашим советом

Что хотите. Хотите узнать, откроете справочник, на мдн так и примеры есть, не хотите, не откроете.

Рабочие примеры почему то создают сами спрашивающие -- обновил ацкий макет к вопросу.

Ну логично, это же вам нужно решить задачу, а мы так, развлечься.
И потому что это не фриланс. На фрилансе можно дать задание и что-то требовать.
А вопросы, которые легко гуглятся, тут удаляют.

Написано 20 мая
serega danet @seregadushka Автор вопроса

Ankhena, вы шо то совсем запутались, где находитесь. Я вам расскажу . Это ресурс вопросов и ответов.

У вас была возможность , А теперь вы раздаете советы покинуть ресурс и ползать по гуглу.
Я задал вопрос, ждал ответа "Да/Нет". Не сильно вы там вспотели бы над ответом ?
Что я получил ? Сходи в гугл.
Ну как осуществите сами вашу угрозу -- найдите "легко в гугле" как связать два несвязанных объекта через @container.
Напомню, раньше можно было отмазаться ответом "Да/Нет". А теперь вам придется ответить "легкой" ссылкой из гугла. Это же для вас секунд 10 , правда, куратор ?

Нет у вас ответа/желания -- можно и не напрягать клаву, обойдусь без вашей вежливости.
Как вы уже убедились, ваше умение "не/ходить в гугл" как-то не помогло вам новость про :has() дотянуть одной связанной строки.

А если вы здесь чисто "так, развлечься", освободите место для других кураторов, понимающих свою роль. Как вы уже убедились, здесь есть кому отвечать.
Не обидно для вас это слышать ? Это просто адаптация "сходи в гугл" для кураторов. Может, вам больше следить за CSS, а не за моей "стилистикой" :) ?

Кстати , объясню вам политику ресурсов, покупнее Хабра: за отсылки из вопросов в гугл удаляют самих отсылающих.

Ankhena, вы немного переоцениваете свою значимость на qna.habr.com. Заставляете меня благодарить вас, что сэкономили мне 100 000 ? За одну строку кода ?
Вы немного перепутали ресурсы. С такими амбициями вас ждут курировать freelance.ru.

Написано 21 мая
serega danet @seregadushka Автор вопроса

Ankhena, вы, конечно, можете настучать наверх и удалить меня из хаббра, но этот вопрос я вам всё-таки рекомендую оставить, Знаете , наше "милое " общение очень стимулирует к углублённому изучению темы :has(). Я уже прочитал уже кучу статей про этот :has(). Везде только про родных , детей , братья сёстры, нижележащие, вышележащие, внутренние внешние, первые последние ... какие угодно родственники. Но нигде ни разу я не слышал простого выражения "Любые объекты на странице" .

Я предлагаю выписать мне благодарность, а Сергею поставить памятник при жизни за найденное простое , "бронебойное " решение, позволяющее вообще не заморачиваться со разметкой.
Можно выбрать объект в подвале и шевелить им шапку.
Найденное историческое решение вы можете считать эксклюзивом — именно на Хабре оно было найдено. Понимаю вашу гордость — вы тоже участвовали при рождении этого события. И оно приимерно в 10 раз короче , чем event JS. Хотя до этого я получил столько же "экспертных" советов "только JS".

Написано 21 мая
serega danet @seregadushka Автор вопроса

Ankhena, видите, какое у нас с вами плодотворное сотрудничество.
На основе этого живого примера у меня уже готов список вопросов для Хабра. Они именно такие , какие вы требуете -- универсальные, а не "шкурные", только для себя.
Примерный список на:
-- Универсальный размер,
-- Война с мобильным браузером,
-- Связь через атрибуты,
-- Связь через опасные контейнеры.
-- Содержимое в виде переменной ?

Понимаю, никто не ответит на вопрос без примера. Так этот пример еще надо оформить. С этими контейнерами сложно. Я тоже перекопал много статей, переведенных с англ, где 80% воды. Что я понял, @container только для размеров, и только для своих , а не для viewport. Так это можно реализовать и без @container, только новыми модными cqh, cqw . Именованные. неименованные, сверху указывается какой-то стиль, который потом нигде не используется. Я не понимаю их синтаксис. Оформлю -- приглашу вас лично.

Написано 21 мая

Решения вопроса 1

4 комментария

serega danet @seregadushka Автор вопроса

Это интересно, надо проверить, спасибо. Коллега

Написано 19 мая
serega danet @seregadushka Автор вопроса

Сергей, коллега ! кажется вы правы, вы выиграли примерно у 10 человек !
Ваша конструкция с body:has() дейстительно работает !!
Это же универсальный способ !
Вот сижу проверяю. Удаляю все максимально , чтобы ничего общего между ними, и даже по потоку снизу вверх . Работает !
Вы можете его запатентовать .

Написано 19 мая
serega danet @seregadushka Автор вопроса

Сергей, мне понравилось Ваше решение, буду применять везде, где надо и не надо.

Написано 19 мая
Сергей delphinpro @delphinpro Куратор тега CSS

serega danet, Вы пробовали читать спецификации? Ну или хотя бы новости на популярных ресурсах. Вы бы еще и не такое узнали..
Что касается has(), то ту тоже не все так радужно, просто это единственный способ без привлечения javascript
https://caniuse.com/css-has (меня там больше всего интересует вкладка "Date relative")

Написано 19 мая

Пригласить эксперта

Ответы на вопрос 1

5 комментариев

serega danet @seregadushka Автор вопроса

Нет, у меня дополнительные скобки есть

Написано 19 мая
FeST1VaL @FeST1VaL

serega danet, imko правильно сказал. Вы посмотрите что у вас получилось в готовом CSS

Написано 19 мая
Ankhena @Ankhena Куратор тега CSS

FeST1VaL, это вполне себе готовый css, там теперь тоже так можно.

Написано 19 мая
Сергей delphinpro @delphinpro Куратор тега CSS
Ankhena, ошибаетесь, как мне кажется. Если я правильно помню, то там нельзя было использовать селектор & склеивая его с другими
То есть

.parent { & .child {} } // норм .parent { &.child {} } // неправильно

Разве не так?
Написано 19 мая
Ankhena @Ankhena Куратор тега CSS

Сергей delphinpro, с виду работает
https://developer.chrome.com/docs/css-ui/css-nesti...

Были какие-то проблемы в FF, если делаешь вложенность по скобкам, но не ставишь &.
Поэтому пока ставлю &.
Надо бы проверить как оно там сейчас, вылечилось ли.

Не будет работать для БЭМа, в смысле для элементов и модификаторов, типа того &__elem

Написано 19 мая

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Средний
CSS, псевдоэлементы. Как скруглять внешние углы?
- 1 подписчик
- 9 часов назад
- 42 просмотра
0

ответов
CSS

Простой
Как прибавить к текущей ширине value +10px?
- 1 подписчик
- 13 часов назад
- 63 просмотра
1

ответ
HTML

+1 ещё

Средний
Как прилепить два тега «pre» друг к другу?
- 1 подписчик
- 19 часов назад
- 83 просмотра
2

ответа
JavaScript

+1 ещё

Простой
Как сделать плавную автопрокрутку карусели?
- 1 подписчик
- вчера
- 77 просмотров
1

ответ
CSS

+1 ещё

Простой
Какие возможные варианты сделать такую кнопку, чтобы границы кнопок подстраивались под размер текста внутри?
- 2 подписчика
- вчера
- 316 просмотров
2

ответа
HTML

+1 ещё

Простой
Как поменять стиль крестика в input с типом search?
- 1 подписчик
- вчера
- 45 просмотров
1

ответ
HTML

+2 ещё

Простой
Как пустить элементы по кругу с помощью скролла?
- 1 подписчик
- вчера
- 126 просмотров
1

ответ
HTML

+1 ещё

Средний
Возможно ли сделать любую фигуру через css?
- 2 подписчика
- 30 мая
- 168 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поставить картинку на один уровень с текстом?
- 1 подписчик
- 30 мая
- 115 просмотров
1

ответ
JavaScript

+3 ещё

Средний
Как сделать такой слайдер?
- 1 подписчик
- 30 мая
- 139 просмотров
2

ответа
Показать ещё Загружается…

Frontend-разработчик (React)

ДАЛЕЕ

от 140 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Frontend React

Glob-com

от 100 000 ₽

Настроить сервер

02 июн. 2024, в 01:13

2000 руб./за проект

Разработка логотипа под криптообменник

01 июн. 2024, в 23:49

50000 руб./за проект

Найти одного клиента на наш проект

01 июн. 2024, в 23:20

30000 руб./за проект

Hovo_Varosyan, какой код -- 2 квадрата, никакой связи между ними
Вопрос принципиальный . А то кажется слишком простым в том CSS . Так просто не бывает.
<body> <div class="container"> </div> <div class=" shadow"> <div class="container"> </div> </div> </body>

при таком структуре html код работает
Hovo_Varosyan, спасибо за попытку :) . А при таком HTML ?

<div class="container"></div> <div class="shadow"></div>
serega danet, container не находится в shadow и поэтому при hover у него не поменяется width,

.shadow { &:hover { .container { width: calc(300px * 2) } } }

здесь говорится только про тех container которые в div с классом shadow
Hovo_Varosyan, так что, в CSS нет возможности менять стили разных объектов ?
serega danet,
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { height: 100px; width: 300px; background-color: black; margin: 10px; } .shadow { height: 100px; width: 200px; background-color: black; margin: 10px; } .shadow:hover + .container { width: 600px; } </style> </head> <body> <div class="shadow"></div> <div class="container"></div> </body>

можешь сделать через +, но он срабатывает только для соседних элементов,

<div class="shadow"></div> <div></div> <div class="container"></div>
не сработает
или использовать ~ вместо +.
<div class="shadow"></div> <div></div> <div class="container"></div>
здесь он сработает, но в обоих случаях важно последовательность div

<div class="container"></div> <div class="shadow"></div>
не сработает не знаю почему)))
Ответ заключается в вопросе вот напрямую.

В коде у вас так .shadow:hover .container, т.е. примени стили к контейнеру, когда у него есть предок shadow и на него навели мышкой.
В тексте вопроса сами же пишете для посторонних объектов

Почитайте про селекторы https://htmlbook.ru/css/selector

Что делать?
Решать через соседние элементы + или ~.
Либо через псевдокласс :has и общего предка.

p.s. надеюсь, в реальности calc как-то нормально используется.
Ankhena, не надо переписывать мои тексты по-своему.
У меня в вопросе (хорошо уберем наследование, или Nesting) :

.shadow:hover {.container { }}

Важны скобки в CSS или нет ?
т.к. у меня объекты не связаны , то порядок стилей не важен.
В вопросе : Как из одного стиля управлять другим, посторонним ?
serega danet, я написала во что превращается ваш селектор. А уж как там вы его будете писать, используя нестинг или нет, дело ваше и сути не меняет.
Ankhena, спасибо, я уже детсад закончил .
про эквивалентность & двум вложенным стилям согласен, это есть и в первоистониках .
Но такое легкое удаление {} не встречал.
serega danet, детсад вы, как раз, пропустили, сразу в выпускной класс полезли. А в детсаду без скобок писали и селекторы изучали и к школе уже не знали с ними проблем.

т.к. у меня объекты не связаны , то порядок стилей не важен.

Вы аккуратнее с порядком.

В вопросе : Как из одного стиля управлять другим, посторонним ?

Ответ содержится в моем первом комментарии и ответе Сергея.

На счёт скобок, можно засунуть написанное в конвертер scss в css, он покажет скомпилированный селектор. Именно так его будет воспринимать браузер, если вы продолжите использовать нативный нестинг.
Ankhena, что же вы мне свои проблемы приписываете ? Вы же не нашли решение. Ваше школьное умение "писать без скобок" не помогло вам .
Решение уже есть . Именно так , так я и написал в вопросе. Без JS , без SASS, LESS, шмес.
Только CSS и в 1 строку.
serega danet,
Вы же не нашли решение.

Ну, попробуйте перечитать, может вы сами найдете его в моем комментарии, на букву h начинается))

И закончим на этом переписку, а то уже балаган пошел.
Ankhena, ds не одна такая единственная , независимая и неповторимая.
Про "общий враппер" уже были предложения "чисто на пальцах".
Кто-то что-то намекал про обoий boby.
Намеки мало кому понятны, даже их авторам.
Вот написали бы полностью эту строку, а не половину ваших догадок, могли бы с гордостью смотреться в монитор.
serega danet, ладно, расскажу, что происходит.

Посмотрим на время.
Когда я писала комментарий, четкий селектор уже был в ответах и более того, вами уже прочитан. Поэтому переписывать его снова не было резона. Но шире рассказать о селекторах хотелось. Особенно учитывая, что сервис прекрасно индексируется и полезен не только для задающего конкретный вопрос. Т.е. не только конкретно вам с вашей конкретной задачей.
Ankhena, нет, не надо забирать кусочек славы у вашего коллеги.
Это же ресурс вопросов и ответов. Т.е. для узкого круга ограниченных людей.
Поэтому вы же здесь куратор ? Чтобы помогать людям и с тем, и с другим.
Одного "четкого селектора" не достаточно.
Так можно сказать -- "сходи на Мозиллу, выбери себе селекторов сколько влезет. Там точно есть нужный."
И не поспоришь.
Правильное решение всегда кажется простым, особенно вам, кураторам.
Правильное решение -- это селекторчики, комбинаторчики, скобочки , пробельчики. И их очередь . И не перепутать.
Ankhena, если вы собирались рассказать другим юзерам про CSS , то я сделал это за вас.
Поместил в вопрос . Но вы тоже не отставайте )).
serega danet, логичнее бы в ответ, конечно.
Я вам даже лайк поставлю и отмечу решением.
Ankhena, зачем решением. Решение только одно.
И все-таки я считаю, что точно такой эффект должен быть без :has() , от вложенных скобок :))
Еще у меня есть подозрение, что что-то близкое можно получить из нового @container {}.
У вас есть места под вопросы ?
Ankhena, я все никак не отлипну от моего любимого вопроса. В моей иллюстрации оба препарируемых объекта действительно соседи через общий body. Будет это решение работать на реальном проекте , когда один на 5 уровне вложенности, с другой на 10 ? Здесь вы можете проявить свой пророческий дар
serega danet, в верстке решение очень часто не одно. А уж которое вы сочтете оптимальным в конкретном проекте это другое дело.

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

Будет это решение работать на реальном проекте , когда один на 5 уровне вложенности, с другой на 10 ?

Будет.
Имеет смысл почитать спеку или справочник, чтобы разобраться как работает :has.
Ну и про @container заодно.
Ankhena, вот вы себя и выдали. Что мне делать с вашим советом "сходить куда-нить , потаскать эти контейнеры самому" ? Вы точно уверены , что роль куратора заключается в этом ?
На вопрос о применимости @контейнеров в этой теме меня бы устроил ответ "Да/Нет".
А о рабочем примере я даже и не мечтаю.
Рабочие примеры почему то создают сами спрашивающие -- обновил ацкий макет к вопросу.
serega danet,
вот вы себя и выдали

Это вам на форум с другой специализацией

Что мне делать с вашим советом

Что хотите. Хотите узнать, откроете справочник, на мдн так и примеры есть, не хотите, не откроете.

Рабочие примеры почему то создают сами спрашивающие -- обновил ацкий макет к вопросу.

Ну логично, это же вам нужно решить задачу, а мы так, развлечься.
И потому что это не фриланс. На фрилансе можно дать задание и что-то требовать.
А вопросы, которые легко гуглятся, тут удаляют.
Ankhena, вы, конечно, можете настучать наверх и удалить меня из хаббра, но этот вопрос я вам всё-таки рекомендую оставить, Знаете , наше "милое " общение очень стимулирует к углублённому изучению темы :has(). Я уже прочитал уже кучу статей про этот :has(). Везде только про родных , детей , братья сёстры, нижележащие, вышележащие, внутренние внешние, первые последние ... какие угодно родственники. Но нигде ни разу я не слышал простого выражения "Любые объекты на странице" .

Я предлагаю выписать мне благодарность, а Сергею поставить памятник при жизни за найденное простое , "бронебойное " решение, позволяющее вообще не заморачиваться со разметкой.
Можно выбрать объект в подвале и шевелить им шапку.
Найденное историческое решение вы можете считать эксклюзивом — именно на Хабре оно было найдено. Понимаю вашу гордость — вы тоже участвовали при рождении этого события. И оно приимерно в 10 раз короче , чем event JS. Хотя до этого я получил столько же "экспертных" советов "только JS".
Ankhena, видите, какое у нас с вами плодотворное сотрудничество.
На основе этого живого примера у меня уже готов список вопросов для Хабра. Они именно такие , какие вы требуете -- универсальные, а не "шкурные", только для себя.
Примерный список на:
-- Универсальный размер,
-- Война с мобильным браузером,
-- Связь через атрибуты,
-- Связь через опасные контейнеры.
-- Содержимое в виде переменной ?

Понимаю, никто не ответит на вопрос без примера. Так этот пример еще надо оформить. С этими контейнерами сложно. Я тоже перекопал много статей, переведенных с англ, где 80% воды. Что я понял, @container только для размеров, и только для своих , а не для viewport. Так это можно реализовать и без @container, только новыми модными cqh, cqw . Именованные. неименованные, сверху указывается какой-то стиль, который потом нигде не используется. Я не понимаю их синтаксис. Оформлю -- приглашу вас лично.

Answer 1 · 2024-05-19 04:58:12

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

<div  class="container"></div>
<div  class="shadow"></div>

.container {
    width: 300px;
}

body:has(.shadow:hover) .container {
    width: calc(300px * 2);
}

Ответ написан 19 мая

4 комментария

Answer 2 · 2024-05-19 03:23:51

Потому что селектор который у тебя получился .shadow:hover .container указывает на контейнер находящийся ВНУТРИ тени

Не работает простой стиль CSS для посторонних объектов?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт