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
Related
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 am seeing two different ways of referring to the unordered lists (<ul>), list items (<li>) and anchors (<a>).
I want to set the attributes of these items in a drop down list with at least two levels of nested <ul>.
My question is specifically about the ways to refer to the different levels of <ul>, <li> and <a> there in.
I have named the navigation bar id="navBar".
I have seen on youtube: Building a drop down navigation bar
The syntax used is:
ul#navBar .sub1 li
ul#navBar .sub1 li a
Where the class ".sub1" has been defined, and is the first level of nested <ul>, and ".sub2" is the second level of nested <ul>.
Referencing these levels, the code used is.
ul#navBar .sub2 a {
background-color: blue;}
ul#navBar li:hover > a {
background-color: #CFC;
}
It seems to me, that going to the bother of defining .sub1 and .sub2 is superfluous, and I have been using the format:
#navBar ul li{ background-color: blue;}
#navBar ul li:hover ul{ background-color: red;}
REAL QUESTION:
What is the correct syntax, using my (code just above) style of formatting. To refer to a second level nested <ul> and affect the <li> or the <a> there in?
I assumed it was along the lines of:
#navBar ul li ul li: hover ul{ background-color: red;}
But I am wrong :(
First note that there should never be a space before :hover.
So the basic HTML structure you're outlining is:
<ul id="navbar">
<li>
<ul class="sub1">
<li>
<ul class="sub2">
<li><a>Text</a><li>
</ul>
</li>
</ul>
</li>
</ul>
To refer to the li and a within .sub2, you'd write:
#navbar ul ul li { style to apply to li }
#navbar ul ul li a { style to apply to a }
#navbar ul ul li:hover { style to apply to li on hover }
#navbar ul ul li:hover a { style to apply to a on li hover }
The reason the tutorial assigned classes is because using generic nested element is a really inefficient way of using CSS selectors; it's faster to use classes. For more info, see this article from CSS-Tricks.
#navnar ul
{/*some style*/} Folder
#navbar ul ul
{/*some style*/} sub-folder
#navbar ul li:hover
{/*some style*/}
#navbar ul ul li:hover
{/*some style*/}
I think this is what you're after.
check out this tutorial for more info- css3-animated-dropdown-menu
<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
Sorry with title if it is not looks bad, I don't know how can I write the title for my issue.
So I have a menu bar with some menu-items and submenu-items as:
<div id="mainmenu">
<ul id="menu">
<li><a class="current" href="">Menu1</a></li>
<li>Menu2
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
</ul>
</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</div>
Here is the fiddle of what I have done so far.
What I want is to keep the menu-item also in :hover state if its submenu-item is being hover, such as If my mouse is on submenu or submenu2 the Menu2 should also be darkened. How can I do this with CSS?
I hope I am clear with my question.
EDIT:
Wooo thanks a lot every-one.
got it with: #menu li:hover
#menu li:hover,#menu a:hover,#menu > li a.current{
}
In last line of your CSS, add #menu li:hover to target selectors
Updated example here: http://jsfiddle.net/7UaNn/
Add this #menu li:hover > a in the following css
#menu a:hover, #menu > li a.current {
// your Style
}
So it should look like this:
#menu a:hover, #menu > li a.current, #menu li:hover > a {
// your Style
}
See Demo: http://jsfiddle.net/akhurshid/bk2HA/7/
At the moment all you hoverstyles for the listitem are applied to the a- Element.
However, you need to apply them to the li-Element to keep the hover state active.
Sometimes that may become tricky, but in your case it's pretty easy, just add:
#menu > li:hover{
background:#474747;
}
to your styles.
See your modified fiddle
Along with "a" also add hover for "li" :
#menu > li:hover{
background:#474747;
}
You may achieve this by hooking up to the :hover state of the parent li element instead of the anchor element - which is a children of the list-item that is actually hovered - like so:
li a:hover,
li:hover > a {
color: #fff;
}
You might need to use :nth-child() to get around every sublink being in hover state. Did not test this.
/edit: updated the selector, now using > a to only select the direct child anchor element of the hovered list element, no need for :nth-child or the like.
Make the thing that is changed on hover the background of the LI rather than the background of the 'a'.
ul#menu li:hover { background:#000; }
which is better for use
.menu{
float:left;
width:600px;
height:25px;
background:url(bg.png) repeat-x;
}
.menu ul{
float:left;
}
.menu ul li{
float:left;
width:150px;
height:25px;
background:#F00;
}
or
.menu{
float:left;
width:600px;
height:25px;
background:url(bg.png) repeat-x;
}
.menu ul{
float:left;
}
.menu li{
float:left;
width:150px;
height:25px;
background:#F00;
}
which tag is right menu ul li or menu li?
When you say which tag is right menu ul li or menu li?, are you talking about a div with class="menu" or are you talking about the deprecated menu tag (<menu>)?
If you are just talking about your css code, those are not tags, they are selectors. And I'd go with the most specific selector available in order to avoid accidental assignments
.menu > ul > li{
// this matches only list items directly inside a ul directly inside a .menu
}
even better would be this:
#menu > ul > li{
// now you are referencing the menu by id, so you know this is a unique assignment
}
or, if you have multiple menus:
#menubar > .menu > ul > li{
}
because otherwise you are in for surprises, you might actually have a structure like this:
(this is ugly, I know, but just to prove a point)
<div class="menu">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3
<ul>
<li id="abc">Menu Item abc</li>
</ul>
</li>
<li>Menu Item 4
<div><div><div><ol><li><div><ul>
<li id="xyz">Menu Item xyz</li>
</ul></div></li></ol></div></div></div>
</li>
</ul>
</div>
(you probably don't want to match items abc or xyz).
It makes no difference until you have to interact with other, similar selectors in the same stylesheet — and then it depends on what those selectors are.
It depends. If you've got an ol and a ul within .menu you'll want to use the more specific .menu ul li. Otherwise, .menu li is fine. You might like to read up on CSS specifity.
Unless you're going to also have ordered lists (<ol>) inside .menu containers, the result is exactly the same. Some will probably say one is faster than the other, but that is irrelevant (and hard to prove as it may differ in every browser)
Your selectors should match your intent - if you mean for any list item, regardless of whether it's inside a UL or OL to be styled the same, then example B. If it's only UL LI's you want to style, then A.
This is a fairly simple example, but this is a useful rule of thumb. Ask yourself "If someone came and stuck an ordered list inside .menu, how would I want it to look?
It's a great way to keep your CSS to just the right level of specificity, while maintaining flexibility in the HTML structure it can apply to.
Mozilla Devcenter recommend to use .menu li. You can red more about Writing Efficient CSS and optimizing css code. Personally, I use <ul id='menu'> and then #menu { display: block; margin: 0; padding: 0 }.