Okay this is the css code I put on the master page so it applies all the child page as well :
Master.css
a
{
color:Red;
}
a:hover
{
color:Blue;
}
and now on some pages I need to change color and hover color of the links like :
Some child pages
a
{
color:Gray;
}
a:hover
{
color:Maroon;
}
But the problem is it won't change the way I defined later. I used specific id and class approaches but they also don't work.
When I wanna change some specific element style, I use inline style attribute to do it but now :hover comes into play and I don't think I can declare it inline.
CSS chooses between conflicting specifications by how specific the declaration is.
You can increase the specificity by specifying classes, ids, or adding !important to the end of your css declaration. For example:
a:hover
{
color:Maroon;
}
will be overridden by
a.link:hover
{
color:Blue;
}
will be overridden by
#link1:hover
{
color:Red;
}
will be overridden by
a:hover
{
color:Green !important ;
}
I used specific id and class approaches but they also don't work.
Can you clarify?
Using specific selectors is the way to go. An example.
There I define common a look for the whole page.
a {
color:Red;
}
and custom style for specific areas where I want it to apply.
.new-look a {
color: Gray;
}
your HTML markup is equally important.
a { color:red; }
a:hover { color:blue; }
a.foo { color:green; }
a.foo:hover { color:black; }
red
green
will work, unless something else is at play.
or as the other post suggests ~
.foo a { color:red; }
#bar a:hover { color:blue; }
remember IDs take priority over classes.
Related
I could do something like:
#id1 .class1, #id2 .class1{
color:#FFF;
}
But that seem's bulky, especially if I have a ton of ID's I want to share with 1 class.
I'd much rather do something like:
#id1, #id2 .class1{
color:#FFF;
}
Obviously this doesn't work, but you get my drift.
Thoughts?
EDIT:
Probably should have mentioned I am over-riding CSS framework before I got flamed. Think bootstrap or zurb foundation. That's why there is a need to do this instead of just using a class. I was just wondering if there was any other inheritance selectors I wasn't aware of in native CSS.
You can use a language like LESS which compiles to CSS. Just one of it's many features is that the following LESS:
#id1, #id2 {
.class1 {
color: #fff;
}
}
Compiles to:
#id1 .class1,
#id2 .class1 {
color: #fff;
}
That compilation can be done server-side (lessphp or less.js) or client-side (less.js) depending on your preference/needs.
What about this?
.class1
{
color:#FFF;
}
You're overthinking it. The point of classes is to cover multiple items. all you need to say is:
.class1{
color:#FFF;
}
this only won't work directly in 2 cases.
you have the class appearing elsewhere. Find (or create) a unique element surrounding your classes, such as
ul .class1{
color:#FFF;
}
you have the class showing up on other types of elements. In this case:
li.class1{
color:#FFF;
}
I suggest doing some reading about CSS specificity.
http://css-tricks.com/specifics-on-css-specificity/
First try writing a specific enough selector that will override the CSS framework.
This may involve doing something like
html body .class-i-want-to-override { /* ... */ }
It may require putting an !important on there, although that should be your last resort.
.my-class { color: pink !important; }
Finally I would suggest looking into a CSS preprocessor like SASS. This would allow you to write in a more efficient manner.
#special1,
#special2,
#special3 {
.override {
color: pink;
}
}
Which would get compiled to:
#special1 .override, #special2 .override, #special3 .override {
color: pink;
}
Why not just use a class?
Or apply, in the elements with these ID's, a common class? As a element can have a ID and classes at the same time..
In the code below is a basic example:
#commonClass .class1{
color:#FFF;
}
I just saw this question Don't change link color when a link is clicked and now I'm stuck.
I have multiple links on my page, some of them with class="menuLink". Now only for those I want to set the colors different as a normal link. If I would just use
a:link { color:green}
a:hover { color:red }
...
this would apply to all links. But neither
.menuLink:link {color:green}
//I think because the css "doesn't know" that this class is used for links
nor
.menuLink a:link {color:green}
work. How can I achieve this?
You were close.
a.menuLink:link { color: green; }
Was what you intended to achieve. But try this:
a.menuLink { color: green; }
Would mean a a with a classname of menuLink, the :link is redundant.
.menuLink a:link
Would mean a inside of an element with a classname of menuLink.
Have you tried:
.menuLink {color: green;}
Suppose I have this HTML:
<div class="SomeClass">test</div>
<div class="SomeClass" id="SomeID">test</div>
<div class="SomeClass">test</div>
with this CSS
.SomeClass{color:blue;}
.SomeClass:hover{color:red}
I want the hover effect not to apply to the SomeID div. I can do this with jQuery but I was wondering if there's an easier way to do it with just CSS.
Thanks for your suggestions.
CSS is parsed in order, meaning that if after you define
.SomeClass:hover { color: red; }
You then define a rule
#SomeId.SomeClass:hover { color: blue; }
That should 'overwrite' the initial color: red;
Just assign another rule to the div with an id of SomeID. This will override the other rule.
.SomeClass{color:blue;}
.SomeClass:hover{color:red}
#SomeID:hover{color:blue}
jsFiddle example
Just overwrite the style:
#SomeID:hover {
color:blue;
}
Alternatively, you could use:
.SomeClass:not(#SomeID):hover {
color:red;
}
Then it is easier to change it, but less browser support.
Let's take a look at link pseudo-class specificity:
Remember: LAHV (:link, :active, :hover, :visited).
First, in order to cascade properly, let's assign the following to .SomeClass:
.SomeClass:link, .SomeClass:active, .SomeClass:visited { color: blue; }
.SomeClass:hover { color: red; }
Next, let's specify #SomeID:
#SomeID:hover { color: blue; }
id always takes precedence over class.
I have this problem in css where i have two different states in css for example
#koolbutton .active {
color: #fff
}
#koolbutton{
color: #ccc //not active
}
When i try this html
<button id ="koolbutton" class="active">
It gives me the the normal grey koolbutton not the active one which is white! thanks
You need to omit the space between #koolbutton and .active.
#koolbutton { /*not active*/ }
#koolbutton.active { /*active*/ }
The issue is with your first selector:
#koolbutton .active
Since there is a space between the id and class selector, this applies to every element with a class of active and an ancestor with an id of koolbutton. What you want is to select every element with a class of active and an id of koolbutton:
#koolbutton.active
Although the order of your selectors doesn't matter due to CSS Specificity rules, in terms of creating more maintainable CSS I would recommend you put the default styles first, followed by any variations to that style:
#koolbutton { /* default styles */ }
#koolbutton.active { /* .active styles */ }
#koolbutton.foo { /* Another class styles */ }
If you are really wanting to style active/focus states, you should probably look at the :focus and :active pseudo selectors.
You may try this one also;
#koolbutton:active {
color: #fff; //when user click the button
}
#koolbutton{
color: #ccc; //normal display of button
}
Here is the working Live Demo.
I have the following HTML:
<div class="menu">
<a class="main-nav-item" href="home">home</a>
<a class="main-nav-item-current" href="business">business</a>
<a class="main-nav-item" href="about-me">about me</a>
</div>
In CSS, I want to set the a:hover for these menu items to a particular color. So I write:
.menu a:hover
{
color:#DDD;
}
But, I want to set this a:hover color only for those <a> tags with the class main-nav-item and not the main-nav-item-current, because it has a different color and shouldn't change on hover. All <a> tags within the menu div should change color on hover except the one with the current class.
How can I do it using CSS?
I tried something like
.menu a:hover .main-nav-item
{
color:#DDD;
}
thinking that only ones with main-nav-item class will change color on hover, and not the current one. But it is not working.
Try this:
.menu a.main-nav-item:hover { }
In order to understand how this works it is important to read this the way the browser does. The a defines the element, the .main-nav-item qualifies the element to only those which have that class, and finally the psuedo-class :hover is applied to the qualified expression that comes before.
Basically it boils down to this:
Apply this hover rule to all anchor elements with the class main-nav-item that are a descendant child of any element with the class menu.
Cascading is biting you. Try this:
.menu > .main-nav-item:hover
{
color:#DDD;
}
This code says to grab all the links that have a class of main-nav-item AND are children of the class menu, and apply the color #DDD when they are hovered.
Set a:hover based on class you can simply try:
a.main-nav-item:hover { }
how about
.main-nav-item:hover
this keeps the specificity low
try this
.div
{
text-decoration:none;
font-size:16;
display:block;
padding:14px;
}
.div a:hover
{
background-color:#080808;
color:white;
}
lets say we have a anchor tag used in our code and class"div" is called in the main program. the a:hover will do the thing, it will give a vampire black color to the background and white color to the text when the mouse is moved over it that's what hover means.
I found if you add a !important, it works when previously it didn't.
a.main-nav-item:link {
color: blue !important;
}
a.main-nav-item:visited {
color: red !important;
}
a.main-nav-item:hover {
color: purple !important;
}
a.main-nav-item:focus {
color: green !important;
}
a.main-nav-item:active {
color: green !important;
}
Also, I've read somewhere that the order is important. The mnemonic "LoVe HaTe" helps you remember it: link -> visited -> hover -> active
One common error is leaving a space before the class names. Even if this was the correct syntax:
.menu a:hover .main-nav-item
it never would have worked.
Therefore, you would not write
.menu a .main-nav-item:hover
it would be
.menu a.main-nav-item:hover