I have menu like that
<ul id="menu">
<li>
Home
</li>
<li class="menu-selected">
Results
</li>
</ul>
I want to make menu item selected after it was clicked. I set li class "menu-selected"
But no luck.
.menu-selected ul#menu li a //also i was trying to say a:link but no luck
{
background-color: #91c05e !important;
text-decoration: none !important;
color: #fff !important;
}
Any ideas?
ul#menu li.menu-selected a
is what you want to do
I'm pretty sure you want
ul li.menu-selected a
instead, since that applies to all links inside <li> elements with class menu-selected.
do:
ul#menu li.menu-selected a
From left to right it's parent -> child element
You probably only need .menu-selected a
Related
In my css file I have
.myclass > ul > li > a {
display:inline;
list-style-type:none;
}
both this style properties display and list-style-type are not working within "a" tag. However they are working if placed within "li" which does not serve the purpose because I want links which are aligned horizontally. Please advise what can be done.
<div class="myclass">
<ul>
<li>About Us </li>
<li>About Us </li>
<li>About Us </li>
</ul>
</div>
It looks like you're targeting the wrong elements here - essentially <a> has a list-style-type of none and is inline already anyway, so you're not seeing anything happen. list-style-type is something that will affect the <li> rather than the <a>:
.myclass > ul > li {
display: inline;
list-style-type: none;
}
To help make this a little clearer, you could also try adding a property that would have a visible impact on your <a> elements, like color:
.myclass > ul > li > a {
display:inline;
list-style-type:none;
color: hotpink;
}
Then you'll see that your selector was working - it just wasn't having any impact.
Im trying to do something similar to this: CSS Menu - Keep parent hovered while focus on submenu
im using !important to override bootstrap colors
it works for the parent but i dont want the child li>a to be effected
.hover-li:hover a{
color: blue !important;
}
.hover-li ul li {
color: white !important;
}
the structure is like this:
<li class = "hover-li">
<a></a>
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</li>
Try this
.hover-li:hover > a {
color: blue !important;
}
it only affects direct children
How can I style only the top level li's from this example list?
<ul class='upper'>
<li class="first">dog</li>
<li>cat</li>
<li>bird</li>
<li>mouse</li>
<li>
<ul class="lower">
<li>chow</li>
<li>nibz</li>
<li>seed</li>
<li>cheese</li>
</ul>
</li>
ul.upper > li {
color:red;
}
This styles all li's which I understand because the recursive UL is inside a first level list item. Is there a simple way to style only the top level li's though? Maybe using ":not" in some way?
Edit: I realize you can overwrite the style below it using color:initial or by adding another color(and other ways) but I was wondering if there was a way to ONLY select the top level li's nicely so another style isn't needed.
So, your li are inheriting color from their ancestors, so you need to add color:initial, or color:black to override that
ul.upper > li {
color: red;
}
li {
color: initial;
}
<ul class='upper'>
<li class="first">dog</li>
<li>cat</li>
<li>bird</li>
<li>mouse</li>
<li>
<ul class="lower">
<li>chow</li>
<li>nibz</li>
<li>seed</li>
<li>cheese</li>
</ul>
</li>
You want the child combinator, ">"
.upper > li
You can define the deeply nested UL's list-items like this:
ul > li {
color:red;
}
ul ul > li {
color: #000;
}
So this can work throughout your page to identify any top-level list-items versus second-level list-items, regardless of class name. "ul ul" in CSS means "ul that is inside another ul"
Working example: https://jsfiddle.net/2Lyvp2bm/2
(I'm new, how do I add a code snippet to my answer?)
So I'm working with the standard wordpress navigation and I need to change the background of each menu item when the link inside the list item is active.
.current-menu-item does the trick for all list items but the problem then is that I have the same styling for each element.
For instance:
<nav>
<div>
<ul>
<li>
home
</li>
<li>
portfolio
</li>
</ul>
</div>
</nav>
Does anyone have experience with this?
I tried using pages like: http://codex.wordpress.org/Function_Reference/wp_nav_menu
But without any result unfortunately..
Also using child selectors didn't work..
It sounds like you want different active states for each individual link. .current-menu-item captures the active link, but doesn't offer customization for each individual link.
I think you can use a combination of nth-child and .current-menu-item. Do you know where .current-menu-item gets applied? If it's on the <li>, this should work:
nav li:nth-child(1).current-menu-item {
background-color: red;
}
nav li:nth-child(2).current-menu-item {
background-color: blue;
}
nav li:nth-child(3).current-menu-item {
background-color: green;
}
See it in a fiddle: http://jsfiddle.net/Dz32R/
Whats the difference of use CSS like this:
.mainHeader nav ul li {.....
compared with just this:
.mainHeader li {.....
It works fine with just the latter alternative. Since I don't have any other nav or ul in the mainHeader, I guess it's ok to just use the latter one?
What if you have HTML like this?
<div class="mainHeader">
<nav>
<ul>
<li>Menu item</li>
<li>Menu item
<ul><li>With submenu</li></ul>
</li>
</ul>
</nav>
</div>
Now, if you wanted to only style a "Menu item" and submenu items separately, the only way to do so specifically is with the following selectors:
.mainHeader nav>ul>li { /* menu item */ }
.mainHeader li>ul>li { /* submenu item */ }
Using the > combinator is important here, to ensure you are styling the right element. .mainHeader li alone will not do.
As long as you will never include any other matching elements, it's okay (where okay means "it will work"). A good approach is to add a class to your ul and select it that way:
ul.my-menu li {
/* CSS styles */
}
And - by the way - I guess mainHeader is not the tag name. If it is an identifier, you must use #mainHeader and .mainHeader if it is a class. (You changed it)
<div id="mainHeader">
<ul><li>facebook</li><li>twiiter</li></ul>
<div id="nav">
<ul><li>Home</li><li>About</li><li>Information</li><li>Contact</li></ul>
</div>
</div>
So #mainHeader li{....} will do all li in div
and #mainHeader nav ul li {....} will overwrite for the nav bar
Adding a class to each ul or adding > will make the code stronger when it is edited in future like suggested above.
The difference is only one thing, you can list any type of element next to .mainHeader for example, #mainHeader a p code div nav span ul li. This will give all of these elements with an ID of mainHeader the CSS you place in the { } for that element.
I'll give you an example.
HTML:
<div class="mainHeader">This text is black because "mainHeader".</div>
<a class="mainHeader" href="#">This text is black because "mainHeader".</a>
<p class="mainHeader">This text is black because "mainHeader".</p>
<nav class="mainHeader">This text is black because "mainHeader".</nav>
<span class="mainHeader">This text is black because "mainHeader".</span>
CSS:
.mainHeader div a p nav span {
color: #000;
}
Update(1): Please understand that doing this is recommended if you are going to give multiple elements the same aspect for a specific thing. An example of this usage, say you want div a p to have the same color, you would achieve this by div a p { color: #000; /* color your wanted */ }