I have this paragraph on desktop website
<p>Original price 225.95
<span>
Save 90.38
</span>
</p>
On mobile device I want hide Original price and Save only
Which should be look like this
225.95
90.38
Is it possible to hide only some words from a paragraph using CSS without making any change in HTML
No. Not with pure-CSS anyways. You could get pretty creative with JavaScript though.
No, you would have to enclose the words you would like to hide e.g. in span elements:
<p><span class="hide">Original price</span> 225.95
<span>
<span class="hide">Save</span> 90.38
</span>
</p>
Then define the rule:
p .hide {
display: none;
}
Related
My previous question was closed because it supposed that this would answer my question. However, it does not, because it's not really what I'm asking. I'm not looking just to remove just the HTML text Received, but the whole row the 0 <3 Received. Simply using display: none; would do. My issue though is that in CSS I can't figure out what selector to use, as it seems the only thing that differentiates between elements in that list is the HTML text in the center, like "Received," or "Given," and that HTML text can't be accessed with CSS since it's not a valid selector. So what do I do?
Note that I need a purely CSS solution, if possible. The html is at the mobile page of mathbymiles.com/u.
Here is the relevant HTML:
<div id="ember69" class="user-stat ember-view"><span class="value">
<span class="number">0</span>
</span>
<span class="label">
<svg class="fa d-icon d-icon-heart svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#heart"></use></svg>
Received
</span>
</div>
If you can not use any identifiers like classes or ids, you can rely on DOM structure pattern. Just try this:
.user-info + .user-stat {
display: none;
}
Try either
.number, .label{
display: none;
}
To remove the content of the row, or try
#ember69{
display: none
}
To remove the whole row.
So I have this piece of code showing the price, I want to hide it. I can display: none; on the price tag but then it is not showing anywhere, in the cart etc.
So I need to display none on the tag rnb_price_unit_number but I can't go through and do that for every item.
Is there a way to select all of the tags beginning with rnb_price_unit_ ?
I thought rnb_price_unit_ * {display:none;} might work but it isn't.
Thanksimage of inspect for better view
Yes you can do this using the CSS [attribute^=value] Selector
It would look something like this:
span[class^="amount rnb_price_unit_"] {
background: #ffff00;
}
<span class="amount rnb_price_unit_30">from
<span>something</span>
</span>
<span class="amount rnb_price_unit_40">from
<span>something</span>
</span>
Further details about this selector can be found here: https://www.w3schools.com/cssref/sel_attr_begin.asp
In my web app, I want to highlight a piece of text so that it looks like somebody has painted it with a certain color. The Medium app uses this effect, too.
(I would like to show an image of this effect here, but stackoverflow does not allow me to post it because I do not have enough reputation points, yet.)
What kind of CSS and/or HTML markup do I need to achieve this?
As a side note: My app is written with React.
You need to use the semantic <mark> tag for this:
<p>This is some <mark>marked text</mark>.</p>
You can then style it any way you want using CSS:
mark {
background-color: HotPink;
}
<p>This is additional <mark>marked text</mark>.</p>
There are many ways to do it:
Highlight using the HTML <mark> tag
Here is an example of <mark>highlighted text</mark> using the <mark> tag.
Highlight text with only HTML code
<span style="background-color: #FFFF00">Yellow text.</span>
Highlight text with CSS & HTML
body { background-color:green; }
.highlight { background-color:#FFFF00; }
p { background-color:#FFFFFF;
<span class="highlight">Highlighted Text</span>
it doesn't matter if the application is written in React on any other framework. You can always define a CSS for basic html tag, such as as #Salaman suggested.
You can use the example that #Salman provided, but I would suggest a small modification.
mark.hotPink {
background-color: HotPink;
}
<p>Do not forget to check out our <mark class="hotPink">hot new offer</mark> today.</p>
<p>Also, you can check out our <mark>standard offers as well</mark>.</p>
You can write a CSS for tag but you probably don't want to do it for every mark tag (because you don't know if some other part of the system might be affected by this. The best (and the safest) way to do this is to create a custom class (i.e. class="hotPink" and assign it to your mark.
Hope this helps, all best! :)
So I'm having a sorta minor issue that is really bothering me. I'm trying to make a single line but the live site is separating the h3 and the sup onto two separate lines.
<p><h3><b><font color=" crimson";>CONSENT</font></b></h3> <sup>
Forgot? I got you </sup><a
href="http://www.exampledomain.com/example"
target="_black">Script</a></p>
The concept is to have the "Forgot? I got you" and the button be on the same line but spaced a little further from the word "Consent".
As you haven't really provided an exact example of what you want your result to look like, you might consider using the following mark-up :
<h3 style='color: crimson; display:inline-block;'>
CONSENT
</h3>
<small>
Forgot? I got you
Script
</small>
What this does :
<h3> and other heading tags are block level elements, which means that they will take not be rendered inline by default. You can change this by indicating that you want to display them inline by using display:inline; or display:inline-block;
The <font> tag hasn't been used in ages, you are better off simply applying a style attribute to the most relavent tag to style your contents.
You were previously using all of these tags within a <p> tag, which can constitute invalid markup. They have each been broken out, if you need some type of container tag, you can use a <div>.
Replaced the superscript tag <sup> with a small tag <small> to keep everything on the same line. You could replace this if you preferred.
Previously, you were using target="_black", which undoubtedly you meant to be target="_blank" for your <a> tag.
Generally, you would want to avoid using an abundance of inline style tags in favor of using an actual CSS file along with class attributes.
Example
<h3 style='color: crimson; display:inline-block;'>
CONSENT
</h3>
<small>
Forgot? I got you
Script
</small>
Your code needs a lot of work but really you could achieve this with simple CSS. As simple as it gets would be using a vertical-align on a <span> element, unfortunately vertical-align: middle; does NOT work directly on your <p> or <h3> tags. There are plenty of other ways to achieve this with separate <div>'s and all but here is the most basic.
HTML:
<span class="vAlign">
<h3 class="crimson flt-left vAlign">CONSENT</h3>
<p class="vAlign"><a href="http://www.exampledomain.com/example"
target="_black">Forgot? I got you</p>
</span>
And CSS
.flt-left{
float: left;
}
.crimson {
color: crimson;
}
.vAlign {
display:inline-block;
vertical-align: middle;
}
I was wondering if we could add a span tag inside a tag....
<h2 style="text-align: left;"><span style="font-weight: bold;">Dog dresses</span><br></h2>
Is the above method right? Is it safe to use...???
I know that We can define some class here and let it go inside other elements like this.
<h2>Dog dresses</h2>
.bold {font-weight: bold; }
OR
<h2 class="bold">Dog dresses</h2>
h2.bold a { font-weight: bold; }
Please share your views..
Yes, it's fine. <span> is an inline element. Unless you add the css display: block; to it, it can go in the <a>.
Both forms are legal. (<a> inside <span> or <span> inside <a/>)
<a><div></div></a>
<!-- illegal < HTML 5, you cannot put block level tags in an <a> -->
<!-- legal in HTML 5 -->
BUT, normally I would only use a <span> inside an <a> for some purpose, because there is some content which needs special treatment
this is <span class="lookatme">special and needs treatment</span>
This is pointless (for me :-) )
<span class="lookatme">some text</span>
THis would normally be
some text
I normally think with <heading> tags, the <a> should be inside the <heading>, but I don't think it is wrong to do the reverse
While that code is valid, it's not the best way to do it.
Here's your code again, indented for clarity
<h2 style="text-align: left;">
<a href="mydomain.com">
<span style="font-weight: bold;">Dog dresses</span>
</a>
<br>
</h2>
The first thing to notice is you have a trailing <br>. What's that for? Extra spacing? Well use padding instead!
Secondly, you don't need the span element - the bold style can be applied directly to the <a> tag.
Why not just write it like this:
<h2 style="text-align: left; padding-bottom: 1em">
Dog dresses
</h2>
It's perfectly legal to have a span tag inside an a tag.
Also read this:
Span inside anchor or anchor inside span or doesn't matter?
It is legal and safe. You can always check your markup at free validation service of w3 organisation: http://validator.w3.org/check
If memory serves correctly, yes, you're allowed to have a <span> within an <a>, and an <a> within an <h2>. Where you define your class is up to you; put it wherever it makes most sense.
You can check if you've written valid HTML here, but don't fret too much if it doesn't validate as long as it renders correctly in all the prominent browsers.
I would perfer to use CSS rather then using inside .
It reduce the complexity of HTML code, it reduce the stress to the browser, by not rendering complex structure.
Easy to grab using JavaScript.
I want to add a different perspective which lacks among answers. Imagine you want to achive something like this, partially linked header:
<h1>This site is amazing</h1>
and a link which is a partial header:
<h1>This</h1> site is amazing
which makes not much sense but syntactically true.