How can I hide an element that doesn't have an id from the CSS?

Question

I am in trouble with a quite specific problem: I am using a portal that doesn't allow me to work on the static html, but only on the CSS.

I need to hide an element that is not declared with an id and so I cannot use

#nameOfTheElement {display:none;}.

Here is how the element looks in the html:

<div class="notToBeHidden">
<label class="label aClassToBeHidden" for="aClassToBeHidden">
<div class="forminput aClassToBeHidden">
</div>

Can someone help me understand how to hide this from the CSS, or if it's even possible?

Unfortunately, I cannot hide every element that uses the specific class because every other is needed even in the same page, I'd rather need to hide the "label class" and the "div class".

Thanks everyone!

So you want to hide anything that doesn't have an `id` attribute? — BenM, Apr 09 '13 at 15:33

score 1 · Answer 1 · answered Apr 09 '13 at 15:20

1

If it is always in the same position on the page, you could use label.aClassToBeHidden:nth-child(7) for the label (if it is the seventh such label), and div.aClassToBeHidden:nth-child(7) for the div, giving:

label.aClassToBeHidden:nth-child(7),
div.aClassToBeHidden:nth-child(7) {
    display: none;
}

answered Apr 09 '13 at 15:20

harriyott

10,505
10
64
103

Hello Harriyott, thanks for the fast reply! "If it is always in the same position on the page" What if it's not? Thanks! – Alessandro Pintus Apr 09 '13 at 15:27
You'll need some way to uniquely identify the elements, either by position, or an ancestor with an id, or an ancestor with a unique class, or always in the same position. – harriyott Apr 09 '13 at 15:36
I think this is the best answer. The selector Harriyott tells target the seventh child(in this example). If the element to hide is not the seventh child pf his parent your css doesn't work as expected. – Arkana Apr 09 '13 at 15:38
The solution I found was slightly different, but I guess it's because I'm not expert enough, and this is very similar. Thanks! – Alessandro Pintus Apr 09 '13 at 16:30
Excellent; glad you've got it sorted. – harriyott Apr 09 '13 at 16:35

score 0 · Answer 2 · answered Apr 09 '13 at 15:29

0

Your HTML looks like invalid. But if you assume LABEL and DIV elements inside another DIV element, you can use child selector to hide them:

.notToBeHidden > LABEL,
.notToBeHidden > DIV {display: none; }

answered Apr 09 '13 at 15:29

Marat Tanalin

13,927
1
36
52

Thanks Marat! In the meanwhile I found a solution I'll post it as soon as the 8 hours will pass. – Alessandro Pintus Apr 09 '13 at 16:38

score 0 · Answer 3 · answered Apr 09 '13 at 15:33

If the container notToBeHidden has the same pattern of children, you can use something like this to target them:

.notToBeHidden label { outline:1px dotted }
.notToBeHidden label+div { outline:1px dotted }

If .notToBeHidden has many label elements or divs, then using the nth-child() selector will be your solution. Again, depends on an expected pattern/output.

If you don't have a consistent position/output for these elements, or can't use their parent as a dependency, it's going to be impossible to write reliable CSS to hide those elements.

Thanks Dawson! I found a slightly different solution but at list I documented myself on the "nth child" concept. Is it called inheritance like in Java? — Alessandro Pintus, Apr 09 '13 at 16:40

score 0 · Accepted Answer · answered Apr 10 '13 at 08:17

I found a solution that worked for me:

I had two similar elements in my html page that I needed to hide working only from the CSS.

<div class="notToBeHidden">
  <label class="label aClassToBeHidden" for="aClassToBeHidden">
  <div class="forminput aClassToBeHidden">
</div>
<div class="notToBeHidden">
  <label class="label anotherClassToBeHidden" for="anotherClassToBeHidden">
  <div class="forminput anotherClassToBeHidden">
</div>

I hid the elements by writing in the CSS:

.label.aClassToBeHidden{display: none}
.forminput.aClassToBeHidden{display: none}
.label.anotherClassToBeHidden{display: none}
.forminput.anotherClassToBeHidden{display: none}

Since I hid before id elements by selecting them like:

#elementToBeHidden{display: none}

I didn't know how to use the same concept with elements within classes.

Again, thanks to everyone!

How can I hide an element that doesn't have an id from the CSS?

4 Answers4