CSS как указать элемент рядом с моим текущим элементом?

Question

Если у меня есть 2 элементов бок о бок в DOM, как это:

a.button 
div.container 

Я хочу предназначаться a.buttonеслиdiv.container имеет класс div.container.fullscreen

Я думал что-то вроде этого:

div.container.fullscreen + a.button { display:none }, но не работает.

Любые предложения?

Answer 1

+ не будет работать, так как это next sibling selector.

Ваш селектор div.container.fullscreen + a.button нацелится на a, если это был следующий непосредственный брат из div, например,

div.container.fullscreen 
a.button // this is now targeted 

div.container.fullscreen ~ a.button не будет работать, как и выберет все брат и сестра после, а не до.

a.button // this isn't targeted. 
div.container.fullscreen 
a.button // this is now targeted 
a.button // so is this 

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

Answer 2

Синтаксис E + F соответствует только если E предшествует F. Если они упорядочены, как вы только что описали, я не думаю, что вы можете создать a с чистым CSS.

Вы можете просто изменить HTML-код для размещения класса fullscreen в родительском контейнере как container, так и button. Таким образом, вы можете использовать следующие декларации к стилю:

.fullscreen > div.container { 
    /* 
    any fullscreen modifications to be done, what used to be in div.fullscreen 
    */ 
} 

.fullscreen > a.button { 
    display: none 
} 

Answer 3

отсутствует ваш настоящий html. <a> имеет атрибут href? Он нацелен на <div>?

Button не нужно скрывать, если он скрыт под div после полного расширения, он скрыт самим div.

Элементы формы могут помочь увидеть идею в действии: http://codepen.io/gcyrillus/pen/otFim