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;
}
Related
I am trying to style my responsive nav drop-down menu and change the background color but can't seem to figure it out. I would like the items in the list below to have a gray background of #cccccc.
the full site is located here:
http://adanburlington.com/giotto2/index.html
HTML:
<ul class="nav hidden">
<li>Fire Alarm Systems</li>
<li>Security & Intrusion</li>
<li>Closed Circuit TV</li>
<li>Access Control</li>
<li>Systems Integration</li>
</ul>
Responsive CSS:
#media screen and (max-width : 1100px){
ul.nav
{ position: static;
display: none;}
li.nav {margin-bottom: 1px;}
ul.nav li, li.nav a {width: 100%;}
.show-menu {display:block;}
li.nav > ul.hidden {
display: block !important;
}
}
I don't see where you are trying to set it in the CSS you listed in your question.
I would think
ul.nav.hidden li a {
background-color: #cccccc;
}
would do it if you don't have another statement for this that counteracts it. If you do, add another class to the ul so you can make your selector specific to this instance.
If your li has padding, either drop the "a" off the selector or add "ul.nav.hidden li" as a second selector.
Btw, you have "li.nav" a few places. For this section of html, at least, your lis don't have the class "nav" but are instead inside an element with class "nav", so it should be ".nav li" if you are trying to target those. ;-)
ul li {
background-color: #cccccc;
}
I have a structure:
<div id="div">
<ul class="ul">
<li class="li_one">
</li>
<li class="li_two">
</li>
</ul>
</div>
I want to set background:red to the second li element (class "li_two") using pseudo-selectors and want to begin from the most outer div. I'm trying to this way:
#div > ul:nth-child(1) { background:red; } // works but wrong, sets background to ul
#div ul:last-child { background:red; } // doesn't set to any element
#div ul:first-child { background:red; } // again sets to ul but not to li
#div [class=li_two] { background:red; } // only this one works fine
Is it possible to set style to li_two from #div using :nth-child or :last-child or :first-child selectors? How to do it?
#div li:last-child
Your 2nd option was almost right :) I think you misunderstood what last-child does. xx:last-child It doesn't select the last child element of element xx; it selects every xx element that is the last child of it's parent.
Some reading.
I've created a JSFiddle for you to test it
:nth-child() and the other pseudo-classes should be applied to the child elements, not the parent. Apply those pseudo-classes to the lis:
#div ul li:last-child {
background: red;
}
I have the following css which needs to alter the last-child which does not have the class "myClass" but I can't seem to get it to work.
Any ideas where I'm going wrong?
ul li:not(.myClass):last-child a {
font-style:italic;
}
Example html as requested:
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li class="myClass">Extra</li>
</ul>
I want to apply the css to li three...
this can't be done with css only if you are capable to use jQuery you might find this solution helpful.
http://jsfiddle.net/6ku3Y/
$('ul li').not('.myClass').last().find('a').addClass('mystyle');
If you're sure the element you want to target is the last but one, you can use nth-last-child(2)
ul li:nth-last-child(2) a {
border-right:0px solid #000;
}
If you want to apply the css only to li three, Try :nth-child(3)
ul li:nth-child(3) a {
border-right:0
}
http://jsfiddle.net/hhncn/
This pseudo-class matches elements on the basis of their positions
within a parent element’s list of child elements.
– http://reference.sitepoint.com/css/pseudoclass-nthchild
Current CSS syntax is not capable of facilating an AND operator to perform this kind of style. What you need is the CSS LESS Framework.
This will allow you to do this:
ul > li:not(.myClass) {
li:last-child {
//style here
}
}
Try something like this:
ul li:not(.myClass):nth-last-of-type(2) a {
border-right:0px solid #000;
}
SEE DEMO
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 */