I'm having a bit of difficulty adding some CSS to a link. I'm using a CMS that automatically generates menus in an unordered list. However, where you're on a given page, it applies class="active" the the li and not to the link itself. This works fine for adding a background to the link, but I'm trying to change the link color.
<li class="active">
Link
</li>
I'm having difficulty coming up with the CSS to say "If a link is in an li with class="active" then make the link text color x."
How might I accomplish this?
Thanks!
the path is
li.active a { color: .... }
The MDC CSS Reference has good examples for the various types of selectors.
li.active a {color:whatever}
a
{
color: black;
}
a.active
{
color: green;
}
Try this:
.active a {color: red;}
Related
Good day, i'm having difficulties changing wordpress top navigation menu.
Here's the full css path :
Css image path
I have tried to apply this css code
.secondary-navigation .menu-top-menu-container .menu pp menu-item menu-item-type-post_type menu-item-object-page menu-item-73 {
color: blue;
}
But it has no effect :(
Can someone point out what am i doing wrong?
Try this code and let me know what is the result is. thanks.
.secondary-navigation .menu-top-menu-container .menu-item {
color: blue;
}
or
.secondary-navigation .menu-top-menu-container .menu-item a {
color: blue;
}
You can target directly it's first immediate parent and then the class itself, like this:
#menu-top-menu li {
color: blue;
}
So the issue you are having is you are
1) calling multiple classes on the same element incorrectly. in the html the classes need to be separated by a space but in the css this is not the case.
so these classes here =
pp menu-item menu-item-type-post_type menu-item-object-page menu-item-73
should be written as [in your CSS file] =
.pp.menu-item menu-item-type-post_type.menu-item-object-page.menu-item-73
[also you missed out the . in front of each class!]
2) HOWEVER, you do not need to include every class on the element to select it. All you really need is just a single class.
so you could use =
.secondary-navigation .menu-top-menu-container .menu-item {color: blue;}
which i believe someone else has already mentioned.
calling an html element by using mulitple elements can be useful if the circumstance is right [like needing to target some more specifically], but in your case you will be fine with the above!
I am trying to override my default CSS in my WordPress theme's settings, but am having a heckuva time doing so.
Here's what my top menu looks like:
And the same goes for the submenu links when hovering over the top links:
I'd like the links to be white ... obviously the blue doesn't show up well at all.
Here's what I get when I Firebug the "About" link:
And when I right click the Firebug and copy the HTML, here's what part of it looks like:
<ul class="menu" id="menu-mega-menu"><li class="menu-item menu-item-type-custom menu-item-
object-custom level0 has-sub" id="menu-item-3462"><a href="#"><i class="icon-thumbs-
up"></i>About<i class="icon-caret-down"></i></a>
<div class="sub-content" style="display: none;"><ul class="columns">
<li><ul class="list"><li class="header">The Basics</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page level2" id="menu-
item-155">Our Mission</li>
I've tried using #MashMenu, .menu-mega-menu, .mashmenu, and always do a color:#FFFFFF!important; but nothing ever gets rid of that blue. I don't know if I provided enough information here, but any help in guiding me in the right direction would be truly appreciated!
My blog is located at http://www.occupyhln.org
I'm not sure if the color is coming from the wordpress theme or from the user agent stylesheets, but the latter do tend to have higher specificity selectors for a that will prevent the simple a selector from working the way you want.
Inherited values are not related to selectors. You need to actually select the a to override other selectors for its property. For example:
.wordpress-theme a {
/* Selects <a> and sets the color
color: blue;
}
#MashMenu {
/* Selector has higher specificity but does not select <a> */
color: red;
}
#MashMenu a {
/* Selects `<a>` with higher specificity */
color: red;
}
I believe you need to apply the color override directly to the the <a> tag your are trying to effect. You probably have something more high-level that is dictating the color.
Consider this simple example:
HTML
<ul>
<li>
<a href='http://google.com'>Here is a link</a>
</li>
</ul>
CSS
li {
color: red;
}
li a {
color: green;
}
The original css is more specific and has the !important value on it. So fight fire with fire and do something like
.catalyst-widget-area a, .catalyst-widget-area a:visited,
.catalyst-widget-area a:hover {
color: #fff !important;
}
You can narrow the selector even more so you make sure it overrides it.
#mashmenu .catalyst-widget-area a, #mashmenu .catalyst-widget-area a:visited,
#mashmenu .catalyst-widget-area a:hover {
color: #fff !important;
}
And you can go on and on, making it more specific until it yields.
But here's something I've been wondering, how are you adding all these custom css files to a Wordpress theme? I say this, because there's is a right way, and many wrong ways to do it.
The right way is making a child theme of your current theme and work it from there. Child themes however, are not for entry-level modifications (though is way easier to override default styles from a child theme), in that case, there are plugins that help you override the css with your own custom css, one of the most popular is Jetpack.
In order to solve this issue in case anybody runs into a similar issue, I used the following:
.mashmenu .menu>li>a{color:#FFF !important;}
.mashmenu .columns .list a{color:#FFF !important;}
.mashmenu .menu .sub-channel li a{color:#FFF !important;}
.mashmenu .content-item .title a {color:#FFF !important;}
.mashmenu .page-item .title a {color:#FFF !important;}
.mashmenu .page-item a {color:#191970 !important;}
But when putting it at the bottom of my custom CSS, it didn't work; when I put it at the beginning of my custom CSS, it worked for some reason. I have no idea why this is the case, but this is what finally did the trick for me. Thank you for all who opined and helped me figure this out.
I'm trying to show the current page link in a different color. I've found other answers that will do this, but its still not working. I'm using a class of current_link on the respective links of each page. I also found an answer that said to apply the !important tag to the color rule but that didn't do anything. I'm thinking I have something small wrong or that I'm not aware of. Maybe some kind of ordering rule.
Here's the CSS rules relative to my links. As you can see I have .current_link at the top (I figured this would get rid of any ordering/over riding issues). The relative HTML naming will follow.
.current_link {
color: #00AD26;
}
#main_nav a:link, a:visited {
text-decoration:none;
color: #00A3E6;
}
#main_nav a:hover {
text-decoration: none;
color: #A8EDFF;
}
#main_nav a:active {
text-decoration: none;
color: #00B7FF;
}
a:link, a:visited {
text-decoration:none;
color: #00A3E6;
}
a:hover, a:active {
text-decoration: none;
color: #00B7FF;
}
Relative HTML from one of the pages.
<ul id="main_nav" class="grid_5 prefix_9">
<li id="home" class="current_link">Portfolio</li>
<li id="about">About</li>
<li id="contact">Contact</li>
</ul>
Your .current_link matches the <li>.
The <a> inside the <li> overrides the color it inherits from its parent element.
You need to apply the color to the <a> itself, either by moving the class or by changing the selector to select <a> elements inside the <li>.
Also, lower rules override earlier ones (if they have the same specificity).
Try this:
.current_link a {
color: #00AD26 !important;
}
You should use:
#main_nav li.current_link a {
color: #00AD26;
}
This will overrule the other selectors and avoids using !important.
some examples..
#jqt .back.active {
-webkit-border-image: url(img/back_button_clicked.png) 0 8 0 14;
}
Back
and
#jqt ul li a.active, #jqt ul li a.button {
background-color: #676c96;
color: #fff;
}
<ul class="individual">
<li>Cancel</li>
<li><a href="javascript:placeOrder()" >Place order now</a></li>
</ul>
when either of these are pushed the active state does not turn off. Any quirks why or a way to force the deactivation?
Thx
Slightly confusing question. a:active selects the link when it's in the active state; a.active is a class, presumably added and removed by javascript. You haven't posted your JS, so it's hard to say, but it sounds like either there's a bug in there, and it's not removing the active class properly from the elements, or, in your stylesheet you meant to use :active.
How about using JQuery, just use specified classes instead of the active state. A snippet of code ive used recently should give you some idea of how it works.
$("#tabMenu > li").click(function () {
$("#tabMenu > li").removeClass("selected");
$(this).addClass("selected");
});
I have a simple Css rule like so:
strong a:hover {
text-decoration: none;
}
This works for the following HTML:
<strong>
Go to website
</strong>
The problem is the Wysiwyg within the CMS i am using often puts the code in like so:
<strong>Go to website</strong>
My css rule then doesnt work. Is there are pure Css solution?
Thanks
Al
What you're trying to do isn't supported in CSS - you can't style the parent. A better approach here might be to add a class to the link:
Go to website
CSS:
a.ImportantLink { font-weight:bold; }
a.ImportantLink:hover { text-decoration: none; }
That way the link can easily be styled. <strong> may be semantically wrong if you use it just to style the link, and not to emphasize the text (though, that might be less important, to be honest)
Working Example: http://jsbin.com/ekuza5
This should work:
.hrefspan a:hover, strong {
text-decoration: none;}
<span class="hrefspan"><a>...</a></span>
By putting it in a span and applying the css only to the content of that span it will not affect other href's or strong's.
use
a:hover strong
{
text-decoration:none;
}
since you have define rule strong a:hover
indicates rules to be applied to the a tag which is present inside strong html tag
So the bit you actually want to change is the underling of the anchor
a:hover { text-decoration:none; }
If you want to have this only affect particular links on the page then apply classes to them.
<a class="notunderlined" href="http://www.stackoverflow.com"><strong>Foobar</strong></a>
a.notunderlined:hover { text-decoration:none; }