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!

Answer 1

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!

Answer 2

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;
}

Answer 3

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; }

Answer 4

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.