I have something like this
<div class="text-holder">
<h2>this is text-holder</h2>
<p>this is text</p>
</div>
<a href="#" class="ignore">
<div class="text-holder">
<h2>this is text-holder</h2>
<p>this is text</p>
</div>
</a>
<a href="#">
<div class="text-holder">
<h2>this is text-holder</h2>
<p>this is text</p>
</div>
</a>
And CSS that does this
.text-holder {
color: green;
}
a {
color: red;
other css
}
.ignore {
other css
}
Is there a way that the link can ignore the css style for the global a style, and just use the ignore? I don't want to use !important because there will be other instances of text-holder that will want to use the global a style.
EDIT
Thanks for all the replies, but let me be a little more clear so hopefully you understand better. (Not the best at explaining)
The problem is text-holder has it's text styling from global p, h2 and etc. Which are above a in the hierarchy of the stylesheet. so p, h2, a, .ignore, .text-holder etc
a has a lot of info on it, hover, visited, focus, color, font-weight and etc. Now for all the divs I wanted to ignore this info I was looking to see if there was a simpler way of just creating an ignore rule, rather than for all the divs I want to ignore it to overwrite them with all the rewritten information.
CSS doesn't support "ignoring", but part of its nature (the Cascading part of Cascading Style Sheets) supports "overwriting"; Newer CSS properties will overwrite older CSS properties of the same name, so you just need to give .ignore a different color value than your previous a selector's color value.
Is there a way that the link can ignore the css style for the global a style, and just use the ignore?
No. If a selector matches then all applicable rules in it will be applied.
.ignore is at least as specific as all preceding rules, so you just need to set the properties you want to override to the desired value.
Yes, basically what you're trying to do is already how CSS works.
The key to understand is the concept of specificity.
CSS rules applied through the style="" attribute have a weight of 1000.
Rules applied against an #id selector have a weight of 100.
Rules applied against a .class selector have a weight of 10.
And rules applied against an element tag name or :pseudo-selector get a weight of 1.
So for example, if you have...
a { color: red; }
.ignore { color: black; }
The weight of the red links is 1, while the weight of black text is 10, so the black has higher specificity and would win.
The important concept is that .ignore doesn't tell it to ignore its old assignment, it is instead a way to override the assignment.
EDIT
I should also add that cascading rules have no weight, so any definition in a child element will override them.
For example:
a { color: red; }
.ignore { color: black; }
div { color: blue; }
<a class="ignore"><div>hello world</div></a>
The text will be blue, not black, because the div tag has a rule applied to it which overrides the cascading black from the .ignore class.
You can try:
:not(.ignore) .text-holder {
color: green;
}
Or if you move your ignore class to .text-holder element
.text-holder:not(.ignore) {
color: green;
}
Related
I have a class mainText, it stores the settings for the font, its size, color, etc.
In the first block, everything suits me, but in the second block, all the parameters are repeated, but the color is different.
What is the right thing to do in this situation?
Create a new class and duplicate all properties in it?
Use style on every element of the second block?
I don't understand why classes can't be inherited in css like
.secondText : mainText{
color: white;
}
Normally, you would give both elements the same base class and your second item the additional class:
<div class="base">
I am a div
</div>
<div class="base white">
I am a div, but white
</div>
For the css part
.base {
//base config
}
.white {
color: white;
}
There is no explicit class inheritance in css, yet you could look into mixins in scss or scss overall, because it provides some features css does not have. Hope this could help!
you could use the smame one and add a second class to change the color with high priority.
HTML:
<div class="firstText">Text</div>
<div class="secodText">Text</div>
.firstText, .secondText{
color: black;
:
:
:
}
.secondText{
color: white !important;
}
or you could place the css in the HTML code. for example:
<span class="firstText" style="color: white;">Text</span>
for more info check: Can a CSS class inherit one or more other classes?
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 write a html element as below ::
<div class="box"> Foo box </div>
and write css like
.box {
width: 400px;
height: 40px;
color: red;
text-align: center;
}
or
div.box {
width: 400px;
height: 40px;
color: red;
text-align: center;
}
I want to ask that how the both css for box class is different than each other.
The difference is that in the first class you tell that all element (div, p, span ...) with class box have that attribute.
Like this:
<span class="box">test</span>
<div class="box">test</div>
<p class="box">test</p>
The second class means that only div with class box has that attribute
Only this elements get second class:
<div class="box">test</div>
The selector before the class specify which type of elements can take this class
One very important difference between div.box and simply .box is in something called selector specificity. It is a set of rules which defines which selector gets more weight once the browser starts going through all the selectors that potentially have influence on a particular element.
What this means is easily demonstrated in the following example (DEMO)
We have a simple div containing some text.
<div class="box">
Zarro boogs found!
</div>
Now we add some CSS selectors to the example.
div.box {
padding:0.8em;
background: #bd0000;
color: #fff;
}
.box {
color: #bd0000;
}
One of the most basic rules of CSS is that selectors can be redefined in a way that whatever definition comes last and has influence on a particular element its the one that is going to be used (the sole exception being when using !important which always takes precedence).
Now in the above example redefining the .box class selector should actually hide the text but instead its still visible. How is that possible if we said that latter rules always take precedence? Its because the div.box rule has a higher specificity that .box since it actually gets points for containing both an element (div) and a class selector (.box) in its selector declaration (div.box).
Of course the div.box rule will be applied only on a div element but since class selectors are often reusable pieces of code there is plenty of situations when they are used on divs.
Although the rules in the official W3 specification are not that hard to understand they are sometimes pretty hard to remember. That's why I would like to recommend an excellent article on CSS selector specificity which can be found here.
In my opinion selector specificity is by far the most important thing to master when it comes to tracing inheritance problems with CSS stylesheets.
.box means any element having class box.
Example:
<div class="box">...</div>
<section class="box">...</section>
<span class="box">...</span>
div.box means only div element having class box.
Example:
<div class="box">...</div>
I have a case where I have a .menu within a #header and when I accessed .menu's children via a css selector like .menu a, it is using the #header a instead.
I was expecting the .menu a to override the #header a as it is closer to the a element. Why isn't this happening? I'm assuming it has with it being a class compared to an id based on the example below.
In the example, is there a good way override #red span css within .blue span without otherwise restricting the parent style?
By "good way" I suppose I mean flexible. For example .blue could be an element created by a php framework that is used in many places (possibly not within an id styled parent element, or possibly within a parent styled on a different id).
Here is an example. All except #green will still be red:
HTML:
<div id="red">
<span>red</span>
<div class="blue">
<span>blue(class) - should be blue</span>
</div>
<div id="green">
<span>green(id) - should be green</span>
</div>
<div class="green">
<span>green(class) - should be green</span>
</div>
<div>
<span>no child div style - should still be red</span>
</div>
</div>
CSS:
#red span {
color: red;
}
.blue span {
color: blue;
}
.green, #green span {
color: green;
}
The priority of applying a CSS rule (without !important) is:
Number of IDs in the selector. If draw,
Number of attributes and classes. If draw,
names or pseudo-elements. If draw,
last declaration on the CSS file. This, of course, never draws.
Since #red span has an ID, and .green doesn't have any, #red span applies.
For further explanation of which CSS rule is apply first, check this nice article on smashing magazine
To work around, you can use a more specific rule. This way it gets tie on number one, but since it have extra classes, your rule wins due the number two.
Selector specificity dictates that id had priority over class. Even though the blue class is after red in the Cascade, red takes priority because of specificity. You can use the Selector #red .blue span if needed
the simplest and cleanest:
http://jsfiddle.net/f4ke2/7/
#red {
color: red;
}
.blue span {
color: blue;
}
.green, #green span {
color: green;
}
OR What if you do this? :)
#red > span {
color: red;
}
OR
#red .blue span {color: blue;}
OR
.blue span {
color: blue !important;
}
OR for "flexibility"
#red .blue span, .blue span, #someotherID .blue span {color: blue;}
OR something as horrid as this
var id = $("#red");
id.addClass(id.attr("id")).removeAttr("id");
If you are using style sheets (in a framework or otherwise) that assign properties to elements by class, i.e. using class selectors, you simply have to take this into account when writing other CSS rules. So this is a matter of disciplined coding (HTML and CSS), not about using some trick to get rid of normal CSS principles.
Basically, set properties only on those elements that you want to have affected, without using selectors with too wide coverage. Say, if you want to set the text inside some element red, set color: red on that element only, not on its descendants, unless you really want to override whatever settings they might have.
For example, if there is a style sheet with .foo { color: blue }, then this will affect any element in class foo, unless overridden by another rule, as per the CSS cascade. So if you don’t want it to be overridden in a situation like <div id=xxx>...<span class=foo>...</span>...</div>, you just can’t set #xxx span { color: red }, because then you would override the rule, by virtue of a more specific selector. Using #xxx { color: red } would be safe in this sense, since the span (having its color set) will not inherit its parent’s color.
Using !important as in .foo { color: blue !important } might seem to solve the problem, but !important makes style sheets difficult to manage and maintain. It also creates problems when you need a tool for overriding the effect of specificity but can’t, because you’ve already fired the weapon. The rule .foo { color: blue !important } is not effective against #xxx span { color: red !important }.
I want to give border-bottom to header.the border color should be same as its child font color.please find the html code and suggest me to proceed further.
<header>
<div class="cblt-panel">
<header>
<a href="HomePage;jsessionid=9Z1DRLtK8FfgmVDhysv4fk8LKjj1rTpSpJcS99dvcbffT4KTZ9tN!91184445">
<div class="header-wrapper header">
<h1 class="dealer-name">Airport Chevrolet Cadillac</h1>
</div>
</a>
</header>
</div>
</header>
in the above markup, i want to set the border-bottom-color for outer header tag same as the font color of child h1 tag. is it possible ?
I don't think you can achieve it through pure CSS. If you are able to use jQuery, it's quite simple:
var h1Color = $('.dealer-name').css('color');
$('header:eq(0)').css('border-bottom-color', h1Color);
Demo: http://jsfiddle.net/S9svs/
No, it is not possible: in CSS, parents never inherit from their children.
You can just make an element’s border color the same as its own content color (text color), namely by not setting the border color at all. But to use a color set on a child, you need JavaScript.
A better strategy is to combine the settings so that you simply set the color of a heading element and the color of an enclosing element to the same value. These settings need to be done in separate rules, though, e.g. header { border-color: #060; } h1 { color: #060; }.
If you surely want to do it dynamically then you have to use a css preprocessor language for it...
Like Less CSS
Here you make dynamically define the css and use it like you do in javascript...
For example,
#color:#000;
header { border-bottom-color:#color; }
header h1 { color:#color; }
The funny thing is that border-color, if not set, uses the color property to define it's color, so in some occasions you may be able to do the opposite. eg:
header {
color:red;
border-bottom: 2px solid;
}
header a,header h1 {
color:inherit;
}
DEMO: http://jsfiddle.net/brTTT/
In the demo, hover to see the color change by just changeing the header color property.