I am using this CSS code:
<style type="text/css">
#TicketUpdateLeft {
border:1px solid black;
colour:#999999;
}
#TicketUpdateLeft .Customer {
background-colour:#000000;
}
</style>
and this HTML:
<div id="TicketUpdateLeft" class="Customer">test</div>
but the background colour is not showing as #000000 but the border and text colour works fine
It's color not colour.
Ex: background-color:#000000; and color:#999999;
And based on your code, you do want to use #TicketUpdateLeft.Customer (no space between them).
jsFiddle example
You shouldn't have a space between #TicketUpdateLeft .Customer so it should be
#TicketUpdateLeft.Customer
If you are having a space between the id and the class then the meaning of the selector changes, it will look for an element having a class called .Customer which is nested inside an element having an id of #TicketUpdateLeft
Also you have spelled color in the wrong way, it's color and not colour
Demo
Also, you won't need a selector like #TicketUpdateLeft.Customer because ID's are unique in the document, so over specifying isn't required, but if you are using the same id with different class in some another document, than your selector makes sense.
It needs to be
#TicketUpdateLeft.Customer
instead of
#TicketUpdateLeft .Customer
The way you have it, the CSS is targeting a child element of #TicketUpdateLeft with the class Customer
And colour should be just color
Related
I was wondering if there is way to do this.
I want to change only a single property of a specific CSS class, without having it to copy it again and assigning a different class name.
So, if I have this class
<div class="example">I am a red font with properties </div>
It's CSS
.example {
font-size:2em;
font-color:red;
padding:2%;
display:inline;
//other several properties }
Now, I want to use the example class in my other div, but I JUST want the font to be green. I don't want to copy the same property and just assign a different class name,
<div class="example2">I am a green font with properties </div>
Again the example2 will be the same as example, but only the font color will change
It's CSS
.example2 {
font-size:2em;
font-color:green;
padding:2%;
display:inline;
//other several properties same as example class
Is there a way to import the CSS property without having it to copy it and rename it? Something like
<div class="example" onlychange="font-color:green">
I am a green font with properties </div>
Any techniques to achieve something like the onlychange attribute?
Here are two ways. First is add another class and change that one property alone, the second class property will replace the previous class property if its present in both.
Second approach will be to just write it as an inline style. No need for the extra class!
.example {
font-size: 2em;
color: red;
padding: 2%;
display: inline;
}
.green {
color: green;
}
<span class="example green">test</span>
<span class="example" style="color:green;">test</span>
If you are sure that placement of DIV elements will remain same, then, you can try nth-child property.
e.g. https://www.w3schools.com/cssref/sel_nth-child.asp
<div class="example2">I am a red font with properties </div>
<div class="example2">I am a green font with properties </div>
<div class="example2">I am a red font with properties </div>
Your style for that specific "example2" should be :
<style>
div.example2:nth-child(2){background-color:green;}
</style>
Example is with 'background color', you can set 'color' property as well.
I'm using a small piece of inline HTML code to change the background of a cell color in a table on mouse hover. I use this on specific table cells only, so not all cells need this to happen.
<td bgcolor="#000000" onmouseover="this.bgColor='white'" onmouseout="this.bgColor='black'" >
This works nicely, but I would also like to change the font color.
So that it by default is a black cell with white text
But on mouseover the bgcolor is white and the text is black, how should I do that ?
It would be great if you use :hover pseudo class over the onmouseover event
td:hover
{
background-color:white
}
and for the default styling just use
td
{
background-color:black
}
As you want to use these styling not over all the td elements then you need to specify the class to those elements and add styling to that class like this
.customTD
{
background-color:black
}
.customTD:hover
{
background-color:white;
}
You can also use :nth-child selector to select the td elements
Either do it with CSS like the other answers did or change the text style color directly via the onMouseOver and onMouseOut event:
onmouseover="this.bgColor='white'; this.style.color='black'"
onmouseout="this.bgColor='black'; this.style.color='white'"
You'd better use CSS for this:
td{
background-color:black;
color:white;
}
td:hover{
background-color:white;
color:black;
}
If you want to use these styles for only a specific set of elements, you should give your td a class (or an ID, if it's the only element which'll have that style).
Example :
HTML
<td class="whiteHover"></td>
CSS
.whiteHover{
/* Same style as above */
}
Here's a reference on MDN for :hover pseudo class.
td:hover{
background-color:red;
color:white;
}
I think this is what are you looking for.
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.
Hello,
I have seen a strange behavior while using CSS HTML selector and class selector.
in HTML file I have this code:
<div class="content">
<h1>Registration Form</h1>
</div>
And in Css file I have:
.content
{
margin:auto;
width:600px;
border:solid 1px black;
background-color:White;
padding:10px;
}
h1
{
color:Gray;
font-size:18px;
border-bottom:solid 1px orange;
}
Above code works perfectly.
When I changed h1 HTML selector to Class selector by writing .h and h1 class="h" STILL it worked perfect.
BUT
when I changed .content class selector to div (ie I converted class selector of div tag to DIV HTML selector ITSELF) then the output changed.
It did not show me the text Registration form at all and showed horizontal lines above and below the area where Registration form text would be present.
why is this strange behavior?
Does it proves that class selector and HTML selector behave differently even if applied with SAME style rule effect?
A class selector is more specific than a type selector.
When you change the type selector to a class selector, the first selector still has precedence, just because it comes first.
When you change the first class selector to a type selector, the second selector becomes more specific, and takes precedence.
I am trying to style a menu, and am having troubles styling the "a tag" inside of the html table.
My default a tag styles are:
a:link { color : #69bfc8; text-decoration : none;}
a:visited {color : #69bfc8; text-decoration : none;}
a:hover {color : #606060; text-decoration : none;}
And the styles for the menu are:
td.menu {font-size: 9pt; width:150px; height:7px; border-bottom: 1px solid #e0e0e0;}
td.menu:hover {background: #69bfc8; color: #FFFFFF; }
td.menu div {padding: 3px;}
The problem Im having is the color attribute isnt applied to "a tags" within the td element upon the hover event. It seems to remain compliant with the default styles. Now I know for sure, that this is more of lacking of my knowledge of CSS, so I dont mean to seem ignorant if I am missing some crucial principle. I just wasnt sure how to ask google this question.
So my question is, what am I missing, how do I style "a tags" within the td element, upon hover of the td element??
Any help is appreciated, thanks, Lea.
The anchor tags don't inherit text-specific styles, so you need to set them implicitly:
td.menu:hover a { color: #FFFFFF; }
Just remember that IE6 won't fire the td:hover, so it might be better to change your code around a bit, so the anchor tag itself covers the whole space of the td, and then do:
td.menu a:hover { background: #69bfc8; color: #FFFFFF; }
You can use the following CSS to control the look of an a tag within a td tag:
td a { color : #69bfc8; text-decoration : none;}
The styles that apply to the td elements apply to the td elements.
The styles that apply to the a elements apply to the a elements.
Since the a elements are inside the td elements they inherit various properties from the td elements unless some other piece of CSS sets them to something else. Normally, the default stylesheet built into the browser would apply various properties. In this case the author stylesheet does.
If you want to have different rules for a elements in a td element then you need to write your rules with a descendant selector. You might also want to group the rules if you want multiple selectors to apply to one rule-set.
a { }
td,
td a { }
just a sample:
td a:hover {color : #606060; text-decoration : none;}
The problem Im having is the color attribute isnt applied
When you have several mutually contradictory rules which apply to an element, something called "CSS specificity" defines which rule is applied.
I just wasnt sure how to ask google this question.
A lot of the CSS behaviour is defined in just one place, i.e. in the CSS specifications document.
Each item should, with a display: block and a height and width set at 100%.
a {display:block; width:100%; height;100%; }