Search code examples
csshidestatic-html

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


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!


Solution

  • 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!