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
Related
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 have menu which the active item has an active class on load, which changes its background.
The hover of other items change the background of hovered item.
<ul>
<li></li>
<li class="active"></li>
<li></li>
</ul>
<style>
li:hover, li.active {background:black}
</style>
Is there any way to remove active class background on other items hover in pure CSS. something like:
li.hover .active {background:none}
This works if active is under li, but doesn't work here.
This isn't reliably possible with CSS, as CSS can only affect elements that appear later in the DOM, not previously, so hovering over the first li can affect the current li.active element with the following CSS:
li:hover ~ li.active {
background-color: #f00; /* or whatever */
}
JS Fiddle demo.
But hovering over the third li cannot affect the same li.active element.
However, the following would work:
ul:hover li.active {
background-color: transparent;
}
JS Fiddle demo.
Try this:
ul:not(:hover)>li.active { background: black; }
ul>li.active:not(:hover) { background: none; }
This has a few conditions:
A browser which supports the :not pseudo-tag
The ul must not have too much padding or empty space, otherwise you could activate the :hover of the ul without hovering over any lis
This worked for me :
.dvchange1 {
color:#fff;
}
.dvOne:hover .dvchange2 {
color:#000;
}
<div class="dvchange1 dvchange2">
<span class="">
Hello
<span>
</div>
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 */
I have the following menu:
<ul class="top-menu">
<li><a_href="/Products" title="Products"><span>Products</span></a><ul>
<li><a_href="/Products/List" title="Product List"><span>Product List</span></a></li>
</ul>
</li>
<li><a_href="/Customers" title="Customers"><span>Customers</span></a></li>
</ul>
and I also have a sprite for the top menu items (products, customers).
How is it possible to make the menu's top level links display the images ?
thought about css nth-child selector
ul.top-menu
{
list-style: none;
width:528px;
}
ul.top-menu li a
{
display:block;
float:left;
height:40px;
background-image:url(../Images/sprite-menu.png);
text-indent:-9999px;
}
ul.top-menu:nth-child(1) a
{
width:135px;
background-position:0 0;
}
but it is not working.
thanks.
nth-child selectors are set on the child element, not the parent
To make your example work, I used the nth-child selector on the li rather than the ul, like so:
ul.top-menu li:nth-child(1) a
{
width:135px;
background-position:0 0;
}
And of course the "<a_href" tags in your sample HTML should read "<a href" with no underscore.
you probably want to chain child selectors
To achieve the effect I believe you want, which is to have only the top-level items get the style, I would use CSS Child Selectors instead:
/* desired top-level-only styles go here */
ul.top-menu>li>a
{
width:135px;
background-position:0 0;
}
I have a menu:
<div id=menu>
<ul=navigation>
<li><a href=>Home</a></li>
</ul>
</div>
With the sliding doors technique I want to create my button (containing rounded corners at the bottom.)
I can get this to work, by hovering the a and the li. But the li is bigger, and if I hover over the li, without hovering the a, only the background image for the li shows.
Now I'm wondering if there is a way to connect the hover of the li and the hover of the a within css. I rather fix this problem without using javascript.
Googleing didn't helped me further. I'm guessing this isn't possible, but I wanted to be sure before trying other options.
Thanks in advance for any advice/help/suggestions.
From what I gather you cannot do what you are after in the way you have described it.
However what I would do is make the "a tag" display as block and set the width and height to fill the "LI" that way you can use a:hover and change the whole bg which makes it look like the LI is changing
li a {
background:#000 url(images/bg.png) no-repeat 0 0;
display:block;
height:20px;
width:100px;
}
li a:hover {
background:#fff url(images/bg.png) no-repeat 0 -20px;
}
also use some padding to sit the text in the right place within the "LI" and remove any padding from the "LI"
li:hover is not supported without JS in older versions of IE so using a:hover instead provides better cross browser compatability
You can do this simply with:
<div id=menu>
<ul>
<li><a href=>Home</a></li>
</ul>
</div>
Then in your CSS:
#menu ul li:hover{
background-image:url(newimage);
}
If you require IE6 compliance, just make your links fill the entire width of the UL's.
#menu ul li a:link, #menu ul li a:visited{
display:block;
width:999px; <-- enter pixels
height:999px; <-- enter pixels
}
then modify the background image normally with:
#menu ul li a:hover{
background-image:url(newimage);
}
#menu li {
/* normal li style */
}
#menu li a {
/* normal a style */
}
#menu li:hover {
/* hover li style */
}
#menu li:hover a {
/* hover a style */
}
Will not work with IE6...