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>…)
Related
My current issue is that my list at the top of my website is a little too small. I am trying to make the text the size of .
I would so something like this
<li style="color:black;font-size:30px">Example </li>
But my list is an href and this will not work.
<ul>
<li>How Does it Work?</li>
<li>FAQ</li>
<li>Discord Server</li>
</ul>
</div>
So im unsure on what to do, any help would be great.
You need to select that a tag
Use this in css:
ul li > a {
font-size: 30px;
}
this means it will select every a element which is a child of li.
You should use a CSS file whenever possible. You could also use a style tag. But the following in your html file.
<style>
ul li,
ul li a {
color:black;
font-size:30px;
}
</style>
Try <style>li a {color:black;font-size:30px;}</style>.
This targets all <a> elements that are inside a <li> and applies the styles on them.
This will style all the anchor tags inside an unordered list:
ul a{font-size:30px;}
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 a vertical menu like the one you can see HERE. The thing is - I want to have something like header. As you can seen, now my structure is this:
<div id="wrap">
<ul>
<li class="first">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
I could add another <div class="menu-header"> on top of the <ul> but I think that the it would be much easier and appropriate to just change the firs <li> item to looks like a header. However if I just add a class like I'm doing in the example the final output is the same (the styles are not overriden. I can use !important but this is kind of last resort.
Even though it's not a ton of CSS I would like to change only some things and other (like width for example) to be left as they are for all other elements. So how can I do this? Is there more CSS-like approach than just adding !important to each style I want to override?
There are two alternate ways to achieve this.
Alternate 1.
Use the first-child of the class first of the li which is a child of ul
ul li.first:first-child
For Instance,
ul li.first:first-child{
/* Your CSS Values. */
}
Alternate 2.
Use first-child of li which is nested inside its main parent #wrap (which is a unique identifier). Use this alternate only if you do not want to use the class first on li
#wrap ul li:first-child
For Instance,
#wrap ul li:first-child{
/* Your CSS Values. */
}
Hope this helps.
I'd give the CSS selector first-of-type a try.
li:first-of-type {
...
}
http://www.w3schools.com/cssref/sel_first-of-type.asp
Your problem with the example given is called specificity. Take a look here for a working example.
Without using of classes, to style the first-element of a list I suggest you to use the pseudo-class first-child.
#wrap ul li:first-child {
background: none;
color: #000;
}
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.
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).