I'm trying to place a link in Wordpress quickly and we have a pretty complex style being applied to all a href links in the section. Here's a small sample of the selector and the styles within (there's about 40 lines of styles which I held back)
div.content-rotator li.featured-content a {
margin: 0px;
border: 1px solid rgb(34,56,19);
}
Is there anyway I can place a link in this li and override the parent style? It has to appear within the li with class featured-content.
I don't want to touch the existing CSS at this stage so I'd prefer to implement inline styles on the a element.
Thanks
EDIT: Just in case it wasn't clear, the CSS above is coming from the style sheet and I'd like to zero it out.
There's > 50 lines of styles in this though, I've only shown two for brevity so inline replacing them all isn't really an option.
Just use inline styles or/and add !important to overriden CSS definition, like:
<div class="content-rotator">
<ul>
<li class="featured-content">
...
</li>
</ul>
</div>
or
div.content-rotator li.featured-content a.other {
margin: 3px !important;
border: none !important;
}
Give the selected link an ID and just add !important to the styles. I don't think there is a better alternative unless you plan to go through the entire stylesheet.
Related
my website scraped information from ebay products and for the description of the product I get all html. Product description has inline styles and when I open the description of the product in my website, products css ovewrite my css
Normal:
And after I opened the product description
Here is anchor style from developer tool
So I need any idea how to separete ebay product css with my css.
One of the methods that I think is to add !important to all my styles, but I don't think this solution is elegant and I want something else. So If you have any suggestion how to solve my issue I will appreciate them.
Perhaps you need to update your css to be more specific with it's selector, for example if you have a HTML structure which diferentiate the container of the Product Description from eBay like this
.leftbar {
float: left;
width: 20%;
background: #ccc;
}
a { /*think of this as default link style*/
color: black;
}
#main div:not(.product-desc) a { /*more specific selector*/
display: block;
color: red;
}
a { /*this one is from eBay*/
color: green;
}
<div id='main'>
<div class='leftbar'>
<a>Hello</a>
<a>World</a>
</div>
<div class='product-desc'>
<a>Description</a>
<a>Product</a>
</div>
</div>
You can use a :not selector to define your main style so it won't be disrupted by the eBay style
The more specific your selector is, then your style will be used. But if your selector is the same, then the last rule from top bottom will be applied. So in the above example, the link inside product-desc color is set to green not black
create a custom inline CSS property that you desire in the element to overwrite the default CSS. here is how you create inline CSS for overwriting anchor properties.
Here how you do:
create the icons/text of anchor inside a element and give inline CSS
<a href="http://www.example.com" target="_blank">
<span style="color: #ffffff !important;" >icons</span>
</a>
A quick test in Chrome shows that the
a:visited * { ... !important}
does override the inline style, but adding the !important back to the span works fine.
<span style="color: #ffffff !important;" >
For understanding it better. Learn here Overwriting Hover in anchor
Overwriting visited in anchor
Blockquote
If you want to remove all exist style and reset it to default you can use:
all: initial;
I am trying to apply the style to the .lvl-2 to apply an indent to a particular div, but it is getting overriden by something in materialize.
Chrome inspector scrennshots below
I have some HTML (below is excerpt it is in a list)
<li key={elements.index}>
<div className="row">
<div className="col red s4">f</div>
<div className="col blue s8">f</div>
</div>
<div className="row">
<div className="col red s4 lvl-2">indented</div>
<div className="col green s8">f</div>
</div>
I have some CSS
li> .lvl-2 {
padding: 0 0 0 10px;
}
I have also tried being more specific but when I do inspector doesn't see the style at all (which is wierd )
li div> div .lvl-2 {
padding: 0 0 0 10px;
}
The problem is that when I view in the inspector it say that the style is being overwritten by the style below from materialize
ul:not(.browser-default) {
padding-left: 0;
list-style-type: none;
}
Unfortunately if I just override it it won't work because I want different syles on different li's
ul:not(.browser-default) {
padding: 0 0 0 10px;
list-style-type: none;
}
Your CSS was incorrect defined, that's the reason why you don't see your style applied.
With your HTML markup:
<li key={elements.index}>
<div className="row">
<div className="col red s4">f</div>
<div className="col blue s8">f</div>
</div>
<div className="row">
<div className="col red s4 lvl-2">indented</div>
<div className="col green s8">f</div>
</div>
</li>
And you want to style .lvl-2, the proper one should be : li .row .lvl-2 {} ,
Of course the CSS specificity might not be stronger than the one defined in Material UI, in that case you should add more specificity, something like:
ul li > .row > .col.lvl-2
Please, never ever using "!important" unless you're forced to. In this scenario, it's still quite easy to fix and this will save your future-self.
=========
Updated answer on Nov 18th:
Let's go through each of your attempt one by one and see what went wrong:
1)
li> .lvl-2 {
padding: 0 0 0 10px;
}
This means "get all the direct child elements with .lvl-2 class from li", this won't apply because your HTML markup is different.
To be more specific, your lvl-2 element has a wrapper div with class row, as of now the direct children from li are divs with .row class. The > stands for "get direct child`.
If you want to use direct selector, the selector should be like li .row > .lvl-2.
2)
li div> div .lvl-2 {
padding: 0 0 0 10px;
}
Once again, the CSS won't run because your HTML markup is different from what your CSS defines.
In this case, it means "from any li element, select all divs children, from each selected div, get all direct div children, then get all element with .lvl-2 class from each direct selected div.".
That might be hard to get the first time, but let me show you the HTML markup which will work in your second attempt.
<li>
<div class="wrapper">
<div class="child">
<div class="lvl-2">
</div>
</div>
</div>
</li>
or even another markup
li
div
div
div
div.lvl-2
To answer for your question, I think you should read on this article, it will help you easier than my explanation "https://dev.to/emmawedekind/css-specificity-1kca"
In your scenario, and also from my experience, you should define CSS selectors using class, not with type selectors (e.g like div, li, button).
Type selector is the lowest priority in CSS specificity calculation. Use with caution.
In term of project scalability, using type selector means you're forcing the element to be that specific type. E.g: li span means only the <span> tag, what happens if another developer or an upcoming request change, that tag needs to be replaced with a div. So saving your future-self, use with classes like li .item, it will both apply either to <li> <span class="item"> or <li> <div class="item">.
It reduces confusion as much as possible, and increase readability CSS code. Reading something .list .item always helps a clearer vision than a li span.
Most of the time, when your Frontend architect depends on a 3rd party like Bootstrap or Material-UI, they all use class selectors. To override them, the only way is to use class selectors.
Hope this helps,
Use !important which is an exception to the specificity calculation rule.
li > .lvl-2 {
padding: 0 0 0 10px !important;
}
MDN excerpt:
The !important exception
When an important rule is used on a style declaration, this
declaration overrides any other declarations. Although technically
!important has nothing to do with specificity, it interacts directly
with it. Using !important, however, is bad practice and should be
avoided because it makes debugging more difficult by breaking the
natural cascading in your stylesheets. When two conflicting
declarations with the !important rule are applied to the same element,
the declaration with a greater specificity will be applied.
Some rules of thumb:
Always look for a way to use specificity before even considering
!important
Only use !important on page-specific CSS that overrides
foreign CSS (from external libraries, like Bootstrap or
normalize.css).
Never use !important when you're writing a
plugin/mashup.
Never use !important on site-wide CSS.
try be more specific like:
ul:not(.browser-default) li .lvl-2 {
padding: 0 0 0 10px;
}
avoid using !important if you can, this will bring pain later
also i think the culprit is not the padding on ul:not(.browser-default) since this should apply to the ul element, not to it's children
use !important keyword
Example : width :100px into width :100px !important
I am trying to apply a hover effect on a div. Why isn't this working at all?
My Html looks like this:
<a href="#panel-866" id="panel-866">
<div class="application-icon" style="background-image: url('/custom-icon-off.png')">
</div>
</a>
CSS
.tab-title > #panel-866 .application-icon:hover {
background-image:url(/custom-icon-hover.png);
}
You need to override the inline styles, which have higher specificity than external / embedded styles.
Try this:
#panel-866 > .application-icon:hover {
background-image:url('/custom-icon-hover.png') !important;
}
Here's a demo: https://jsfiddle.net/0aghvn3u/
The '>' - selector gets direct descendants, maybe just remove
.tab-title >
and it will work. Difficult to say without knowing your markup since its a simple task and your solution seems to be correct.
Make it important so it overrides the anchor tag's default hover styles.
.tab-title > #panel-866 .application-icon:hover {
background-image:url('/custom-icon-hover.png') !important;
}
There are a few problems with your code, so it's hard to say what specifically is causing the problem. You have a div element in an a tag, which you should avoid because block level elements don't work well within inline elements. This is likely not the problem, though.
I've added some markup and removed some CSS that included a selector not in the code you presented here that might have caused the effect not to work:
<a href="#panel-866" id="panel-866">
<span class="application-icon" style="background-image: url('http://lorempixel.com/400/400')">
</span>
</a>
and
#panel-866 .application-icon {
height: 400px;
width: 400px;
display: block;
}
#panel-866 .application-icon:hover {
background-image: url(http://lorempixel.com/200/400) !important;
}
Notice I made the inline span element display:block (this is technically "allowed") so I could give it a width and height. Even when on a div element, background images need a width and height to display.
Secondly, as the other posters mentioned, adding an !important declaration to your :hover style rule is needed because browsers will always override internal or external style rules with inline ones.
https://jsfiddle.net/3b2ywp5b/
I have bootstrap.css and login.css attached to index.php. Within index.php there are several form elements such as input type['text']. However, both attached CSS files target input type['text']. I have bootstrap.css linked above my other css file:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
How can I specify that I want input type['text'] to use the rules specified within login.css rather that using the rules from bootstrap.css? I generally require bootstrap.css more, but do with to now and then, implement my own rules which I cannot since the rules from bootstrap.css are rendered first since it is listed first.
The more specific you define your css, the more priority it gets in CSS.
You need to define your custom rules more relevant than the bootstrap ones.
Example:
p.test {
color: green;
}
.test {
color: blue;
}
<p class="test"> teststring </p>
You see that p.test is stronger than .test though .test comes after p.test.
hope that helped.
if your remove the p from p.div you will see the color gets blue, because the order is only relevant if both rules are equal in specificty.
.test {
color: green;
}
.test {
color: blue;
}
<p class="test"> teststring </p>
well, there is something like "CSS Rule Hirarchie" in you can use for your disired effekt. In short: The most "upper" CSS Rule wins the Game.
If you Develop with Chrome or FF you can Debug anything with the Developer Tools (i love the chrome one in this case) and look why it's getting overwritten by Bootstrap. Mostly it's a CSS Level Rule or somthing like this.
I would suggest you using your own Class on the Wrapper Element and override the styles as you wish. Give a look on my Example below to get an Idea how I mean it.
Sidenote: I think this Tutorial from CSS-Tricks describes well whats going on with the Rules of CSS and how the most specific rule comes in to the game.
/* Just a Basic Styling */
ul { list-style:none; }
a { text-decoration: none; font-family: Verdana; color:black; }
/* Lets make all list elements Blue. This should be familiar for you,
* this is the standard overwriting of css classes (is this called so?).
*/
.list li a { color: blue; }
/* Look at this Example now, we specify the 3rd list Element.
* As this rule is more specified as the rule from line 9,
* this rule takes effect on the 3rd line, the other ones will stay blue.
* +
* As a proof that you can't "override" this rule, I have put one
* line below to show you, that even another low lvl rule can't override it.
* Line 20 is still more specified then Line 21, even it is comes after it.
*/
.list li:nth-child(3) a { color:pink; }
.list li a { color:blue; }
/* Another Example of higher CSS Hirarchie would be this line.
* We go one DOM Element even higher, and guess what:
* If you comment out this line here, it will take effect.
*/
/* .wrapper li:nth-child(3) a { color:seagreen; } */
<div class='wrapper'>
<ul class='list'>
<li><a href='#'> Magic Link </a></li>
<li><a href='#'> Another Link </a></li>
<li><a href='#'> Rule over the wrapper Link </a></li>
</ul>
</div>
I have the following code
<div class="subNav">
Work Experience
</div>
I have an external style sheet applying the effects to both .subNav and .current. I am using the style .current to overwrite the style applied on .subNav (using it to show what page the user is on, the 4em size is used to test the code).
CSS:
.subNav a, .subNav a:after{
font: normal normal 600 0.75em 'Lato', sans-serif;
margin: 0px 5px;
display: inline-block;
color: #FFFFFF;
}
.current {
font: normal normal 900 4em 'Lato', sans-serif;
margin: 10px 0px;
}
Basically, its ignoring .current completely. I have tried putting direct code to change various style properties (such as colour, etc) in the link code directly and it works, but doesn't change with the style.
The HTML style attribute is for writing inline CSS that will be applied directly to an HTML element, and only that element.
Proper Usage of The Style Attribute
<div class="subNav">
Work Experience
</div>
There's no way to attach an existing CSS rule set specifically to a single HTML element, as CSS is meant to come second and be applied on top of pre-existing HTML.
One way many developers work around this, in your scenario where you may not be sure exactly where you want your styles applied because the target can change, is to use a class name. This will apply your styles to any element with the class, as well as any elements in the future you put the class on, at any time the class is present.
Your CSS is already correct if you want to take this approach. Next all you have to do is add the class attribute to any HTML element you'd like to see those styles applied to. So in your case where you're trying to style the current link, instead of making sure the current link ends up with style="current", instead make sure the current link ends up with class="current" on it.
If you're worried about the styles in .current being applied to other elements that have that class name on them, you could change your CSS to only target elements with the class name of "current" that are inside of your subNav like in the code shown below.
.subNav .current {
font: normal normal 900 4em 'Lato', sans-serif;
margin: 10px 0px;
}
I feel obligated to point out though however that if you're having this issue it's merely a symptom of a different problem, as you should be responsibly naming things not to conflict with one another.
On a side note, a couple other items I noticed with your code-
If your <div> with a class of .subNav is the only "subNav" on the page, you should be an id not class
May be worth while exploring how the <nav> tag works, and when/where it should be used instead of that <div> all together
You shouldn't leave that empty title attribute on your <a> tag. Having an empty title attribute is worse than not having one at all. I certainly recommend you remedy the issue by filling it in with some useful information rather than just remove it though.
you write style instead of class
<div class="subNav">
Work Experience
</div>
You can't apply CSS class inside style property. Inline styles only you can write using style property. If you want to apply from external either you can use class or ID(if you want unique).
Work Experience
or
Work Experience
If you use ID, you need to write your CSS like below.
#current {
font: normal normal 900 4em 'Lato', sans-serif;
margin: 10px 0px;
}