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.
Related
Say, I want to change the background color of all the content in a paragraph that does not have any text-decoration (like bold, underline, etc.). Is it possible to do it just using CSS with a some kind of syntax like this?
p[text-decoration=none] {
background-color: yellow;
}
A sample HTML content that this CSS should be applied will be something like this:
<p class="special">Yellow background <b>default background for paragraph</b> yellow
again <i>default</i> once again yellow.</p>
Requirements for the above to work:
Do not add style and/or class attributes to the paragraph contents, i.e., to <b>, <i>, etc.
Do not change the styles for <b>, <i>, etc.
Background-color should be specified for any content (HTML or CSS-style based) that does not have any text-decoration.
The parent of <p> may have a custom background-color, so elements like <b> or <i> should assume that color.
It is impossible to make the absolutely correct decision according to your requirements with the help of CSS. But you can apply a little trick, which is to use the CSS variables declared inside :root.
The principle is to use the same background color for the background of the main parent and the background of tags b and i. You need to declare a variable like this:
:root {
--backColor: yellowgreen;
}
Next, using function var(), assign the declared variable for rules background-color, body tags (parent), b and i:
background-color: var(--backColor);
In pseudo-class :is(), you need to specify tags (b and i) for which the background color of the variable will be assigned.
:root {
--backColor: yellowgreen;
}
body {
background-color: var(--backColor);
}
p {
background-color: yellow;
display: inline-block;
}
p * {
display: inherit;
}
p *:is(b, i) {
background-color: var(--backColor);
}
<p class="special">Yellow background <b>default background for paragraph</b> yellow again <i>default</i> once again yellow.</p>
Imagine that I've been creating a website for 2-3 weeks now and suddenly I decide that I don't like the default black color of all text elements which don't have any CSS applied to them and that I want to change their color to something like #333333 which is a less black black.
Is adding color: #333333; to the body tag the correct way to do it? Could that have any negative effects on other elements that I have custom styling?
CSS prioritises the code lower down, for example, this:
<style>
p {
color: blue;
}
p {
color: green;
}
</style>
<p>Hello</p>
Would result in the color of the paragraph element becoming green.
So to answer your question, anything above your CSS properties for body would be overridden.
Also, id and class attributes take priority over position, so if you wanted to give the elements that you don't want to get changed a class and keep it as black that would work also.
Hope it helped.
I don't think it'll have any negative affects on any elements, however i would just reference the tags specifically to be sure like
p, h1, h2, h3, h4, h5, h6 {
color: #333333
}
But like the comment, give it a try and see how it turns out.
This is enough, as it allows for the color to be 'passed down' through the cascade. Place this at the start of your stylesheet:
body {
color: #333;
}
Avoid using inline styles:
<body style="color: #333"> <!-- Don't to this -->
Inline styles have a different specificity than CSS selectors, and it's a whole chapter in itself. Plus, it's easier to separate concerns and have you layout separate from your stylesheets. And have everything grouped together within your styles.
The most simple way to do so is by CSS the following way:
* {
color: #333333;
}
Changing color in HTML with the style attribute is actually never the best practice.
I have defined this hover for div element
div.MyCSSClass:hover
{
background-color: purple;
}
This is my HTML source:
<div class="
<ul class="MyParentCSSClass">
<li>
<div>
<div>
<div class="MyCSSClass">
<!-- I want to remove CSS hover for this div element -->
I want to remove the hover when the div.MyCSSClass is a child of MyParentCSSClass, So I add this to remove the hover style in CSS:
.MyParentCSSClass div.MyCSSClass:hover
{
}
But it did not work. I still see the same hover style.
Is there a way to remove hover in CSS without me creating a new CSS class for my div tag? I want to keep the same name as I have other CSS property uses the 'MyCSSClass'.
Thanks for the suggestion. I tried
background-color: none !important;
But when I look into chrome, that CSS is being over-written by
.MyGrandParentClass div.MyCSSClass:hover
{
background-color: purple;
}
and the html source is
<div class="MyGrandParent">
<ul class="MyParentCSSClass">
<li>
<div>
<div>
<div class="MyCSSClass">
<!-- I want to remove CSS hover for this div element -->
My question is how my 'Remove hover' css rule is being over-written? I have put "!important" to my rule.
.MyParentCSSClass div.MyCSSClass:hover {
background-color: none;
}
This will overwrite the background color given by div.MyCSSClass:hover. if you are keeping MyParentCSSClass div.MyCSSClass:hover empty as MyParentCSSClass div.MyCSSClass:hover {}, it will not overwrite anything or doing nothing actually.
You need to re-write all the previously added styles to the hover event. In the case you specified, please do the following:
.MyParentCSSClass div.MyCSSClass:hover
{
background-color: none;
}
Background-color : none; is not w3c standard. It will work on some browser but according to w3c standard it's not right way.
So try to use background-color: transparent which will work good on all browsers and w3c can validate your code.
Have fun.
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;
}
Let's say I have the following:
<style>
.myLabel {
color: blue;
}
.myLabel:hover {
color:red;
}
</style>
<div>
<img src='myimage.png' />
<span class='myLabel'>Image Label</span>
</div>
Is it possible to replace the image (also via css) when they hover over the span? If so, how could I do that?
There don't seem to be any sibling selector for previous siblings.
W3 defined adjacent siblings and some browser support seems to be available for general siblings -- but, both are for following sibling(s).
So, I think you'll find it easier to accomplish with :hover set to the div.
And, I've never heard of CSS being capable of altering a src attribute. About the only way I can think that might work to alter an image via CSS is to have src a transparent image and alter background-image.
<style>
.myLabel img { background-image: url('...'); }
.myLabel span { color: blue; }
.myLabel:hover img { background-image: url('...'); }
.myLabel:hover span { color:red; }
</style>
<div class='myLabel'>
<img src='transparent.png' />
<span>Image Label</span>
</div>
An easier way to do this would be to remove the img element and make the image a background image on the span. Then you can control the background image in your two CSS rules:
.myLabel { color: blue; background-image:url(myimage.png) }
.myLabel:hover {color:red; background-image:url(myotherimage.png) }
Then you just need some CSS to position the background image, and probably to add enough padding for the background image to not overlap any text.
You could also put the image inside the span:
<div class='myLabel'>
<span>
<img src='transparent.png' />
Image Label
</span>
</div>
Then your css would be:
.myLabel span:hover img { ... }
FYI Only <a> tags work with :hover in IE6 (but it's old anyway)
No, you can not replace the value of the src-attribute in any way.
Jonathan Lanowski Said:
And, I've never heard of CSS being capable of altering a src attribute. About the only way I can think that might work to alter an image via CSS is to have src a transparent image and alter background-image.
Keep the meaning of the IMG-element in mind. It's supposed to show an image as content, not presentation. If you put a transparent .gif or whatever in the src-attribute, you also remove content from the page.
The same applies to using different CSS-hover-techniques to change the image, you still remove the content as long as you don't have an actual image in the src-attribute. Plus, you won't be able to change the image while hovering the span-element as long as your document is marked up the way it is.
So then, this is a typical Javascript-job.
one technique is to have a single image file have multiple images in it and you use css rules to change the offset within the file to show.
see: http://www.alistapart.com/articles/sprites/
specifically the "Hovers" section.
They offer a functional example here:
http://www.alistapart.com/d/sprites/ala-image3.html
EDIT: I just realized that you asked to make the image change then the hover over the span not the image itself. To do that, I believe you would need to use javascript.