How can i select the"Automobiles" text and the unordered list right after that.
Without changing the html code.
I tried selecting it with- nav ul li
also tried with- nav:first-child ul:first-child
<nav>
<ul>
<li>Automobiles
<ul>
<li>812Superfast</li>
<li>GTC4Lusso</li>
<li>488GTB</li>
<li>488Spider</li>
</ul>
</li>
</ul>
Just separately define them them:
nav ul li, nav ul li ul {
...
}
Just for information: If you are able to modify the html code, you should use classes within the elements.
Related
So I have an unordered list like this
<ul>
<li>image.jpg</li>
<ul>
<li>name</li>
<li>description</li>
</ul>
</ul>
I want to have the image on the left side and the name and description(one below the other on the right side of the image. Is it possible to do this. I have tried setting the li > ul > li's to display block and the ul before that to a display of inline. Also have tried floats. Is there an easy way to do this?
Not sure if this is what you want, but try this in your css:
li, ul, ul ul {
float: left;
}
ul ul li {
float: none;
}
http://jsfiddle.net/Cf3EY/
I am trying to make a drop down list by using nested Un ordered lists.
My case is i have an unordered list, which is having another unordered list inside of its li element. I had written hover for the first level li elements by using the child selector. My problem is while hovering the first level li element, the css for its hovering process is also get applied to its child li element. My question is why does the child selector selecting its descendants in my case..? and what should i do to avoid this in future.?
DEMO - Fiddle
Here is the solution below:
My question is why does the child selector selecting its descendants in my case..?
Because you have defined one part of the CSS by adding #ULHeaderMenuWrapperMenuCollection > li:hover
what should i do to avoid this in future.?
You have to protect the inheritance by adding #ULHeaderMenuWrapperMenuCollection > li:hover div ul li to your CSS. Here is the Working Solution.
#ULHeaderMenuWrapperMenuCollection > li:hover div ul li
{
color:black;
}
#ULHeaderMenuWrapperMenuCollection > li:hover div ul li:hover
{
color:orange;
}
Hope this helps.
Updated to fit to your original code
When you mouse is hover your sublist, it's still hover the main one.
I suggest you to put your <li> text in a <span> or a <a>, which makes your css simplest :
HTML
<ul id="ULHeaderMenuWrapperMenuCollection">
<li>
<span>Products</span>
<div id="DivProductsMenu">
<div id="DivProductsMenuUpper">
<ul>
<li><span>CIMS</span></li>
<li><span>VPRO</span></li>
<li><span>BIRIS</span></li>
</ul>
</div>
<div id="DivProductsMenuLower">
<ul>
<li><span>PATRON</span></li>
<li><span>DEAL</span></li>
<li><span>MEDIX</span></li>
</ul>
</div>
</div>
</li>
<li>
<span>Contact Us</span>
</li>
</ul>
CSS
#ULHeaderMenuWrapperMenuCollection li > span:hover {
color:orange;
}
JsFiddle
<ul>
<li>test</li>
<li>
<ul>
<li>another</li>
</ul>
</li>
</ul>
I only want to style the nested ul tag... is this possible? I know I can just give the ul an id or class, but I was wondering if there was another way (I think:first-child, last-child, nth-child, may be at play here?)?
ul ul that means any ul that's a child of another ul, no matter how many levels down it is.
If you want to target THAT level, specifically, you could go with ul > li > ul which would target uls that are direct children of lis that are direct children of uls.
Tidy.exe do not recognise the format
UL
LI
/LI
UL
/UL
/UL
if i have a list like this one:
<ul>
<li>
item name
<ul>
<li>
item name
</li>
<li>
item name
<ul>
<li>
item name
</li>
</ul>
</li>
</ul>
</li>
</ul>
And for example i want each "li" to display inline like its all one sentence... I need this for breadcrumbs...
I tried this:
ul li {
display: inline;
float: left;
}
But this wont work because the "ul" or "li" doesn't have a defined width so it goes under.
Any help is welcome,
Thanks!
This one works:
ul{display:inline;}
ul li{display:inline;}
ul li ul li{display:inline;}
The jsfiddle: http://jsfiddle.net/naveed_ahmad/QWshN/
Use ul ul li as the selector if you only want the nested ULs to be styled. You also probably don't need float: left.
Just having text inside of the <li> elements is making the text behave like a block-level element itself (effectively wrapping each set of text in a <p> tag). If you wrap the text in a <span>, for example, and make the span inline as well, you will get the desired result
Also, use ul, li, span as the selector instead of ul li
Edit:
In fact, if you just change your original CSS to:
ul, li {display: inline}
it will work perfectly.
You only want the outer ul to be a block level element, so to make all other elements inline elements, you can use:
/* both the inner ul's and the li's */
ul ul,
li
{
display:inline;
}
or, if you want to float them instead:
ul
{
overflow: hidden; /* make sure the uls wraps around their contents, mainly for outer ´ul´ */
}
ul ul,
li
{
float: left;
}
I think this is sexier:
ul, li {
display: inline-block
}
http://jsfiddle.net/jzVcE/
I came across this certain piece of code, and didnt get it.
1>
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul{}
2>
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly{}
And here is the html code:
<ul id="nav">
<li class="top"><span>Home</span></li>
<li class="top"><span class="down">Products</span>
<ul class="sub">
<li>Cameras
<ul>
<li>Nikon</li>
<li>Minolta</li>
<li>Pentax</li>
</ul>
</li>
<li class="mid">Lenses
<ul>
<li>Wide Angle</li>
<li>Standard</li>
<li>Telephoto</li>
<li>Zoom
<ul>
<li>35mm to 125mm</li>
<li>50mm to 250mm</li>
<li>125mm to 500mm</li>
</ul>
</li>
<li>Mirror</li>
</ul>
</li>
<li>Flash Guns</li>
<li>Tripods</li>
<li>Filters</li>
</ul>
</li>
<li class="top"><span class="down">Services</span>
<ul class="sub">
<li>Printing</li>
<li>Photo Framing</li>
<li>Retouching</li>
<li>Archiving</li>
</ul>
</li>
</ul>
Can someone tell me what areas are addressed in the above 2 css code blocks ?
Thanks
I'd say it's the original developer, and not you, who's not getting it.
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul {
}
There's no element matched by #nav li:hover li:hover li:hover li:hover ul ul that isn't already matched by #nav ul. The same can be said about the other set of selectors.
A comma separated list of selectors, in CSS, means, "apply this for all elements that match any of these criteria".
Now, for both examples, the top selector will also match any element that is matched by any of the subsequent selectors, making them all redundant. The following selectors are exclusively of increasing specificity.
If there were different CSS blocks following each selector, then the code would make sense, althought it'd be rather ugly. I'm guessing that this is based on code that used different styles in different levels of tree (to control text indent, say), which was then refactored to code that can be the same for all selectors.
Somebody then realized that, since the styles in each block are the same, all the selectors can be combined, but didn't realize that the code could be refactored even further, to simply #nav ul { ... }
I'm guessing that the empty blocks { } actually had some styles in them, that you left out, for readability? Of course, if they were completely empty, as in your example, it'd be safe to remove the selectors entirely.
A <ul> that's a descendant of something with id="nav".
or
A <ul>that's a descendant of a <ul>, that's a descendent of a <li> that has the mouse over it, that's a descendant of something with id="nav".
Etc.
As pointed out, the first line already matches everything that the rest of it matches. Perhaps the child relationship (>) was meant rather than just descendent.
The second one is similarly redundant.
the firat and the seconds also like a query they select items inside an item
the comma separator allows you to add the same style for separated groups
the only space allows you to seek after shildrens in the node and the style specified for the node in the parent
ul
this saysyou select every UL tag
ul li
this says you select only the li tags contained within an UL tag
ul li a
this says you select only the a tags wich contained in a specified li tgas which are contained in an ul tag this will not select the a tags which dont have li parent in any leaf. for example this will not select <body><a></a></body>
butthis will select the <ul><li><div><a></a></div></li></ul>
the :hover is a secified event trigger, which is called when you mouse over the item.
the # operator is says you search for an ID attributed tag
the point . operator you search for an item wich attributed with the class stag
dont forget only one item has tha same id , cut couple of items can have the same class, and one item can have 2 or more different class
adding an id:
<div id="important-div"></div>
this mean the div is identificated with the important-div identificator you can fint this node with this name. like your credit card numer, no one has the same as you.
adding calssnames
<a class="clickable redborder nomargin"></a>
this means you a tag has 3 classname, you can add styles with the clickable class selector, and with the others also