А можно ли по условия дочернего элемента сделать изменения в родительском?

[Launder]

.menu > li:hover > a 												{                	-webkit-border-radius: 5px 5px 0 0;						-moz-border-radius: 5px 5px 0 0;  			border-radius: 5px 5px 0 0;				}

 Тут при наведении на пункт <li> мы изменяем способ отображения блочной ссылки <a>

 

А можно ли, написать такой код CSS, который, скажем, при наведении на li:first-child:hover менял бы параметры отображения родительского блока .menu?

Спасибо!

[ShumNo]

Это противоречит принципу CSS и потому недоступно

решается с помощью js

[rus]

похожая тема: http://htmlforum.ru/index.php?showtopic=54026#entry361660

[Launder]

Спасибо. В примере в теме используются соседние селекторы и маленькая хитрость, с тем что убрать <input> с поля видимости.

 

Не очень понятно, как подобный подход можно экстраполировать на мой пример:

 

http://jsfiddle.net/Launder/skajdrre/1/

 

Мне нужно, чтоб у основного меню .menu скруглялись уголки, когда выделен его первый пункт li:hover:first-child

 

На всякий случай, приведу исходный код здесь:

<ul class="menu">			<li><a href="#">Русская кухня</a>				<ul>					<li><a href="#">Филе рябчика фаршированное в сухарях </a></li>					<li><a href="#">Заливной пирог с картофелем и белыми грибами</a></li>					<li><a href="#">Щи суточные с расстегайчиками</a></li>                               </ul>			</li>			<li><a href="#">Украинская кухня</a>				<ul>					<li><a href="#">Борщ украинский с пампушками</a></li>					<li><a href="#">Вареники с печенью в луке с салом</a></li>					<li><a href="#">Курица, тушенная с галушками</a></li>				</ul>			</li>			<li><a href="#">Немецкая кухня</a>				<ul>					<li><a href="#">Гусь по-берлински</a></li>					<li><a href="#">Пирог яблочный с грецкими орехами</a></li>					<li><a href="#">Cвиные отбивные под лимонно-соевым соусом</a></li>				</ul>			</li></ul>

