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
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.
Hey im trying to change this (working) line of code here:
*<a href="DPS_Guitarspg3.html">
<button style="background-color:rgb(0,0,5)"; type="button"> <p style="color:rgb(111,0,100);"> Guitars</p></button> </a>*
Into an equivalent statement w this kind of format(utilizing a class) here:
*<a href="DPS_Guitarspg3.html">
<input type="button" class="inline" id="redirectButtons">
</a>*
My question is how/where to type in the colored text("Guitars") used in the aforementioned code block in the latter code block. Sorry if this is a bad question, I am awful with HTML. Thanks in advance.
Or, you can style the <a> tag to look/act like a button. Just use the :hover and :active, like this
.aBtn{
padding:5px 10px;
text-decoration:none;
color:rgb(111,0,100);
background-color:rgb(0,0,5);border:1px solid transparent;
}
.aBtn:hover {color:white;}
.aBtn:active{border:1px solid orange;}
<a class="aBtn" href="DPS_Guitarspg3.html">Guitars</a>
You want a button to function as a hyperlink. To give you full styling control over the button, you could make the button an image file and put the image file inside your hyperlink.
<a href="DPS_Guitarspg3.html">
<img src="image-of-button.png">
</a>
Alternatively, you could use a front-end library like Bootstrap.
The question I want to ask is, "Is it possible/good practice to refer to a child of an element that is not a direct child?"
For instance, if you have HTML like this:
<form class="formation">
<p>
<span>
<input class="phone input">
</span>
</p>
<p>
<span>
<input class="text input">
</span>
</p>
</form>
And you want to refer in CSS to the inputs only in that particular form, so you call the class of the form followed by the class of the inputs without referring to the elements in between, like this:
.formation .input {
width: 10px;
}
will this work properly?
I tend to think I've done this already on projects and it has worked properly but usually I refer to all the children in between (because I don't go that deep). But I'm currently working on a media query for a wordpress site that doesn't seem to be respecting this rule. Is this bad practice? Or is this downright incorrect? Thanks for all your help!
Yes, it is not only possible but also advisable to do so. Choose your selectors for your css rules as lean as needed to reduce dependency on your markup structure. This is not only wise for performance reasons, it also saves you quite some work in case your markup should ever change, e.g. later on you notice the span is not needed any longer and you remove it to keep your markup as clean as possible. In case you used the full DOM path to your .input you will then also have to adjust your css selectors. Same if for any reason in the future your <p> should become a <div>.
Just make sure you give the rules as much DOM context as necessary to not apply your rules to the same classed element in other contexts (if you have any at all, and if you want to apply a different set of style rules for it).
Yes, it'll work fine. What youv'e got with .form .input allows for any number of intermediate nodes between the two classes.
If you'd had .form > .input, then your CSS wouldn't match at all. > is the "immediate descendant" selector, so
.form .input { color: green }
.form > .input { color: red }
<div class="form">
<div class="input">This is red</div>
<div class="whatever">
<div class="input">This is green</div>
</div>
</div>
Hi i need to display my link in footer as "powered by Arun" and it should be a link to my homepage. I need to give a different look to the name next to Powered by. So how to increase the size of the link and any suggestions for customizing the link well.
Use a <span> element:
<span>Powered By</span> Arun
You can then apply a style to the span, or a class:
Inline style:
<span style="font-size:1.2em;"></span>
Class style:
apply the class:
<span class="mySpanClass"></span>
and specify corresponding style (in a stylesheet):
.mySpanClass { font-size:1.2em; }
I think, you need something like this,
Arun</span>
(I am guessing your are not a technical person, so this will be easy for you)
And if you can do, please do this,
Add this css,
.poweredby {
font-size:1.2em;
}
.author {
font-weight:bold;
}
And add this markup,
Arun</span>
As denoted by Mr. Disappointment in his answer you can use a <span>.
To show an example of using it with the link, see below.
<a href="LinkToYouHomePage.htm"><span style="font-size: small">Powered by</span> <span
style="font-size: larger">Arun</span> </a>
If you want to give some basic style to a link couldn't you do
<p><i style="font-size:1.5em ;color: blue; ">Powered by</i><strong> Arun</strong></p>
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;
}