Apply css if element exists using CSS selector

Question

I have header in such a way that I would like to hide my image and span's in my pheader div if "banner" exists. Is there a quick way to do this using CSS selectors? Below is the HTML code.

<header>
  <div id="banner">
    <!-- main content -->
  </div>
  <div class="pheader">
    <div class="user-panel">
      <div id="hey-user" class="d2c-user-panel">
        <img src="../images/defaultHeadshot_lg.png" class="userimg">
        <!-- Hide This -->
        <span class="caret" id="down-arrow"></span>
        <span class="hey-user d2c-header-username"><b>Hello</span>
      </div>
</header>

check here http://www.sitepoint.com/web-foundations/adjacent-sibling-selector-css-selector/ — Muhammad Nasir, Sep 21 '15 at 11:01

Paulie_D · Accepted Answer · 2015-09-21T11:27:17.210

6

Yes.

#banner + .pheader img,
#banner + .pheader span {
display:none;
}

This selector only applies if .pheader is directly after #banner.

You might find this Tutsplus article useful:

The 30 CSS Selectors You Must Memorize

.pheader {
  padding: 1em;
  background: lightblue;
}
#banner + .pheader img,
#banner + .pheader span {
  display: none;
}

<header>
  <div id="banner">
    <!-- main content -->
  </div>
  <div class="pheader">
    <div class="user-panel">
      <div id="hey-user" class="d2c-user-panel">
        <img src="http://lorempixel.com/output/animals-q-c-100-100-3.jpg" class="userimg" />
        <span class="caret" id="down-arrow">Arrow</span>
        <span class="hey-user d2c-header-username"><b>Hello</b></span>
      </div>
    </div>
  </div>
</header>

It's probably worth noting that I've had to close a few divs in your original HTML structure which were missing from your code.

edited Sep 21 '15 at 11:27

answered Sep 21 '15 at 10:56

Paulie_D

107,962
13
142
161

Never knew about the `+` for logic in there, nice! – Jimbo Sep 21 '15 at 10:59
I have been trying this but it doesn't seem to work. – Neophile Sep 21 '15 at 11:09
Ok let me check. I'll get back to this post. – Neophile Sep 21 '15 at 11:27
Thanks for pointing that out. I think I got the answer and its working now. Cheers. Don't need to create another question just for this as you've answered it already. Thanks again. – Neophile Sep 21 '15 at 12:02
OK...you might want to delete the comments that are no obselete. – Paulie_D Sep 21 '15 at 12:03

score 0 · Answer 2 · answered Sep 21 '15 at 11:26

0

Try this. Link https://jsfiddle.net/7bv53xqd/

#banner + .pheader img {
  display: none;
}

#banner + .pheader span {
  display: none;
}

answered Sep 21 '15 at 11:26

Anandh Sp

787
6
24

It does work in the jsfiddle but doesn't work for me. Let me investigate. – Neophile Sep 21 '15 at 11:29

Apply css if element exists using CSS selector

2 Answers2