.menu 	{			background: linear-gradient(to top, #ecc, #fff8f8);			border: 1px solid #c8c8c8; 			border-top: 0;			padding: 0; margin: 0;			font-family: Arial, Helvetica, sans-serif; 			-webkit-border-radius: 0 0 5px 5px;						/*радиус всего меню*/			-moz-border-radius: 0 0 5px 5px;			border-radius: 0 0 5px 5px;			-webkit-box-shadow: 0 3px 5px rgba(180,180,220,0.2);	/*тень всего меню*/			-moz-box-shadow: 0 3px 5px rgba(180,180,220,0.2);			box-shadow: 0 3px 5px rgba(180,180,220,0.2);			font-size: 0;		}.menu > li		{			display: block; 			}.menu a		{			text-decoration: none;			display: block;				text-align: center;			font-size: 14px;		}.menu > li > a 		{			color: #7c3c3c;			padding: 10px 15px;			}.menu > li:hover > a  		{			color: #ca575b;			background: linear-gradient(to top, #ffdede, #fff);		}	.menu > li:hover        /*Скругляем все углы у выделенного пункта меню <li> - родительского по отношению к тегам <a> и <ul>, чтоб последние не вылезали, используем overflow*/		{			-webkit-border-radius: 5px 5px 5px 5px;			-moz-border-radius: 5px 5px 5px 5px;			border-radius: 5px 5px 5px 5px;	                        overflow: hidden;		}			.menu ul		{			list-style: none;			margin: 0; padding: 0;			background: linear-gradient(to bottom, #ffdede, #fff0f0);		}.menu ul a		{			color: #ca575b;				padding: 5px 10px; 		}.menu ul a:hover		{			background: #8bc6ee; 			color: #fffcfc; 		}.menu li ul		{			display: none;		}.menu li:hover ul		{			display: block; /* Показываем подменю */		}.menu > li.few:hover		{			-webkit-box-shadow: 0 0 10px #57a6cd; 			-moz-box-shadow: 0 0 10px #57a6cd;			box-shadow: 0 0 10px #57a6cd;				}

Edited September 23, 2015 by Launder

[rus]

Не очень понятно, как подобный подход можно экстраполировать на мой пример

и в вашем примере и в посте что я привел, в зависимости от действий над дочерним элементом - нужно что-то делать у родителя, в том примере, если у инпута - checked, то у родителя - <label> нужно было сделать бэграунд.

[Launder]

Нет ну подождите.

В том примере, нансколько я понимаю, так:

Виден <label>, <input> спрятан. эти два тега связаны, когда выделяем <label>, <input> выделяется автоматически, для этого, наск. я понимаю, <label> и создан. <input> создан для ввода форм, а <label> для связи метки с формой.

И алгоритм получается такой: когда выделен label, выделяется и <input>, а далее к следующему после него тегу <span> применяются стилевые свойства через :checked + span. Ну а span родительский для label, получается выделяем дочерний изменяется фон у родителя.

Такая логика?

Только что-то из этого не становится ясным как конкретно в моём примере это применить.

Как я свяжу выделенный тег li:hover с каким-либо внешним тегом? Непонятно...

Edited September 23, 2015 by Launder

[infidel]

Поддержу @ShumNo, зачем изголяться с цсс, если на js это в две строчки делается?

[rus]

Нет ну подождите.

В том примере, нансколько я понимаю, так:

Виден <label>, <input> спрятан. эти два тега связаны, когда выделяем <label>, <input> выделяется автоматически, для этого, наск. я понимаю, <label> и создан. <input> создан для ввода форм, а <label> для связи метки с формой.

И алгоритм получается такой: когда выделен label, выделяется и <input>, а далее к следующему после него тегу <span> применяются стилевые свойства через :checked + span. Ну а span родительский для label, получается выделяем дочерний изменяется фон у родителя.

Такая логика?

Только что-то из этого не становится ясным как конкретно в моём примере это применить.

Как я свяжу выделенный тег li:hover с каким-либо внешним тегом? Непонятно...

вы внимательно читали пост?

http://jsfiddle.net/68d6g5p5/Куда уж проще. Я хочу, чтобы label менял фон, например, на красный, если внутри него выбран радиобаттон.

а теперь посмотрите на вот это:

ждем CSS4 и реверсивные селекторы типо :has()

выводы сами сделаете, или вас подвести за ручку к ним?

[Launder]

Как бы я читал внимательно и я новичок. То что очевидно для Вас, для меня может быть не очевидно, извините...

Что я должен понять из фразы?:

 

Я хочу, чтобы label менял фон, например, на красный, если внутри него выбран радиобаттон.

 

я так понимаю что ":checked" означает выделенный пукнт. Как я понимаю логику этого выделения я написал в предыдущем посте. Если что-то не правильно, укажите, пожалуйста, что.

 

ждем CSS4 и реверсивные селекторы типо :has()

 

Это фразу я понимаю, как прямых и понятных способов для проведения этой операции в текущей версии CSS нет. Но исходя из Вашей ссылки я вижу, что в некоторых случаях это возможно обойти и спросил можно ли это осуществить в моём случае. Что-то не так?..

[rus]

я так понимаю что ":checked" означает выделенный пукнт. Как я понимаю логику этого выделения я написал в предыдущем посте. Если что-то не правильно, укажите, пожалуйста, что.

ок, логика такая: у радиобаттона в принципе невозможно установить бэграунд, поэтому автор той темы обернул его в <label> и если у инпута стоит чекед, т.е. если он отмеченый, то нужно у его родителя, т.е. у лэйбла установить другой фон, но т.к. в css3 пока нет такой возможности сделать зависимость наоборот (почему наоборот? потому что привычное для нас действие это зависимость поведения дочернего от родителя, а не наоборот),

Это фразу я понимаю, как прямых и понятных способов для проведения этой операции в текущей версии CSS нет.

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

Но исходя из Вашей ссылки я вижу, что в некоторых случаях это возможно обойти и спросил можно ли это осуществить в моём случае. Что-то не так?..

примеры слишком разные, разве этого не видно?

если у вас заглохла машина с мкпп, то альтернативный способ ее завести - с толкача.

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

[Launder]

Спасибо большое за пояснения! Буду искать счастья в JS.