This question already has answers here:
Which characters are valid in CSS class names/selectors?
(11 answers)
Closed last month.
I have a div with this class:
<div class="hero-section width-80%"> A Hero Image </div>
CSS:
<style>
.width-80%{
max-width: 80%;
}
</style>
Does a percent sign allowed to use in class value ? If I want to use any percent class with "%" symbol, How can I use a percent sign in css?
Yes, you'd have to escape it in your selector:
.width-80\% {
max-width: 80%;
color: red;
}
<div class="hero-section width-80%">A Hero Image</div>
But it is not valid by the CSS specification (as commented by Álvaro González)
Related
This question already has answers here:
How to adjust the width of a horizontal rule element
(7 answers)
Closed 2 years ago.
How do you change length of an hr tag?
<hr>
Takes the full length of the browser. I tried setting padding and margin but no effect. Any solution for this using plain css or using Bootstrap 5?
You need to set margin for the hr tag. The following would work
hr {
margin: auto 220px
}
/* just for demo*/
.div {
text-align: center;
margin: 20px;
}
<div class='div'> div - 1</div>
<hr>
<div class='div'> div - 2</div>
You can write the following style tag on your html.
<style> hr{margin: auto 220px;}</style>
<hr>
Get more information here.
This question already has answers here:
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 4 years ago.
I'm using a CMS(Joomla), and they allow me to put a class for a tag and then I can modify the css for just that particular page.
I'm trying to use MDN to find the answer but I couldn't exactly get it to work the way I wanted.
Here is the JSFiddle they had on their page, I was messing around with it:
https://jsfiddle.net/amvz5dkb/13/
<div class="divclass">
<span class="spanclass">Span #1, in the div.
<span="betterspanclass">Span #2, in the span that's in the div.</span>
<span="betterspanclass">Span #3, in the span 1.</span>
</span>
</div>
<span>Span #4, not in the div at all.</span>
And here is my CSS
.divclass > .betterspanclass {
background-color: red;
}
This doesn't work, only
.divclass > span {
background-color: red;
}
Seems to have an effect but it doesn't affect span 3 at all, only span 1 and span 2. I want to make the background red for every betterspanclass inside divclass. Is this possible?
This question already has answers here:
How can I remove CSS element style inline (without JavaScript)?
(6 answers)
Closed 6 years ago.
I have a div that looks like this:
<div class="wtHolder" style="width:41.66%; height:150px; position:relative;">
Is there something I can add in css for the wtHolder class that will remove width:41.66% of this?
(If you want the background of why I need to do this, see this question.)
yes you can use !important to overwrite it:
.wtHolder {
width: 100px !important;
}
It's a trick , but you can actually use !important
.wtHolder{
width:100% !important;
background-color:black
}
<div class="wtHolder" style="width:41.66%; height:150px; position:relative;">
This question already has answers here:
CSS selector for first element with class
(23 answers)
Closed 6 years ago.
Anyone know how to select first div of mutliple div with same class name
<div class="abc"><a><img src=""></a></div>
<div class="abc"><a><img src=""></a></div>
how can i select first img in css?
div:nth-of-type(1) {
color: white;[enter link description here][1]
}
demo
You can use first-child pseudo class
.abc:nth-of-type(1)
{
height:100px;
width:100px;
background:red
}
<div class="abc"><a><img src=""></a></div>
<div class="abc"><a><img src=""></a></div>
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 7 years ago.
I have DOM like this
<div class="outer">
<div class="inner">
</div>
</div>
and corresponding CSS is like
.outer {
width: 700px;
}
, where inner could by typeA, typeB.....
Later I found that I want to enlarge outer when particular typeX show up, but
.outer .typeX {
width: 90%;
}
will apply style width: 90% to .typeX div not .outer div. How do I solve this? Is it possible in pure CSS? (Assume .outer is fixed since it is generated by other library)
Unfortunately, what you are looking for would be a parent selector, which does not yet exist in CSS.
Maybe someday (e.g., in Selectors Level 4).