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 }.
Related
I've tried to search this topic but it's kind of a hard topic to get the right keywords to find what I'm looking for.
What is the difference between #menu-nav ul {...} and ul#menu-nav {...} ?
I am currently working to make a inline-block nav menu in a Wordpress theme and here is the CSS producing the effects I want (ie removing list-style-type, creating blocks, centering them within their parent container, etc).
ul#menu-nav {
margin:0 auto;
padding:0;
}
#menu-nav li {
list-style-type:none;
display:inline-block;
width:118px;
height:56px;
color:white;
border:1px solid black;
}
If I change the ul#menu-nav {...} to #menu-nav ul the padding:0; and margin:0 auto no longer overrides the User Agent stylesheet. Frankly, this makes me assume that my CSS is hacky and I am going about this wrong.
Any suggestions or help or references would help immensely! I'd like to understand fully why they produce different results.
ul#menu-nav and #menu-nav ul mean very different things.
ul#menu-nav means "the ul tag with the id "menu-nav". (Which is kind of superfluous, since id needs to be unique anyway then it doesn't make a difference which element has it. Unless I suppose the content is dynamic enough that there's a chance that id might be applied to different kinds of elements in different circumstances, but that's probably a confusing design anyway.)
Example:
<ul id="menu-nav"> <-- This is what's being selected
<!-- any other content -->
</ul>
#menu-nav ul means "the ul tag(s) which are descendants of the element with the is "menu-nav".
Example:
<div id="menu-nav">
<ul></ul> <-- This is what's being selected
</div>
#menu-nav ul {...}
Means any ul inside a tag with id="menu-nav"
and
ul#menu-nav {...}
Means an ul with id="menu-nav"
Forgive me if this is incredibly basic, but after researching online for a few minutes, I can't find how to remove the natural indentation from an HTML list. Here is what I have tried with the CSS:
(check out my fiddle)
CSS
ul li {
list-style: none;
margin-left:0;
padding-left:0;
}
HTML
<ul>
<li>There</li>
<li>is</li>
<li>still</li>
<li>an</li>
<li>indent</li>
</ul>
In most browsers, a ul has a padding-left of 40px to allocate spacing for the bullet points.
Simply overwrite the padding. jsFiddle example
ul {
padding:0px;
}
I have a multi level navigation menu on my page consisting of an unordered list. That list has the class menu, like so:
<ul class="menu">
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3
<ul>
<li>Subcategory 1</li>
<li>Subcategory 2</li>
</ul>
</li>
</ul>
The href attributes are set to # for illustration purposes.
My question is: What is the best Selector to use for that kind of menu regarding speed?
At the moment I am using something along these lines (again, just for illustration, there are rules missing):
.menu {
background-color: #CCC;
}
.menu li {
background-color: #FFF;
}
.menu li > ul li ul {
background-color: #333;
}
Is a class the fastest selector in that case? Or should I use something like .navigation-container ul? Do you have any recommendations?
Simpler selectors are faster than complex selectors. For example .menu is faster than .menu ul, but it's no dramatic difference.
What you have is fine. You could perhaps try to make the .menu li > ul li ul less complex, but don't expect to notice any difference, because you could perhaps shave off a millisecond or two on the rendering time.
Here is some reading about efficient CSS seletors: http://csswizardry.com/2011/09/writing-efficient-css-selectors/
It's quicker to reference with an id, e.g. #menu, #menu li. I would also add an id to the sub ul tags too :)
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
I have a bunch of unordered list elements that are stacked side by side with each other. To accomplish this, the style rule typically applied is:
#slide ul,li{
float:left;
list-style-type:none;
}
I need to introduce another unordered list of elements that behave the way the ul and li element typically do; that is stacked on top of each other but without any list-style-type, and to achieve this:
.stack ul,li{
list-style-type:none
}
The problem is that the styles of stack class for ul,li do not apply and the elements stack next to each other as they are being in the case of ul,li for #slide.
Check it out on this js fiddle:
http://jsfiddle.net/G7JHK/
Are my selectors wrong?
P.S: I have tried this out with class/id and various combination of both but the result is always the same.
Because of the comma in your selector you were applying float left to all li elements. Try something like this:
<ul class="stack">
<li>element 1</li>
<li>element 2</li>
</ul>
<br/>
<ul id="slide">
<li>element 3</li>
<li>element 4</li>
</ul>
#slide li{
display:inline;
}
This css will make all list elements in the div 'slide' display in a row and all other list elements will continue to display like normal. It saves you having to use two different classes :)
Your CSS should be like so
ul.stack li{
display:block;
}
ul#slide li{
float:left;
}
I think you want something like:
ul.stack li{
display:block;
}
ul#slide li{
float:left;
}
Look at the selectors. You want to select a ul with class stack (ul.stack) and find its child li.
There is problem of your selector. class or id of same element never separated by a white space. They should be with no space and the child are separated by a space but no ',' will not be used there..
So you can try this in your code
ul.stack li{
display:block;
}
ul#slide li{
float:left;
}
Also you have to place the HTML tag name first and then the preceding attribute.
The problem is that you selected the ul that is a descendent of slide, but your ul has an id of slide, so it doesnt work, because there is no ul that has a container with an id of slide. Also by putting ,li you are selecting all list items on the page. You want to have #slide li, which will only select the list items with a container id of slide. You don't need the #slide ul so your final code should be
#slide li {
float:left;
}
http://jsfiddle.net/G7JHK/6/
As an alternative, you could use ul:nth-of-type(2) instead of an id to save some space in the html
http://jsfiddle.net/G7JHK/7/