This question already has answers here:
How can I override inline styles with external CSS?
(7 answers)
Closed 2 years ago.
I have a code and there is class and css style in code. I can't see and can't change this css code. So My css dosen't work for this span. But I need to change this css style as I want. I need blue color for span.
How I can do that? Help me asap. Thanks.
.grid {
display: block;
}
.grid .item {
color: blue;
}
<div class="grid">
<p>I need change</p>
<span class="item" style="color:red;">This is change place!!!</span>
</div>
Use !important tag
.grid .item { color: blue !important; }
Related
This question already has answers here:
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 8 months ago.
How to remove the element background color using browser extension for a online website? I want to remove this color for add this website in OBS?
I've tried this:
main-content wf100 {
background-color: transparent;
}
.main-content .wf100 {
background: transparent;
}
#main-content .wf100 {
background: transparent;
}
main-content and wf100 are two classes for the same element. So, the code will be like this--
.main-content.wf100{
background: transparent;
}
if this does not work, use this !important flag on CSS value.
Example--
.main-content.wf100{
background: transparent !important;
}
I think you need to use !important in end of your code
Example:
.main-content.wf100 {
background: transparent !important;
}
just write like this:
.main-content {
background-color: transparent;
}
if didn't work add !important after transparent
First, none of your selectors are applied. The first and third one aren't because main-content is a class, so you have to use .main-content.
The second one isn't applyed to your element because you added a space between .main-content and .wf100 wich means :
element with wf100 class inside a main-content element.
Without the the space (.main-content.wf100) you specify :
elements with main-content and wf100 classes.
Now your selector is correct, it still doesn't work. Why ? because inline css has the highest priority after !important property that you need to use here.
Because !important has the highest priority, you can apply it to .main-content.wf100 but also .main-content or .wf100.
/* wrong selector */
.main-content .wf100{
background-color:green;
}
/* correct selector, but not enough priority */
.main-content.wf100{
background-color:green;
}
.main-content.second-content{
background-color:orange!important;
}
.another-content{
background-color:yellow!important;
}
<div class="main-content wf100 "style="background-color:#172132;color:white;">wf100</div>
<br>
<div class="main-content second-content" style="background-color:red;">second content</div>
<br>
<div class="main-content another-content" style="background-color:red;">another content</div>
<br>
<div class="another-content" style="background-color:red;">another content without .main-content</div>
If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will "win", and its style declaration will be applied to that HTML element.
Inline Styles - 1000
ID selectors - 100
Classes, Attributes and Pseudo-classes - 10
Elements and Pseudo-elements - 1
So you can use !important for your CSS code.
.main-content.wf100 {
background: transparent;
}
The correct way to do this is to delete the inline css.
This question already has answers here:
How to reset/remove CSS styles for a specific element or selector only
(17 answers)
Closed 5 years ago.
I'm writing a single HTML snippet that needs to be inserted into more than one CMS platform. As such I don't know ahead of time what CSS properties will be applied to the various tags in my HTML from the CMS's stylesheets.
Is there some way I can use inline styles in the HTML to tell it to ignore/reset ALL declared styles from the stylesheet that are applied at a tag level?
If I can't use inline styles to do this, can it be done with an external stylesheet?
Depending on the browser support, you can use the all CSS property. Here is a reference https://developer.mozilla.org/en/docs/Web/CSS/all
a {
color: red;
}
li {
list-style: square;
}
div {
border: 1px solid black;
padding: 1em;
}
div:first-child * {
all: unset;
}
<div>
link
<ul>
<li>asdf</li>
</ul>
</div>
<div>
link
<ul>
<li>asdf</li>
</ul>
</div>
This question already has answers here:
How to remove underline from a link in HTML?
(8 answers)
Closed 6 years ago.
I was wondering how you would disable to underline on the "a" attribute, for href's. I find it annoying, and I was wondering if there was a bit of code I could add to my .css to change it. Thank you.
A simple google search provides this very easy....
a {
text-decoration: none;
}
simply set a {text-decoration:none}
see in action:
a {
text-decoration: none
}
No Underline
EDIT (I am editing this to whoever downvote it, because that could be the only reason for)
In case you have multiple a's and some of them don't have the attribute href then you can target the href like this:
/*demo */
div {
border: dotted lightblue;
margin: 10px;
font-size:30px
}
a {
display: block;
}
/*in action*/
div:last-of-type a[href] {
text-decoration: none
}
<div>
<a>Without href doesn't make it a link</a>
Link with Underline
</div>
<div>
<a>Without href doesn't make it a link</a>
Link Without Underline
</div>
This question already has answers here:
Including another class in SCSS
(6 answers)
Closed 8 years ago.
I have a certain question about applying styles to an element through another CSS class. To be more specific, lets have a look at following. I have div:
<div class="main"></div>
with some styles:
.main {
background: red;
display: inline;
/* some other styles */
}
and I want to apply .another class to the div, but via its .main CSS.
.main {
background: red;
display: inline;
.another
}
.another {
width: 50px;
height: 100px;
}
I assume that a preprocessor (SASS, Compass, etc.) is needed, but can someone advice if this is possible and what to keep in mind?
Thanks
You can assign multiple class to that div. so you can write like this and can apply class.
<div class="main another"></div>
No preprocessor is needed, you can group classes with .class.another, that's the same thing that css preprocessors does.
You can just add multiple classes in html, like <div class="main another and-other">...</div>. In css, you can just group the selectors, the inline order doesn't matter, but it's recommended to use most used class (main) first, and add more specific classes lower. But the order from top to bottom matters, lower in file the selector is, more important it is.
I've created a jsfiddle from your code, take a look. I've added background color so you see the difference, because width and height does not apply to inline elements.
You can merge the two styles like:
.main.another {
background: red;
display: inline;
width: 50px;
height: 100px;
}
This question already has answers here:
Is there any way to hover over one element and affect a different element? [duplicate]
(2 answers)
Closed 9 years ago.
im trying to write a code where you hover over a div and have a completely different div change its effect
heres my code
html
<div class="a">LOREM IPSUM</div>
<div class="boxhighlight"></div>
css
.a:hover, .boxhighlight
{
background-color:black;
}
what i want to happen is that when the user hovers over the word lorem ipsum, the div boxhighlight will change its background color
is there a way to do this?
thanks
Use like this
<div class="a">LOREM IPSUM</div>
<div class="boxhighlight" >asdf</div>
Your css
.a:hover ~ .boxhighlight {
background-color:black;
color: white;
}
See this for your Reference
See example in this Fiddle
Change the selector to this:
.a:hover + .boxhighlight {
background-color:black;
}
The selector changes the styles of the element that has class boxhighlight that next to .a when hovered.