I'm pretty new to using CSS, and have been working on some WordPress template projects. I feel like this is a very simple problem that I've run in to, but I can't find documentation or previous questions that answer it for me, my apologies if they are out there!
What I'm trying to do is format a <ul> and links within that list in a specific way. That <ul> comes from the "Pages" widget in WordPress, and lives in
<aside id="pages-2" class="widget widget_pages">
which is in
<div id="secondary" class="widget-area" role="complementary">
In my style sheet, I've added these lines:
.widget-area ul {
list-style-type: none;
}
.widget-area a {
color: black;
}
.widget-area a:visited {
color: red;
}
.widget-area a:hover,
.widget-area a:focus,
.widget-area a:active {
color: midnightblue;
}
However, the elements are still styled in the way the ul and a elements are styled without the specificity of the .widget-area. I have had success with these lines though:
.widget-area {
position: fixed;
max-width: 247px;
}
Any help is greatly appreciated!
The site is here: http://ccarrollmusic.com/
With CSS there are a few reasons this could be happening,
Your changes might be getting overwrote by a class or id style on the element having the !important attribute.
Your file could be loading before the Wordpress CSS file that is setting those styles in the first place
What I guess is most likely is there is a more specific rule which is taking over.
It's best to do something like:
#secondary .widget-area ul li a:hover,
#secondary .widget-area ul li a:focus,
#secondary .widget-area ul li a:active {
color: midnightblue;
}
You can successfully target the ul in the widget in question by using the id of the aside that is its' immediate parent:
aside#pages-2 ul li a {
color: pink;
}
I've actually been able to solve this by simply using .widget-area ul, however I moved it up in the style sheet so that it comes directly after I stle .widget-area and that seems to have done the trick. Earlier, there was mention of .page_item between .widget-area and .widget-area ul. Is there importance as to the order of style declarations and specificity? Because I didn't think that would be important I didn't include it in the original question, sorry about that!
Related
I am using a nav element to create a menu. I am also using JQM to format a listview. The CSS of the JQM overrides the nav style and I simply cannot understand why.
This is my nav element with link elements:
<nav>
<ul>
<li>New</li>
<li>Update</li>
</ul>
</nav>
And this is the CSS for the link elements inside the nav element:
nav > ul > li > a {
color: #aaa;
background-color:#333;
display: block;
line-height: 2em;
padding: 0.5em 0.5em;
text-decoration: none;
}
The color attribute is overridden by the JQM stylesheet (turning out blue). The specific overriding setting has been identified as:
.ui-page-theme-a a:visited, html .ui-bar-a a:visited, html .ui-body-a a:visited, html body .ui-group-theme-a a:visited {
color: #38c;
}
What I don't understand is why is it being overridden? The JQM style has some specific classes which I didn't specify in my nav element, so why am I losing the color settings? Why is the JQM style applied to my non-classed link/nav?
NB: I am complete noob when it comes to these things, so excuse my plain ignorance
The JQM styles are probably added by it's script. As soon as you initiate the element, it gets the classes assigned to it.
The reason that it overrules is because the selector is more specific. If you want to read more about specificity, follow this link.
If you want to overrule the JQM style, you have a few options
Quick and dirty
Use the !important rule, it overrules all other styles
nav > ul > li > a {
color: #aaa !important;
background-color:#333;
display: block;
line-height: 2em;
padding: 0.5em 0.5em;
text-decoration: none;
}
Latter rule
Use the same selector, but be sure that your stylesheet is loaded after the JQM stylesheet
.ui-page-theme-a a:visited,
html .ui-bar-a a:visited,
html .ui-body-a a:visited,
html body .ui-group-theme-a a:visited {
color: #aaa;
}
I am trying to highlight the active <a> however, my CSS is being overwritten.
#portfolio-filter li a {
color: black;
text-decoration: none;
padding:3px 8px 3px 8px;
background:#8d8d8d;
}
#portfolio-filter li:hover, a.filter.active {
background: white;
}
<ul id="portfolio-filter">
<li>
All
</li>
<li> etc... </li>
</ul>
The #portfolio-filter li a style is overwritting the #portfolio-filter li:hover, a.filter.active style and not sure what I need to do to fix this.
Link: http://velnikolic.com/ramova3/?page_id=25
The problem is that #portfolio-filter li a is more specific than a.filter.active. Since the background is on that a element, not the li element, your a background won't change even if #portfolio-filter li:hover is more specific.
To fix it, use something like #portfolio-filter li a.filter.active, which is more specific and will correctly take precedence.
As a general rule of thumb, when working with active classes, always use a similar selector as the original (non-active) definition. Otherwise, you may run into specificity issues like this one.
Here's a useful specificity calculator when in doubt.
The comma makes your "second" style two separate styles, remove the command and you should be fine.
ref: http://webdesign.about.com/od/cssselectors/f/comma-in-css-selectors.htm
Here was my solution.
portfolio-filter li a:hover, #portfolio-filter > li a.active{ background: white; }
I have a pretty noob problem, so I hope someone could help me out.
I have a Blogger blog, and I can't get the links to function like I want to.
I want the links in the post content and in the sidebar - the ones that are a purple shade (#8B7083) and underlined - to look the same for both a:link and a:visited. For some reason visited links turn black, even though I don't have that anywhere in my CSS.
Help me, please?
You do have it in your CSS:
.popular-posts .item-title a:link, a:hover, a:active, a:visited {
color: black !important;
text-decoration: none !important;
}
Try not to use the !important keyword, it overrides all other styles. Use specificity to determine what styles to apply where: http://css-tricks.com/specifics-on-css-specificity/
Looking at your selectors, I believe you might not be constructing them as you intend. Are you looking for this?
.popular-posts .item-title a:link, .popular-posts .item-title a:hover, .popular-posts .item-title a:active, .popular-posts .item-title a:visited
As it stands, your last three segments in your selector (a:hover, a:active, and a:visited) are selecting all links on those pages with those states as you are not constraining them via a descendent selector.
I want to apply a different hyper link style to the following two things:
Any links within <p> tags in my #currentpage_content div id.
Any links with <h3> tags with a .profile class.
It sounds pretty simple but i can't see to get it right..
I've tried things like:
#currentpage_content a:hover{...}
and
#currentpage_content p a:hover{...}
but for some reason that applied to my navigation bar links even though they're outside #currentpage_content's div!
I also eventually figured out you could do something like this ( i think)..
#currentpage_content a.p:hover{...}
but now the link style aren't being applied at all when they should be.
Could someone please look at the bullet points above and tell me the exact syntax/order of words i need to achieve those two bullet points?
To make response easier here's the style i'm trying to apply:
a:link, a:visited, a:hover, a:active
{
font: inherit;
color: Grey;
text-decoration: none;
border-bottom: 2px solid #d4ffaa;
}
a:hover, a:active
{background-color: #d4ffaa;}
#currentpage_content p a:hover, #currentpage_content h3 a:hover {
//put your CSS in here
}
Here is a fiddle with solution for your trouble.
I am trying to select the sub-menu item from a Wordpress default sidebar menu, and I am trying to write a CSS selector for that. I thought I understand CSS selectors, but I don't know what is happening in this case.
The following ones are working:
.widget_nav_menu ul .menu-item .sub-menu { background: red; }
.widget_nav_menu ul .menu-item li { background: red; }
While this one doesn't work:
.widget_nav_menu ul .menu-item li .sub-menu { background: red; }
Can someone explain to me why can I not specify things to be more precise with both specifying class and type here?
Luckily at this level of customization I don't need to select things more precisely (I only want to hide sub-menu items), but can someone tell me how to make the non-working example work?
Here is a live site, but it’s the same on all Wordpress installs with TwentyTen theme and a multi-level menu on the left.
UPDATE: I think I got a big misunderstanding about the usage of spaces in CSS, so I asked a question here: usage of spaces in CSS files
BTW, after understanding the answers and realising what was wrong with my problem, the correct answer for my problem is:
.widget_nav_menu li.menu-item ul.sub-menu
try:
.widget_nav_menu ul .menu-item .sub-menu li { background: red; }
because sub-menu class belongs to ul and there is no sub-menu class after li
I believe you want this:
.widget_nav_menu ul .menu-item li.sub-menu { background: red; }
Try this :
.widget_nav_menu ul .menu-item .sub-menu li { background: red; }
Because the li item is below the .sub-menu ul...