-1
<div class="price heading-font">
  <span>$5 000</span>
  "/Day"
</div>

I'm stuck, I normally just go into styles, copy the element, and remove it through CSS but the text "/day" doesn't have a style. How can i remove the text?

I_love_vegetables
  • 1,575
  • 5
  • 12
  • 26
Marketing234615
  • 1
  • what are you trying to achieve? – Quade du Toit Sep 08 '21 at 15:37
  • 3
    Please read [ask], where it says, "**DO NOT post images of code, data, error messages, etc.** - copy or type the text into the question." – Heretic Monkey Sep 08 '21 at 15:37
  • First time posting so, I'm pretty awful at explaining things, my goal is to remove the "/day" because I'm using a different text for it. – Marketing234615 Sep 08 '21 at 15:44
  • When you say "remove", do you mean "hide"? CSS doesn't really modify the DOM (With a few things that could be considered exceptions) it just styles it, and you've only tagged the question with CSS so I assume JS is not an option. – DBS Sep 08 '21 at 15:48
  • This was solved here: https://stackoverflow.com/questions/15196630/hide-text-node-in-element-but-not-children – Boxcomeaux Sep 08 '21 at 15:54
  • ok so both solutions below, didn't do anything text is still there. – Marketing234615 Sep 08 '21 at 16:37

2 Answers2

0

You can make the font size 0 for the whole div and then make it something positive for the span within it.

Because the selector is more specific it will override the div’s setting.

This method has the advantage that the text you don’t want to show isn’t taking up space, but any borders, margins etc to the div remain.

div.price.heading-font {
  font-size: 0;
}

div.price.heading-font span {
  font-size: 16px;
}
A Haworth
  • 30,908
  • 4
  • 11
  • 14
0

You can use CSS to hide "/Day" text. First, apply font-size to 0 on .price class and then give the initial font-size to .price > span as follows:

.price {
    font-size:0;
}
.price > span {
    font-size: 16px; /* assuming 16px was your initial font size */
}
atiquratik
  • 1,296
  • 3
  • 27
  • 34
  • same as other code, it works on http://jsfiddle.net/pg1on3t8/ but not on the website. I'm super confused. – Marketing234615 Sep 08 '21 at 16:52
  • @MarketingArtic have you added this code in your style file? is there any caching system on the website? if yes then you need to clear the cache to view changes – atiquratik Sep 08 '21 at 16:54
  • added to style file cleared cache even tried opening on a different device still not working. – Marketing234615 Sep 08 '21 at 16:59
  • under chrome, I get an unknown property name when I try to add it through inspect element. – Marketing234615 Sep 08 '21 at 17:01
  • not sure if i understood correctly but you can't select **"/Day"** to write `CSS` rule as it doesn't have any HTML tag wrapped around it. The hack here is to make the whole element hidden by applying font size "0" and then apply the original font size to the child `` element so it can be visible. – atiquratik Sep 08 '21 at 17:15
  • I'm just confused why it won't delete. is there anything I can do to help more? – Marketing234615 Sep 08 '21 at 17:18
  • if it is working on **jsfiddle** then it should work on your website too. just make sure you are doing it correctly. also, check whether your `CSS` code is getting overridden by existing `CSS` code – atiquratik Sep 08 '21 at 17:33