<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
Related
With the following HTML, does my CSS display as I have stipulated below?
HTML:
<ul>
<li>1</li>
<li>2</li>
<ul>
<li>3</li>
</ul>
<li>4</li>
</ul>
CSS:
ul + li /* 1 and 3 */
ul > li /* 1, 2 and 3 */
ul ~ li /* 1, 2, 3 and 4 */
Equally important, where did I go wrong?
There's quite a lot going on here so I'm going to try to break it down for you one by one. This will be long, but bear with me.
Let's make the indentation a little more consistent so we can see what's going on with the HTML:
<ul>
<li>1</li>
<li>2</li>
<ul>
<li>3</li>
</ul>
<li>4</li>
</ul>
When you open the first ul, and start adding lis to it, those li elements are children of the first ul. They appear inside it, or more precisely, between its start tag <ul> and its end tag </ul>.
By the time you open the second ul, you've already closed the second li with its own end tag. The second ul is not a child of that li because it appears after its end tag </li>. So the second ul — the inner one if you will — is a sibling of the second li, and therefore a child of the first (outer) ul. The fourth li, similarly, is a sibling of the second ul, and also a child of the first ul.
The third li is a child of the second (inner) ul. It is neither a child nor a sibling of any of the other elements. It is a grandchild of the first (outer) ul, but it doesn't matter for the sake of answering your question.
If the markup appears visually similar to a family tree, it should make sense to you. In a family tree, children appear under a parent. (Only, in a family tree, there are typically two parents; in HTML, every child has only one parent.) Children that are siblings of one another appear side by side, connected to the same parent. This markup is structured similarly, except the children are listed top to bottom instead of left to right. But they're still "side by side", logically speaking.
Recall what the following selectors do:
ul + li matches a li that's a sibling appearing immediately after a ul.
ul > li matches a li that's a child of a ul.
ul ~ li matches a li that comes after a ul as a sibling, but unlike with + it doesn't have to appear immediately after, as long as they're between the same set of opening and closing tags (this is called "having the same parent element"). Any ul + li is automatically also a ul ~ li.
Here's the markup again with some annotations:
<ul>
<li>1</li> <!-- ul > li -->
<li>2</li> <!-- ul > li -->
<ul>
<li>3</li> <!-- ul > li -->
</ul>
<li>4</li> <!-- ul > li, ul + li, ul ~ li -->
</ul>
Indeed, none of the first three li elements are siblings of any ul. Only the very last one is, and it matches both sibling selectors.
So how do you make the inner ul a child of the second li? You do this by moving the </li> so that it appears after the </ul> like so:
<ul>
<li>1</li> <!-- ul > li -->
<li>2 <!-- ul > li -->
<ul>
<li>3</li> <!-- ul > li -->
</ul>
</li>
<li>4</li> <!-- ul > li, ul + li, ul ~ li -->
</ul>
Critically, the inner ul will now match a different selector: li > ul. Additionally, your markup will now validate, as you are never allowed to have a ul as a child of another ul in the first place.
Finally, some of your stipulations require more complex selectors as they match pretty specifically. I'll walk you through each one:
To match 1 and 3, use ul > li:first-child. This is because 1 and 3 are the first children of their respective parent uls. You can usually tell if an element is the first child of another because its start tag is the first thing that appears after the parent's start tag, ignoring any text or whitespace.
To match 1, 2 and 3, use ul > li:first-child, ul > li:nth-child(2). The additional :nth-child(2) targets item 2 specifically.
To match 1, 2, 3 and 4, using ul > li is enough, since you're just matching them all. You can probably get away with just li if you only have ul in your markup, but this is unlikely to be the case so I'm erring on the side of being more specific than necessary, rather than not being specific enough.
It's a lot to take in, so let me know if any of this is confusing or overwhelming and I'll try to address your concerns.
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.
I have the following HTML:
<ol>
<li>A numbered bullet</li>
<ul>
<li>An un-numbered bullet</li>
<ul>
</ol>
But it shows like this:
1. A numbered bullet
1. An un-numbered bullet
When I do an "inspect element", it shows the ul li styles crossed out and overriden by ol li. Why?
it shows the ul li styles crossed out and overriden by ol li.
Since the ul is inside the ol, the li is a descendant of both the list elements, so both selectors will apply.
The two selectors have equal specificity, so they are applied in order.
You have defined the ol li styles after the ul li styles in the stylesheet, so they override the earlier ones.
You could use a more specific selector to target the deeper list:
ol ul li { }
Or you could use a child combinator instead of a descendant combinator:
ol > li {}
ul > li {}
(Note that it is invalid HTML to have a ul as a child of a ol. The nested list should appear within a li.)
If you put your <ul> inside the <li> it will work:
<ol>
<li>First level element, ordered
<ul>
<li>Unordered list</li>
</ul>
</li>
</ol>
http://jsfiddle.net/6tGvA/
In your version, the unordered list isn't nested in the li item for proper indentation, thus the ul is ignored.
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
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