HTML:
<ul id="menu">
<li>Portfolio</li>
<li>Services</li>
<li>About</li>
<li>Testimonials</li>
<li>Request a Quote</li>
</ul>
CSS:
ul#menu li {
display:inline;
margin-left:12px;
}
Is there a difference between using "ul#menu li" and just "#menu li"? I used both versions and they seem to accomplish the same thing. Is there a reason why most tutorials use add the "ul" before the id?
There is one obvious difference and one more subtle difference.
The obvious difference is that #menu targets all elements with the ID #menu, whereas ul#menu only targets ul elements. If you only give the ID #menu to ul elements, the selectors will always have the same result.
There is one potential difference with something called specificity. This is a way of determining which rule to use in case of conflicts. So if you have these two rules:
#menu li {color: blue;}
ul#menu li {color: red;}
the second rule will win, because it is more specific, and the text will be red. The rules for specificity are complex and not always intuitive, but in this case the simple result is that ul#menu li is slightly more specific than #menu li. If you only have one stylesheet, this is unlikely to be an issue for you. If you have several stylesheets, it can be confusing to work out why a certain rule is being ignored; specificity is often the answer.
As to why most tutorials use ul#menu, I don't know. (In fact, I only have your assertion as evidence that they do!) My guess is that they are making things Really Very Obvious for the sake of idiot readers.
The results rendered will not be different for those specific elements.
However, ul#menu li is more specific, as it targets all elements of type li with parent id #menu and type ul.
Imagine the selector like UL > #MENU > LI
#menu li only targets all elements of type li with parent id #menu.
Imagine the selector like #MENU > LI
For most purposes, they will do exactly the same thing. #menu li should not have any effect on other elements on the page, as id is specific, and therefore, as suggested in the comments below, it is unnecessary. As such, I would stick to #menu li.
The difference is specificity. The ul#menu is more specific and deems that the element the rule targets must be a <ul> that has an id of menu. Say you change your <ul> to a <div> that has an id of menu it wouldn't work (without changing your css). Also if you define something with just #menu you can add overrides by making the rule more specific by using ul#menu. You can read more here: battle-of-the-selectors-specificity.
The difference in specificity between the two will not often make a difference, but we could think of circumstances in which it will.
What if you have <div id="menu"></div> on one page and <ul id="menu"></ul> on another, and you are using the same CSS file in both? I'm not saying that would be a good design decision, but in that circumstance the distinction between ul#menu and #menu would be important. Do you want the CSS to apply to all elements with id="menu" or only ul elements with id="menu"? That's the distinction.
I'd like to give the same answer as #jacktheripper, but want to add the following:
Yes, ul#menu li is more specific, but it also requires more parsing time, as CSS reads the selectors from right to left. So it picks out all elements #menu and afterwards gather all UL-lists and from those select the ones, which contain the previously found #menu.
This makes more difference when using long chains of selectors: #mainmenu ul.menu li.current ul li.current (instead of maybe #mainmenu .current .current).
Related
I have this HTML:
<div class="navbar">
<ul>
<li>Foo
<ul>
<li>Bar</li>
</ul>
</li>
</ul>
</div>
I want to apply CSS only to item "Foo." I do not want to tag every top-level <li> with a special class. My limited knowledge tells me I should be able to do this:
.navbar > ul > li {
text-transform: uppercase;
}
But the style gets applied to "Bar" as well when I do it like this. I thought that '>' specifies only immediate children, does it not work the same way when it's nested? Is what I'm trying to do even possible?
I thought that '>' specifies only immediate children, does it not work the same way when it's nested?
It does work the same way. Since you're anchoring the ul directly to .navbar with .navbar > ul, your selector does apply to li elements directly that particular ul only.
The problem is not with the selector; it's the fact that text-transform, like most text properties, is inherited by default. So even though you're applying the style only to immediate li elements, the nested ones receive it by inheritance.
You will need to reverse this manually on the nested elements:
.navbar > ul > li li {
text-transform: none;
}
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"
Is there a good reason to override CSS list-style on both <ul> and <li> or just <li>?
Per w3.org you can define list-style-type on any element with display:list-item.
As far as I know, in modern browsers you can set any element to display: list-item so that - if you wanted to - you could correctly use the list-style-type property on any of them.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>12084892</title>
<meta charset="utf-8">
<style>
div span {
display:list-item;
list-style-type: disc;
list-style-position: inside;
}
</style>
</head>
<body>
<div>
<span>One</span>
<span>Two</span>
</div>
</body>
</html>
Trivia tidbit aside, what behavior are you looking to get? If you want different list items in the same list to have different bullets, then you'll need to define the list-style-type on the lis themselves. If you want all the lis within a given ul to have the same bullet, it's up to you. I typically define this on the ul, however. It is more intuitive to do it that way for me, personally.
If you look at the CSS spec, you'll see that property is intended to style "elements with display: list-item".
The property is inherited if not explicitly defined on the <li> elements, so you should stick to applying the style to only <li> elements.
If it's the same one, no. Just define it on whatever's convenient to you; <li>s will inherit the <ul>'s list-style unless explicitly overridden.
Inheritance transfer the 'list-style' values from ol and ul elements to li elements.
so i think you should apply the style to only li elements.
Even if list style is getting inherited from UL/OL, you should define css list-style to li only. And You can create different list styles with each other in one list. For example:
ul.test li {
list-style:disc;
margin:0 0 0 20px;
}
ul li:first-child {
list-style:circle;
}
You should normally set list-style on ul and ol elements only, because this avoids unexpected and undesired problems caused by cascading rules. See description of `list-style in CSS 2.1 spec.
For example, ol li { list-style: upper-roman; } may look safe, but consider this:
<ol>
<li>foo
<ul>
<li>bar
</ul>
</ol>
Now the inner li element, with “bar” content, will have the list style applied to it, because it too matches the selector ol li. (It is true that using the selector ol > li would avoid this, but it has browser compatibility issues.)
Setting ol { list-style: upper-roman; } instead avoids the issue, since now the inner li does not match, and it inherits list-style from its parent, ul (which has a suitable setting in browser default style sheet).
However, you need to set list-type directly on an li if you want one particular list item be styled differently from other items in the same list. In such cases, you will normally use an id selector or other selector that matches that specific element only, not any inner li elements.
Excuse the poor phrasing, I know it's possible but I can't figure out what to google so I'll just explain it like so..
I have this html:
<div class="navbar_links">
<ul>
<li>Home</li>
<li>About</li>
<li>Speakers</li>
<li>Exhibitors</li>
<li>Agenda</li>
<li>Location</li>
</ul>
</div>
and then later on I might have another list..
All I want to do is style just the <ul> / <li> items for the class navbar_links. Not for any occurrence of an unordered list in the html, just an unordered list found within <div class="navbar_links"> Could someone explain to me how to do that? And for future reference, let me know what it's "called" so I don't have to waste SO's time with something I know I should have been able to google, sorry :P
Use .navbar_links ul or .navbar_links li depending on what you actually want to style. This will restrict the styling to only those items that fall inside the navbar_links class.
You're looking for CSS selectors: www.w3.org/TR/CSS2/selector.html
In this case, you can write the following:
.navbar_links ul {
/* put styles for ul here */
}
Like so:
.navbar_links ul
Here's a sample fiddle: http://jsfiddle.net/AWWmc/1
You can just use:
.navbar_links ul
to do what you want.
What you're looking for are called CSS Selectors or more specifically, the class selector. e.g.
.navbar_links ul, /* Select all ul within elements of class='navbar_links' */
.navbar_links ul > li /* Select all li that are *children* of a ul within els of class='navbar_links' */
(The second example would not select the inner li of <div class='navbar_links'><ul><li><ol><li>…)
I'm fighting with CSS and can't figure out how to remove bullets. Yeah, I know this sounds easy, but hear me out. I have another external CSS file from our corporate office that has styles that are getting in the way and I can't for the life of me figure out how to override them. I've tried the !important token and it doesn't work either. I'm using chrome and the inspector hasn't yet helped me figure out what's causing it. Anyway, here's my code which works great stand-alone, but once I put the corporate CSS file in there, the stupid bullets come back. Ugh!
<ul style="list-style-type:none;">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
This sounds like more of an issue with CSS specificity. You can't "override" the other styles, per se, you can merely create additional styles which are more specific. Without knowing what the other CSS looks like, there are generally three ways to do this:
Inline styles
Exactly like you have in your example. These are most specific, so they're guaranteed to work, but they're also guaranteed to be a pain in the neck to work with. Generally, if you're using these, something needs to be fixed.
Add an id attribute to the unordered list,
Then use the id as a selector in your CSS. Using an id as a selector is more specific than using a class or an element type. It's a useful tool for cutting through a bunch of styling that you might be inheriting from somewhere else.
<ul id="the-one">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
ul#the-one {
list-style-type: none;
}
Wrap all of your HTML in a div with the id attribute set.
This is what I usually do. It allows me to use that div with it's id in my CSS styles to make sure my styles always take precedence. Plus, it means I only have to choose one meaningful id name, then I can just style the rest of my HTML as I normally would. Here's an example:
<div id="wrapper">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<p>Some text goes here</p>
</div>
div#wrapper ul {
list-style-type: none;
}
div#wrapper p {
text-align: center;
}
Using that technique is a pretty good way to make sure that you spend most of your time working on your own styles and not trying to debug somebody else's. Of course, you have to put div#wrapper at the beginning of each of your styles, but that's what SASS is for.
I had the same problem, I was trying to change the CSS for a joomla website, and finally found that the li had a background image that was a bullet... (the template was JAT3). This is the code:
.column ul li {
background: url(../images/bullet.gif) no-repeat 20px 7px;
...
}
Hope it helps someone.
Ensure the rule you're trying to override is on the UL, rather than the LI. I've seen that rule applied to LIs, and overriding the UL as you have above would have no effect.
My situation is similar to the one described by #fankoil: my inherited css had
main-divname ul li{
background-image:url('some-image.png');
}
to get rid of this for a specific ul, I gave the ul an id
<ul id="foo">
...
and in the css, turned off background image for this particular ul
ul#foo li {
background-image: none !important;
}
So to add some clarification to some previous answers:
list-style-type is on ul
background-image in on li
It's better if instead of having the style inline you call it using a class:
<ul class="noBullets">
.noBullets {
list-style-type:none !important;
}
If you can't find the style that's overwriting yours, you can use the !important property. It's better to first inspect your code online using chrome or firefox's Inspect element (or firebug).
EDIT:
Accordnig to your comment, the style comes from div#wrapper ul. Did you try:
div#wrapper ul {
list-style-type:none !important;
}
The Trick is very simple:
HTML get that:
<ul id="the-one">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Style get that:
ul#the-one {list-style-type: none;}
But, the next two options will blow your mind:
li {width: 190px; margin-left: -40px;} // Width here is 190px for the example.
We limit the width and force the li paragraph to move left!
See a Awesome example here: http://jsfiddle.net/467ovt69/
Good question; it's odd how the bullets show in IE even with the list-style:none;
This is the code that removed the bullets:
/* media query only applies style to IE10 and IE11 */
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* removes bullets in list items for IE11*/
li {
list-style-position: outside;
overflow: hidden;
}
}
check for the following line of code in your css:
.targeted-class-name>ul>li>a:before {
content: "•";
}
That was the culprit in my case
i think you could solve also your problem by wrapping text in your list-item with span then used something like this:
ul>li:nth-child(odd) > span:before {
display:none;
}
ul>li:nth-child(even) > span:before {
display:none;
}
Odd and even are keywords that can be used to match child elements whose index is odd or even, and display=none will do the trick to by not displaying element before the span element.