I'm working in WordPress and I have one part of the site colored and styled like normally but there is a secondary part of the site that is colored in darker styles. I have been able to separate the two's CSS mostly with the use of classes and !important. I am having a spot of trouble in the menu area.
In the majority of the site I have the following when hovering over the menu:
.header-menu li:hover, a:hover {
background-color: #b89230 !important;
color:#fff4d6;
text-decoration: none !important;
And on what part of the site I have:
.page-template-cryptofact-page-php .header-menu li:hover, a:hover {
background-color: #836F38;
}
As it is written above, the .page-template css is taking on the background color hover of the rest of the site. If I !important the css of the page-template, then the rest of the site takes the coloring effect instead, regardless of its own !important style.
I've tried removing !important postscript from both, swapping either one, and adding it to both and I still cannot get them to act on their own. I was hoping that designating .page-template-cryptofact-page-php would be enough, since it seems enough for all the rest of the styling.
When I open to inspect the element in source, all of either .header-menu or .page-template-etc is grayed out leaving the a:hover as the instigator on either problem.
I'm fairly new to the nuances of CSS, so if someone could explain why this is happening I would greatly appreciate it.
I would post the site but it is insecure so it would not be a good idea. I can post screenshots or any other information you need.
Here I have placed a couple images:
I'm making a bit of an assumption here as to what your problem is, because I'm not 100% sure what you've got going on, but I believe you are mis-using the , in your selectors.
The comma breaks up totally distinct selectors, so if you want to style certain elements under a certain class, you would need to include that class on both sides of the comma, so you should end up with something like this:
.header-menu li:hover, .header-menu a:hover {
background-color: #b89230;
color:#fff4d6;
text-decoration: none;
}
.page-template-cryptofact-page-php .header-menu li:hover,
.page-template-cryptofact-page-php .header-menu a:hover {
background-color: #836F38;
}
Removing the !importants is probably a good idea... they usually make things more difficult to maintain.
So, I am using Squarespace to build a website, and for whatever reason, squarespace uses radio buttons for their nav (at least secondary nav) instead of list items.
I am trying to make edits to the menu so that when you click on a menu item, it is essentially "checked" (since they use radio buttons) and then applies the CSS styling I would like.
I am, however, having some difficulty getting the menu items to retain their styling.
By using attribute selectors, I can select the menu items; however, I am having trouble selecting them to display only in the :checked state.
The reason I am having to use attribute selectors is because the class name that begins with "menu-select", has a string of numbers behind it that actually changes with every reload. So, every time I make any particular changes to the code to the full, numeric class name, upon the next reload, the changes do not stay because the class name (or numbers because that's what they are) has changed.
My question: Is there a way to use attribute selectors and then target pseudo elements?
I want to make changes to my CSS only in the :checked state.
Right now my code looks like this:
.menu-block .menu-selector label[class^="menu-select"] {
text-decoration: none !important;
border-bottom: 4px solid black;
}
But this is really what I want it to do:
.menu-block .menu-selector label[class^="menu-select"]:checked {
text-decoration: none !important;
border-bottom: 4px solid black;
}
Thanks so much!
I am trying to use .less to modify a Joomla Gantry template. The text I'm trying to change with the "aa" class has linked audio, so the whole text shows up in blue color, which I am trying to change to dark brown. Here what I'm working with in my .less file:
.aa {
cursor: url(/images/listen.cur), progress !important;
color: #2E1507;
}
It's very simple, but I couldn't make the cursor change before without "progress !important", which doesn't make sense to me.
Now I am trying to change the color, but I can't find a way. Is there something important that I'm missing in trying to change these styles?
I think #seven-phases-max provide you the right answer in the first place. !important in LESS has the same meaning as in CSS. You will use !important to overrule the CSS specificity rules. In most cases it is not a good idea to use !important, try to find the a selector with a higher specificity instead. Read also: http://css-tricks.com/when-using-important-is-the-right-choice/. One reason to use !important mentioned here will be utility classes. Maybe this is why you choose to use it here too.
progress sets your cursor type, see http://www.w3schools.com/cssref/pr_class_cursor.asp. Cause you already use a url() for this, progress should not have any effect (auto is the default style).
Note if you need !important to set your cursor, you probably also will need it to set your color: color: #2E1507 !important;
When using a mixin in LESS you can set the !important; for all your properties once like:
.importantaudio(){
cursor: url(/images/listen.cur), progress;
color: #2E1507;
}
.aa{ .importantaudio() !important;}
CSS (result):
.aa {
cursor: url(/images/listen.cur), progress !important;
color: #2E1507 !important;
}
Is there a way to reset visited and unvisited link colours to the browser default after they have been changed?
In my specific situation, I have a main style file containing:
a:link { color: black; }
a:visited { color: black; }
And I would like to have a few specific links rendered with the default colours.
EDIT: Here is a jsFiddle to play with. I would like a style for the default class that makes it match the browser default.
Edit:
Another way is avoiding the problem from the beginning. Give the special links you want to be with the default style a special class (let's call it .default), and instead of:
a:link { color: black; }
a:visited { color: black; }
Use the not pseudo class and write:
a:not(.default):link { color: black; }
a:not(.default):visited { color: black; }
Notice that this pseudo class doesn't work on IE 8 and lower. For them you can use a special CSS (I don't like it, but it'll work).
It is different for each browser.
What you would have to do is get a stylesheet from the browser you are trying to reset (Gecko, WebKit, or Trident) and make that the new default.
Source: Browsers' default CSS for HTML elements
What you're looking for is revert keyword, but it's not yet implemented in most browsers, currently only Safari supports it. The links to track the development per browser are listed in the Browser compatibility section on MDN.
Some day this should work everywhere:
a { color: red; }
a.reverted { color: revert; }
red <a class="reverted" href="#">default</a> red
But for now think about a workaround. The feature is just not there yet.
If that is the only css controlling your a tags then just remove those and that will take off any styling. You could also just change the color?? Like so...
a:link {color: blue;}
a:visited {color: purple;}
Nowadays we can do something like this:
<head>
<style>
:link { color: black; }
:visited { color: black; }
.default-color :link { color: LinkText; }
.default-color :visited { color: VisitedText; }
</style></head>
<body>
<a href='#'>link</a>,
<span class='default-color'>
<a href='#'>link</a></span></body>
The second link renders with default colours.
See: CSS Color Module ยง System Colors
You can only fiddle with the URL. Browsers record the URLs they've visited. If they're rendering a page, and a particular URL appears in that list, then url is colored as "visited".
You can't force a browser to treat a URL as visited, unless they've actually been there. But you CAN make a visited URL appear as "new" by adding something different to the url, so that it APPEARS new to the browser. e.g.
example.com/foo.php
example.com/foo.php?random=value
both point at the same script, but the browser will treat both as "different". If that random value changes each time, the the browser will effectively think each time it's a brand new url and color it as "new".
I guess one question to ask here is: why? Why would you want to do that in the first place? To my knowledge, there's no W3C standard delineating what default link colors should be, anyways. A value (such as default) for color wouldn't make sense at all, seeing as that the isn't a default value.
With that being said, the most logical way to go about this would to just style things yourself. I'm not sure what situation your in, but whatever the case is, I'm pretty sure you're doing something wrong if you're asking how to restore colors to the browser default. So, before I give you a rather dry solution, I'll ask: can you give us some context? In the case that you're making something like menu bar links and you don't want the same styling for those menu bar links to leak into your normal links, you should really be using some kind of container to select those links in.
Anyways, here comes that dry solution. Most browsers use blue for links, purple for visited links, and red for active links. So, something like the following would work for browsers that go by these colors (assuming that the user hasn't modified the browsers' styling sheet, in which case you may want to learn about that or use something like initial, examined in Itay's answer).
a:link, a { color: blue; }
a:visited { color: purple; }
a:active { color: red; }
enter code herea.class{
color:inherit;
}
Specifies that the color should be inherited from the parent element.
so if your body was color:blue; then followed by a.class{color:inherit} then those examples would be blue. at the same time, you could just use a.class:link{color:blue}. and another for when you visit the link.
Your best with just customizing classes of links of special interest and leaving the rest by default.
No, you cannot set any CSS property to the browser default if it has been changed (i.e., if there is any style sheet being applied that assigns a value to the property. This follows from basic principles of CSS.
So consider asking a different question. There are ways to limit the effect of CSS rules to specific elements, instead of e.g. preventing all links from looking like links.
Just style the ones you want to style by setting a class on them.
.class:link{}
.class:visited{}
Then leave the others default.
You can use this:
a {
color: inherit;
}
That will inherit, and as there is no other link color so the browser will give the link its own style!
Is there a way to make an entire CSS Style sheet take precedence over another? I know you can do the !important but can I do that with one line rather than modify all thousand properties on the sheet?
Thanks!
Make sure the stylesheet you want is called last (or a specific style you want is called last). For example, using this:
span { color: red; }
span { color: blue; }
...will turn all text in <span>'s blue. Take a look here.
Rules with identical specificity that come later will overrule previous ones, so if both style sheets contain the identical selectors, you should be able to do this by just loading the one before the other.
If they contain different selectors, like
#navigation h3 { color: red }
and
.mainpage .navmenu h3 { color: blue }
you are likely to get specificity conflicts. The only blanket solution for that is indeed !important (although that is really, really terrible architecturally. Are you sure you need this? Maybe explain why, it's possible somebody is able to come up with a better solution.)
There is, however, no single-line directive to elevate the "importance" of one style sheet over the other.