I'm currently building a site using the bootstrap 3 framework and I've come into a problem. I'm trying to style the background of a drop down with list items. If I use the following code:
.dropdown-menu > li > a{
background:#92a240;
color:#fff;
}
it styles one shade of green, I then want to use the :nth-child selector to style the other links a darker green, I'm using this code:
.dropdown-menu > li > a:nth-child(odd){
background:#b5c950;
color:#fff;
}
however this makes all of the link backgrounds a light color and not the odd ones.
any help would be appreciated.
Thanks.
I guess your html structures is like this:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
and not like this:
<ul>
<li>
</li>
</ul>
Since your css is going for the second html structure and I doubt it's like that one. If your structure is like the first one, then...:
Instead of targeting the a you should target the li with the odd:
.dropdown-menu > li:nth-child(odd) > a {}
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;}
I was using bootstrap to make a website with bootstrap when I encountered a small problem. I was trying to change the color of the text in my navigation bar (pills):
HTML:
<nav>
<ul class="nav nav-pills nav-justified">
<li class="active">Home</li>
<li>About</li>
<li>Privacy Policy</li>
</ul>
</nav>
CSS:
.nav-pills a{
color:white;
}
(This code solved my problem, but I have some questions below.)
I was wondering why in the CSS I have to reference the .nav-pills class (why not just .nav), and why I have to reference the a (link tag) in order to get the color of the text to change. (When I tried to change the a (link tag) to li (list tag), the color of the text did not change.)
The reason is because of order of precendence -- For a full undertanding read https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity .
As far as the specific style you asked about, if you look in the bootstrap repo, you will see the following two rules:
https://github.com/twbs/bootstrap/blob/b8bc20432f93385989291f2a67112e29b97de682/dist/css/bootstrap.css#L4035
https://github.com/twbs/bootstrap/blob/b8bc20432f93385989291f2a67112e29b97de682/dist/css/bootstrap.css#L4148
The first is for anchors in .nav sections and the second one for anchors in .nav-pills. Therefore the second one overrides the first, and in order for your styles to override it, it has to be at least as specific or more as the second.
When you have a look at bootstrap.css (the file that sets those values before you do) you will see that the color is set for .nav-pills > li > a
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
color: #fff;
background-color: #3276b1
}
So, if you set the color to .nav, this will be overriden by the .nav-pills class' style declaration.
If you would change your code to
.nav {
color: white !important;
}
You would override the more exact selector, but you should avoid using !important whenever possible as it makes your code harder to maintain.
you have to reference the " .nav-pills a " class because that's the section you are trying to style . If you just put .nav without adding the -pills a, then the code wouldn't make sense thus nothing would happen.
I was wondering why in the CSS I have to reference the .nav-pills class (why not just .nav), and why I have to reference the a (link tag) in order to get the color of the text to change. (When I tried to change the a (link tag) to li (list tag), the color of the text did not change.)
You will override the class nav in bootstrap, it's better to make you own class so you have your own control in the specific class attribute. The link tag(a) have the css color properties that cannot override just using the list tag because the text is inside of the link tag(a).
<ul class="navTreeLevel0">
<li></li>
<li>
<li></li>
<ul class="navTreeLeve1">
<li>
<ul class="navTreeLevel2"></ul>
</li>
</ul>
</li>
</ul>
Any li could possibly have nth number of li that contain another ul level. Each ul level has an incrementing class navTreeLevel(++). I am hiding the levels past 2 now with the following css.
.navTreeLevel3, navTreeLevel4 {
display: none;
}
I don't control the html on the generation of this side bar. I want to be able to hide all levels after 2. (3,4,5,6,..) Is there a way to select the class by having all .navTreeLevel after 2?
It'd probably be easier to just hide all to start with and then show the ones you want.
ul[class^=navTreeLevel] {
display:none;
}
.navTreeLevel0,.navTreeLevel1,.navTreeLevel2 {
display:block;
}
Just pick the last level to show, and add ul after it:
.navTreeLeve2 ul {
display:none;
}
This hides all unordered lists below .navTreeLeve2.
These answers helped me rethink my approach to this problem. I came up with the solution of hiding the third level because everything within that level will be hidden as well.
ul.navTreeLevel3{
display: none;
}
With this nothing at level 3 or below will be visible.
Thank you for the answers.
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;
}
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>…)