We're using a bootstrap page that we found for a menu that's displayed at the left. Then I added a menu at the top. The page basically looks like this.
The issue is that the following CSS that's supposed to affect the top menu is also affecting the menu at the left:
nav > ul > li:hover {
background-color: rgb(0,168,224);
}
This CSS is in a file menu.css that's supposed to be used exclusively by the top menu, but when I change the color, it changed both the top and left menu. It also occurs with other properties.
I tried adding !important; but that didn't do much.
I'm familiar with basic CSS, but this seems a little more complex.
What can I do so that any changes to hover (and any other properties) will only affect the top menu?
You have to write your css a bit more specific in order to style to top navigation.
For example, you can add an id to the top menu:
<nav id="topmenu">
<ul>
<li>item 1</li>
<li>item 2</li>
....
<ul>
</nav>
Your css should be this:
nav#topmenu > ul > li:hover {
background-color: rgb(0,168,224);
}
you should add class to tags which you want to affect and style by class names instead of tags.
Even if you have multiple stylesheets they can override one another if using the same names/elements. So instead of using
nav > ul > li:hover
You should make a class or id for your menus (optionally in menu.css)
So this could be for the upper menu:
.upperMenuLi:hover{
background-color: Yellow;
}
and for your side menu you could do the same, but with a different name, like;
.sideMenuLi:hover{
background-color: Grey;
}
The above code causes the top menu to have a yellow bg on hover, and the side menu to have a grey background on over.
so keep in mind:
By using nav > ul > li:hover that style will be applied to ALL elements following that order.
You want to limit the scope of you rules. nav > ul > li:hover selects a hovered li item that is a direct child of a ul which in it's case is a direct child of a nav element. The "problem" is this hierarchy is very common and might (and does) clash with other structures.
You have to create a selector which is uniqe. The easiest way, and IMO the most elegant way is to declare descriptive classes for this and select based on those.
For instance:
.navigation {
}
.navigation__list,
.navigation__list-item {
list-style: none;
margin: 0;
}
.navigation__list {
display: flex;
justify-content: spece-between;
padding: 0;
}
.navigation__list-item {
padding: 0 10px;
transition: all 0.3s;
}
.navigation__list-item:hover {
background-color: rgb(0,168,224);
}
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__list-item">Home
<li class="navigation__list-item navigation__list-item--active">About
</ul>
</nav>
Related
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?)
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 */ }
I am working with a nested menu and have the same class appear on two levels of the tree, but I need to format said differently in the lower level. Any ideas how I can do this? I've searched for some time and tried many different solutions to no avail. Here's my HTML and most recent attempt:
<ul class="topnav">
<li><h3 class="toggle_action"> Meetings</h3>
<ul class="div_toggle">
<li><h3>Home</h3></li>
<li><h3 class="toggle_action"> Attend</h3> // <-- same div as line 2 but needs different formatting
<ul class="div_toggle"> etc...
and attempted CSS fix:
.toggle_action { /// the top-level format for the div with blue text
color:#5376c5;
}
ul.topnav ul li { /// the general <ul> formatting for the secondary level
color: #999;
}
.toggle_action ul ul li { /// my attempt to make the div appear in gray on second level
color:#999;
}
any tips would be greatly appreciated!
Your last CSS style never exists in the HTML; the <h3 class="toggle_action"> has no children.
I think you meant this:
.toggle_action {
color:#5376c5;
}
ul.topnav ul li {
color: #999;
}
ul ul li .toggle_action {
color: #999;
}
Html markup
<ul>
<li> parent
<ul><li> child </li></ul>
</li>
</ul>
What I wanna do is to apply background only to parent li's.
ul li a{
background:url(images/nav/divider.jpg) right bottom no-repeat;
}
This style applies to all li-s, not only parent.
How can I apply css rule only to parent li-s?
Guessing from your unusual HTML:
ul li.parent a {
background:url(images/nav/divider.jpg) right bottom no-repeat;
display:block;
width:50px;
height:15px;
}
Add your own value accordingly.
You simply need the first child selector:
#foo > li{
...
}
This states "select the LI element after the #id, only".
EDIT
I should point out, you need to target the parent UL item with an ID or class.
EDIT 2 I see your updated your HTML example. Removed my nested HTML.
You have two basic choices:
Use CSS to set the style for the li elements and then override those styles for child li elements, or
Specify an id for the parent, or a parent element and then more-specifically select
1
ul li {
background-image: url(path.to/image.png);
}
ul li li {
background-image: none;
}
JS Fiddle demo.
2
<ul id="uniqueID">
<li>first-level</li>
<li>
<ul>
<li>Second-level</li>
</ul>
</li>
</ul>
and with the CSS:
#uniqueID > li {
background-image: url(path.to/background-image.png);
}
JS Fiddle demo
It's worth noting, though, that many elements are, by default or with CSS-resets, styled to have transparent backgrounds. This means that you may have to over-ride the styles of the parent li elements, regardless:
#uniqueID > li {
background-image: url(path.to/background-image.png);
}
li li {
background-image: none;
}
JS Fiddle demo
For the HTML List below, I need to add a background image only to the LI of the outer list.
(aka the one with class "menu-mlid-594 dhtml-menu expanded start-collapsed")
HTML codes are:
<li class="menu-mlid-594 dhtml-menu expanded start-collapsed ">
About the Collection
<ul class="menu">
<li class="leaf first dhtml-menu ">By Theme</li>
<li class="leaf last dhtml-menu ">By Individual</li>
</ul>
</li>
How can I do that?
Thanks.
li.menu-mlid-594 { your css rules here }
The above will only apply to li elements that have the class menu-mlid-594
Kind of hard to say what will work with so little contextual information, but in general you'll usually need to rely on cascading rules:
#outerULIdentifier li {
background-image: url('someImage.jpg');
}
#outerULIdentifier li li {
background-image: none;
}
I am assuming here that there is an ID or class on the outermost UL that you can reference. Alternatively, you could do something like:
li.dhtml-menu {
background-image: url('someImage.jpg');
}
li.dhtml-menu.leaf {
background-image: none;
}
Although this latter version might have problems in IE 6 (which doesn't support multiple classes on a single element in a CSS selector very well).
ul li {background:#F00;} /* First level */
ul li li {background:#FFF;} /* Second level */