2

So the code is like this:

<div id="logo"><img src="logourl"></div>
<div id="logo"><img src="logourl"></div>

I'm trying to display: none on the second one. Unfortunately, I am blocked from modifying the html, I am also unable to use js. I'm stuck with CSS to try and fix this.

I thought maybe #logo:last-child { display: none; } might work, but since they're technically in different div's just have the same ID, I can't seem to get that working. Any advice would be appreciated. I know the HTML is bad, but there's nothing I can do to fix that. I've told my boss that several times already...

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Squeezit
  • 59
  • 5

2 Answers2

5

#logo:last-child { display: none; } should work, based on the code in your question.

But considering your HTML is invalid, you can try these alternatives:

div:last-child { display: none; }

div:last-child > img { display: none; }

div:last-of-type { display: none; }

You have mentioned that the HTML is bad and you have no control over it. But just for the record, each ID should be unique in the document. Having two ID's with identical values is not valid HTML.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 1
    There are no known instances of #logo:last-child not matching an [id=logo] that is not the first (or only) such element in the HTML document in any CSS implementation. The reasoning given by at least one implementer (I don't remember who, but I think it was Boris from Mozilla) is that CSS doesn't enforce document language constraints. See [this answer](http://stackoverflow.com/questions/7262195/several-elements-with-the-same-id-responding-to-one-css-id-selector/8753329#8753329). Still, the point remains... – BoltClock Mar 28 '16 at 16:13
  • Yep, I do know that each ID must be unique. So oddly enough #logo:last-child { display: none; } doesn't seem to do anything, likewise with #logo:last-child > img However #logo:last-child img { display: none; } removes both of the images #logo:last-of-type { display: none; } also removes both of them. This site is freaking weird... You can see the code working here. Scroll to the right a little bit and you'll see the logo banner appear twice: https://jsfiddle.net/qodtvdL1/1/ – Squeezit Mar 28 '16 at 16:26
  • 1
    Calling that HTML bad is very polite. (You're a good employee.) In reality, it's a bloody mess. The `nth-child` selectors won't help you in this case. Try this: `div#page_content #logo { display: none; }` – Michael Benjamin Mar 28 '16 at 16:38
  • You are a wonderful human being, thank you. That is perfect. :) – Squeezit Mar 28 '16 at 16:40
-2

An id must be a unique identifier. Either use a class or multiple classes:

<div class="top" …
<div class="top left" …

The second example will match "top" and "left" classes.

Arif Burhan
  • 507
  • 4
  • 12
  • 2
    Except OP has no control over the HTML and can't modify it. – Drew Kennedy Mar 28 '16 at 16:14
  • 2
    As I said above, I do not have the ability to modify the HTML. I am well aware that the ID must be unique but it's not. I wish I could fix it, but I cannot. My companies website is...well it was built by a monkey. – Squeezit Mar 28 '16 at 16:16