How to remove a specific element with the same class code as other elements on page?

Question

I have an element on our webpage that needs to be removed. When I write the display: none CSS it removes every element on that page because each element is written with the same class. I need to know what I need to add to the CSS that will remove the one particular element, and not all of them.

Below you will see the code for two elements with the same class, but different href, title names. How do I right that into my CSS to remove just one.

.MYCLASS {
display: none;
}

Will remove all of them, but I need to only remove the first.

<div class="My Class">
  <a href="http://*****.net/carrier-information/additional-information/" rel="bookmark" title="additional-information">
    Additional Information
  </a>
</div>

<div class="My Class">
  <a href="http://*****.net/carrier-information/5327-2/" rel="bookmark" title="More Info.">
      More Info.
  </a>
</div>

How do I remove one, but not the other?

Your classes do not match. You need to change the class in html to ".MYCLASS". Also, use lowercase such as my-class. — Dan Weber, Jan 27 '17 at 21:15
Possible duplicate of [How do I add a class to a given element?](http://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element) — Dan Weber, Jan 27 '17 at 21:16

score 0 · Answer 1 · answered Jan 27 '17 at 19:55

You can use multiple classes. So name them different things would be your easiest solution.

    div class="class1" 

    div class="class2"

in your CSS just do .class1 {display: none;} or whichever needs to dissappear.

As the first comment on your question linked to you can also use selectors as another solution.

score 0 · Answer 2 · answered Jan 27 '17 at 20:01

0

You could add the html style property to the wanted tag to just hide one element.

For exemple:

<div class="My Class" style="display:none;">
  <a href="http://*****.net/carrier-information/additional-information/" rel="bookmark" title="additional-information">
    Additional Information
  </a>
</div>

answered Jan 27 '17 at 20:01

Faegy

942
1
12
29

Thank you for the response! If I were to remove the first element, the code I'd put on my CSS would be: .MYCLASS href=href="http://*****.net/carrier-information/additional-information/" rel=bookmark title=additional-information { display: none } – IVIorgan2 Jan 27 '17 at 20:15
Can you elaborate a bit more? Which element are you trying to hide? What language are you using? – Faegy Jan 27 '17 at 20:16
In general rule, to hide an element you must add to the tag you want to hide (`div` if we are talking about the tag subject to the `.myclass` class) a `style` property which value is `display:none;`. – Faegy Jan 27 '17 at 20:20
Sure! I'm using CSS to remove an element from our Wordpress site. I know that if I use the .MyClass {display: none; } code it will remove the elements that are within that class. The problem I am having is that I have hundreds of elements listed under that class code, so I don't want to rename all of them. So I really just need to know how to remove a specific element within that class. The HTML of the element is div class=:carrier_box href="http://www.*****.net/carrier-information/additional-information/" rel="bookmark" title="Additional Information" – IVIorgan2 Jan 27 '17 at 20:27
Well just add `style="display:none;"` between `href="www.*****.net/carrier-information/additional-informati‌on/"`and `rel="bookmark"` in your html to have it look like `href="www.*****.net/carrier-information/additional-informati‌on/" style="display:none;" rel="bookmark"` – Faegy Jan 27 '17 at 20:29
Faegy - Thanks again. Forgive my ignorance, but would I have to DL a plugin for WP that allows for html code edits? I follow what you are saying and I tried to edit the HTML through "inspect element" with FIreBug but Im not sure how to save the change. – IVIorgan2 Jan 27 '17 at 20:59
No this changes should be done manually. Is this code generated dynamically? Or can you access the CSS file on the server? – Faegy Jan 27 '17 at 21:02

score 0 · Answer 3 · answered Mar 01 '22 at 17:28

you could make use of this :nth-of-type() It allows you to be specific about which element with the same type you want to remove. you can also make it work with classes

for example the bellow will hide the first element, if it is the first div child of a parent element.

div.MYCLASS:nth-of-type(1) {
  display: none;
}

However if it is not the first div child element you will need to count to it for example:

    <div></div>
    <div></div>
    <div class="My Class">
      <a href="http://*****.net/carrier-information/additional-information/" rel="bookmark" title="additional-information">
        Additional Information
      </a>
    </div>
    
    <div class="My Class">
      <a href="http://*****.net/carrier-information/5327-2/" rel="bookmark" title="More Info.">
          More Info.
      </a>
    </div>

to hide the first element with the URL your code will have to look like this:

 div.MYCLASS:nth-of-type(3) {
       display: none;
    }

Unfortunately there is no nth-of-class.

Here is more about it if you are interested: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

How to remove a specific element with the same class code as other elements on page?

3 Answers3