CSS how to target element beside my current element?

Question

If I have 2 elements side-by-side in the DOM like this:

a.button
div.container

I want to target a.button if div.container has class div.container.fullscreen

I was thinking something like this:

div.container.fullscreen + a.button { display:none }, but it does not work.

Any suggestions?

Could you write out the html so we can get a clearer idea of what you're working with? — damian, Jun 26 '13 at 12:25
Try to ckeck this answer: http://stackoverflow.com/questions/1817792/css-previous-sibling-selector — Lucas, Jun 26 '13 at 12:27
is button used to get div full screen ? if yes, then there might be a solution. Your HTML markup plz :) — G-Cyrillus, Jun 26 '13 at 12:47

dsgriffin · Accepted Answer · 2013-06-26T12:32:51.450

+ won't work as it's the next sibling selector.

Your selector div.container.fullscreen + a.button would target the a if that was the next immediate sibling of the div, e.g.

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

div.container.fullscreen ~ a.button won't work either as that'll select all the siblings after, and not before.

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

Sadly, there is no previous sibling selector to achieve what you want using pure CSS.

Jakub Wasilewski · Answer 2 · 2013-06-26T12:37:52.407

The E + F syntax only matches if E precedes F. If they are ordered like you just described, I don't think you can style the a with pure CSS.

You might simply change the HTML to put the fullscreen class on the parent container of both container and button. That way, you can use the following declarations to style:

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

.fullscreen > a.button {
  display: none
}

score 0 · Answer 3 · answered Jun 26 '13 at 13:20

missing your real html. <a> has an href attribute ? Is it targetting <div> ?

Button doesn't have necessary to be hidden if it stands hidden under div once full expanded , it 's being hidden by div itself.

Form elements can help see idea in action : http://codepen.io/gcyrillus/pen/otFim

CSS how to target element beside my current element?

3 Answers3